Simulating LaTeX's \emph{} tag ("inverted italics") with CSS?

[Kiki Novak]

Hi,

I'm an Austrian writer living in Montpezat (South France), and I'm currently
busy converting some of my writings from LaTeX to HTML to publish them on
the Internet.

The novel I'm working on has two different first-person narrators, formally
distinguished by the use of italics. One of them (Violetta) only appears in
italics, the other one (Victor) in normal fonts. This is a formal help for
the reader to distinguish the two narrative voices, which can get easily
mixed up.

In the LaTeX version of the novel, I use the \emph{} tag whenever I want to
emphasize a word. The result is the following:

1) Victor uses a "normal" font style, so the \emph{} tag produces an oblique
or italic font style.

2) On the other hand, Violettas chapters are all printed in italic (or
oblique) style. Here, the \emph{} tag prints an upright text (normal font
style) to distinguish it from the rest in italics.
Now I'd like to simulate that with cascading style sheets and different
classes, because I hate the idea of having to hand-code "inverted italics"
everywhere, like this:

<i>Here is a text in italics with an</i> emphasized <i>word in it.</i>

See what I mean?

What I'd like to do is define a sort of separate italics behaviour in two
different classes. Here's the general idea in my style sheet:

..victor {
font-family: serif;
font-size: 120%;
text-align: justify;
font-style: normal;
}

..violetta {
font-family: serif;
font-size: 120%;
text-align: justify;
font-style: italic;
}

i.violetta {
font-style: normal
}

And I figured this would work like this:

<span class="victor">
<p>Here's some thoughts of Victor with some <i>emphasis</i> in it.</p>

<p>Here's some more thoughts of Victor with some <i>emphasis</i> in it.</p>
</span>

<span class="violetta">
<p>Here's some thoughts of Violetta with some <i>emphasis</i> in it.</p>

<p>Here's some more thoughts of Viletta with some <i>emphasis</i> in it.</p>
</span>

The result *should* be as described above, only it isn't. I admit I'm not
very familiar with CSS. I'm sure there's some syntax quirk I didn't catch.
I've worked through a good half dozen of tutorials, but now I'm clueless.


Any suggestions?

Niki Kovacs



--
Whereof one cannot speak, thereof one frequently goes ranting on and on at
ball-breaking length. (Ludwig Wittgenstein, Tractatus Logico-Philosophicus,
first draft)

[Rijk van Geijtenbeek]

On Tue, 24 Aug 2004 13:07:43 +0200, Kiki Novak <mi****@mouse.com> wrote:

Hi,

I'm an Austrian writer living in Montpezat (South France), and I'm
currently busy converting some of my writings from LaTeX to HTML to
publish them on
the Internet.

The novel I'm working on has two different first-person narrators,
formally distinguished by the use of italics. One of them (Violetta)
only appears in italics, the other one (Victor) in normal fonts. This is
a formal help for the reader to distinguish the two narrative voices,
which can get easily mixed up.

In the LaTeX version of the novel, I use the \emph{} tag whenever I want
to emphasize a word. The result is the following:

1) Victor uses a "normal" font style, so the \emph{} tag produces an
oblique or italic font style.

2) On the other hand, Violettas chapters are all printed in italic (or
oblique) style. Here, the \emph{} tag prints an upright text (normal
font style) to distinguish it from the rest in italics.
And I figured this would work like this:

<span class="victor">
You really should use DIV instead of SPAN here. Or you could add the class
directly to the paragraphs.
<p>Here's some thoughts of Victor with some <i>emphasis</i> in it.</p>

<p>Here's some more thoughts of Victor with some <i>emphasis</i> in
it.</p>
</span>

<span class="violetta">
<p>Here's some thoughts of Violetta with some <i>emphasis</i> in it.</p>

<p>Here's some more thoughts of Viletta with some <i>emphasis</i> in
it.</p>
</span>

You got the order of the elements in the selector wrong.

..victor i {
font-style: italic;
}

..violetta i {
font-style: normal
}
Here's an easy introduction to CSS syntax:
http://www.htmlhelp.org/reference/css/structure.html
--
Rijk van Geijtenbeek

The Web is a procrastination apparatus:
It can absorb as much time as is required to ensure that you
won't get any real work done. - J.Nielsen

[Kiki Novak]

Rijk van Geijtenbeek wrote:

You really should use DIV instead of SPAN here. Or you could add the class
directly to the paragraphs.

Thanks a lot! This worked OK!

You got the order of the elements in the selector wrong.

.victor i {
font-style: italic;
}

.violetta i {
font-style: normal
}

Rijk, you made my day! I've been banging my head against this for the best
part of the morning.

Cheers,

Niki
--
Whereof one cannot speak, thereof one frequently goes ranting on and on at
ball-breaking length. (Ludwig Wittgenstein, Tractatus Logico-Philosophicus,
first draft)

[Johannes Koch]

Kiki Novak wrote:

In the LaTeX version of the novel, I use the \emph{} tag whenever I want to
emphasize a word. The result is the following: [...] <span class="victor">
<p>Here's some thoughts of Victor with some <i>emphasis</i> in it.</p>

In HTML you should use the em element for emphasis.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)