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

Author

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

Kiki Novak

2004-08-26, 12:27 pm

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:

Here is a text in italics with an emphasized word in it.

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:


Here's some thoughts of Victor with some emphasis in it.

Here's some more thoughts of Victor with some emphasis in it.



Here's some thoughts of Violetta with some emphasis in it.

Here's some more thoughts of Viletta with some emphasis in it.


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

2004-08-26, 12:27 pm

On Tue, 24 Aug 2004 13:07:43 +0200, Kiki Novak <mickey@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:
>
>
>
> 

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

> Here's some thoughts of Victor with some emphasis in it.
>
> Here's some more thoughts of Victor with some emphasis in
> it.
> 
>
>
>
> 
> Here's some thoughts of Violetta with some emphasis in it.
>
> Here's some more thoughts of Viletta with some emphasis in
> it.
> 

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

2004-08-26, 12:27 pm

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

2004-08-26, 12:27 pm

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:
[...]
> 
> Here's some thoughts of Victor with some emphasis in it.

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

Rijk van Geijtenbeek

2004-08-27, 12:16 pm

Kiki Novak

2004-08-27, 7:17 pm