CODEWITHSUNDEEP
htmlcsstagsitalics
William Jockusch
William Jockusch

Reputation: 27295

css to force italics for certain characters only within a tag?

Is this possible? Basically, I want to be able to set up a tag that says "within this tag, a-z go into italics, but nothing else does." Or similarly for a-z and A-Z.

Upvotes: 1

Views: 1974

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

It’s possible only using a CSS3 feature with limited support (WebKit browsers), namely unicode-range restriction in @font-face, in a tricky way. The following works, in Chrome and Safari, on my computer, but most probably not on yours:

@font-face {
  font-family: funny;
  src: local("Times New Roman");
}
@font-face {
  font-family: funny;
  src: local("Times New Roman Kursivoitu");
  unicode-range: U+61-7A;
}
p { font-family: funny; }

It might work on your computer too if you can find out the specific name of the specific italic font (typeface) in the font family being used. Perhaps substituting Italic for Kursivoitu might do this, but the point is that the specific names vary across systems, even if the font family name (like Times New Roman) is the same.

And this would be an ugly hack, since it would make the browser use an italic font even though font-style is the default (normal).

You could use this idea together with a downloadable font, since then you can control its name. I tested this with the Cardo font family from FontSquirrel, editing the delivered CSS just a bit:

@font-face {
    font-family: 'Cardo';
    src: url('Cardo104s-webfont.eot');
    src: url('Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
         url('Cardo104s-webfont.woff') format('woff'),
         url('Cardo104s-webfont.ttf') format('truetype'),
         url('Cardo104s-webfont.svg#CardoRegular') format('svg');
}
@font-face {
    font-family: 'Cardo';
    src: url('Cardoi99-webfont.eot');
    src: url('Cardoi99-webfont.eot?#iefix') format('embedded-opentype'),
         url('Cardoi99-webfont.woff') format('woff'),
         url('Cardoi99-webfont.ttf') format('truetype'),
         url('Cardoi99-webfont.svg#CardoItalic') format('svg');
    unicode-range: U+61-7A;
}
p { font-family: Cardo; }

I just changed the specific font names CardoRegular and CardoItalic to the same name, here Cardo, and use that name for an element where letters a–z should appear in italic and other characters in regular Cardo.

To make letters a–z and A–Z italicized, you would edit the restriction to

unicode-range: U+41-5A, U+61-7A;

On browsers that support @font-face but not the unicode-range restriction, this trickery falls back to using regular Cardo in the element throughout.

Upvotes: 0

scottmgerstl
scottmgerstl

Reputation: 765

CSS is meant to style the structure of the page not the content of the page directly.

This being said, there are a couple of ways around it (obviously):

  1. Wrap the characters you want to italicize in <i>,<span>,<em>,<dfn>,<var>,<cite>
  2. Use javascript to search through all of you text and wrap any of these elements around that text
  3. use the server side code to split you text into an array and format the text with the tags on the server side so when the content makes it to the page it is already formatted.

There is no way to pick specific characters using CSS.

Upvotes: 1

Related Questions