|
Convenient web based access to our favorite web design Usenet groups
|
 |
This is Interesting: Free Magazines for Graphics designers and webmasters
| Author |
| Thread |
 |
|
|
|
|
|
 |
 |
 |
Simulating LaTeX's \emph{} tag ("inverted italics") with CSS? |
 |
|
 |
|
|
|
  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? |
 |
|
 |
|
|
|
  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? |
 |
|
 |
|
|
|
  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 ]
|
|
|
|
|
 |
|
|
 |
| All times are GMT. The time now is 03:44 PM. |
 |
|
|
|
|
|  |
|