The ISA-Bus

One blog to bind them all.

CSS tricks: Usenet or typewriter style emphasis and quotes

On Usenet it was customary to indicate emphasis by enclosing the emphasized passage in certain characters, like this:

This is *bold*, this is _italic_.

When I’ve quoted a Usenet on a webpage, I’ve always replaced these characters with the appropriate tags, since it looks rather silly with a standard (especially serif) font. But now I made a style sheet that uses a typewriter font for the whole text, where italics would look silly. At first I thought I’d revert the text itself, but then I noticed that it can be done completely within the style sheet itself (I’m omitting the usual line breaks to make it easier to read):

em        {font-style: normal;}
em:before {content: "_";}
em:after  {content: "_";}

The equivalent for bold would be:

strong        {font-weight: normal;}
strong:before {content: "*";}
strong:after  {content: "*";}

A similar situation is with quotes. Newer browsers automatically set the appropriate “before” and “after” for the quote tag without specific instruction in the style sheet. To get typewriter quotes, use this:

q {
quotes: "\"" "\"";
}

You cannot use HTML tags for the quotes, it would just be printed out.

One warning: The emphasis trick doesn’t really degradate gracefully. If the browser does not support the content tag (MSIE only did from 8.0 on), the emphasis will be completely lost to the viewer. Though it’s a neat hack, I’ll probably just replace italics with underline in the final style sheet.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: