Web Design Web Design Forum
Registration is free! Here you can view your subscribed threads, work with private messages and edit your profile and preferences Calendar Find other members Frequently Asked Questions Search
Home Web Design

Convenient web based access to our favorite web design Usenet groups

web design reviews

This is Interesting: Free Magazines for Graphics designers and webmasters  





  Last Thread  Next Thread
Author
Thread Post New Thread   

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

Kiki Novak




quote this post edit post

IP Loged report this post

Old Post  08-26-04 - 05: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 wan
t to
emphasize a word. The result is the following:

1) Victor uses a "normal" font style, so the \emph{} tag produces an ob
lique
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 fo
nt
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)


Post Follow-Up to this message ]
Re: Simulating LaTeX's \emph{} tag ("inverted italics") with CSS?
 

Rijk van Geijtenbeek




quote this post edit post

IP Loged report this post

Old Post  08-26-04 - 05: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 w
ant
> 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


Post Follow-Up to this message ]
Re: Simulating LaTeX's \emph{} tag ("inverted italics") with CSS?
 

Kiki Novak




quote this post edit post

IP Loged report this post

Old Post  08-26-04 - 05: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)


Post Follow-Up to this message ]
Re: Simulating LaTeX's \emph{} tag ("inverted italics") with CSS?
 

Johannes Koch




quote this post edit post

IP Loged report this post

Old Post  08-26-04 - 05:27 PM  
Kiki Novak wrote:
> In the LaTeX version of the novel, I use the \emph{} tag whenever I w
ant 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.)


Post Follow-Up to this message ]
Re: Simulating LaTeX's \emph{} tag ("inverted italics") with CSS?
 

Rijk van Geijtenbeek




quote this post edit post

IP Loged report this post

Old Post  08-27-04 - 05:16 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 w
ant
> 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


Post Follow-Up to this message ]
Re: Simulating LaTeX's \emph{} tag ("inverted italics") with CSS?
 

Kiki Novak




quote this post edit post

IP Loged report this post

Old Post  08-28-04 - 12:17 AM  
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)


Post Follow-Up to this message ]
Sponsored Links
 





All times are GMT. The time now is 03:44 PM. Post New Thread   
  Previous Last Thread   Next Thread next
Stylesheets archive | Show Printable Version | Email this Page | Subscribe to this Thread

Popular forums

Adobe Photoshop forum Macromedia Flash Web Site Design
Dreamweaver FrontPage forum
JavaScript Forum XML forum
Style Sheets VRML
Forum Jump:
Rate This Thread:

 

XML RSS Feed web design latest articles Syndicate our forum via XML or simple JavaScript

Web Design archive  Database administration help  


Top Home  -  Register  -  Control Panel   -  Memberlist  -  Calendar  -  Faq  -  Search Top