Language specific styling: emphasis

Posted
June 12 2005

From the very start of visual browsers, setting text in bold type or italics has been used as a means to denote emphasis, and that is exactly how today�s browsers render text that is marked up with emphasis (em, and strong) by default. Not a bad consensus per s�, but incompatible with some language. In this article, which is the second in a series, I show how authors may style emphasis on a language specific level.


Default

In order to assure that italics and bolding are indeed the default behavior, apply the following rules to a style sheet:

em {
	font-style: italic
}

strong {
	font-weight: bolder
}

Note that I use the bolder value instead of bold. If the font weight value of the parent container happens to be lower than normal (like light or 200), you might not want the emphasized text to be rendered in bold type: just bolder than the rest.

German ? Middle & Old High

In classic German typography, bolding was not a very convienent way of making emphasized words stand out from the rest of the text as the blackletters that were used were already very heavy. Extra letter spacing (and thereby actually making emphasized words lighter) was used instead. This effect is easily simulated with css.

:lang(gmh), :lang(goh) {
	font-family: 'Fraktur', blackletter, serif
}

em:lang(gmh), em:lang(goh) {
	font: inherit; letter-spacing: .1em
}
strong:lang(gmh), strong:lang(goh) {
	font: inherit; letter-spacing: .2em
}

Note that I did not include [regular] German (de) as blackletters are not exactly the common dominator in modern German typography.

Japanese and Chinese

In Japanese and Chinese languages, emphasis in body text is indicated by special emphasis marks. The CSS3 module: Fonts (currently a working draft) provides a relatively simple mechanism to achieve this effect on digital media.

em:lang(ja) {
	font-emphasize-style: accent
	font-emphasize-position: before
}

em:lang(zh) {
	font-emphasize-style: dot
}

strong:lang(zh) {
	font-emphasize-style: disc
}

:lang(zh-Hant) {
	font-emphasize-position: before
}

:lang(zh-Hans) {
	font-emphasize-position: after
}

Note that the placement of the ephasis marks differs between traditional and simplified Chinese.

Dutch

In similar fashion to Japanese and Chinese, the Dutch language uses accents as a visual indicator for emphasis. However, these are only applied to vowels, and only when the emphasis actually affects the pronunciation. Apart from that, underlining has traditionally been used to make words stand out ? something that hasn�t been entirely uncommon in other languages (including English) either.

When it comes to translating these styles to css, both are trouble. Underlining can easily be done by setting the text-decoration property to underline (or by creating a bottom border), but this can cause confusion with the underlining of hyperlinks (a href) and inserted text (ins). The latter is � currently � simply impossible to pull off with css. No lives are lost, though.

I reckon accented vowels are strong enough a visual indicator for regular emphasis (em) in Dutch, and ? as far as I�m concerned ? both the browser tradition of rendering text in italics as the Dutch tradition of underlining words can be dropped. As mentioned before, css currently does not provide a mechanism for adding accents to vowels properly, and perhaps it shouldn�t � users may make this part of the actual content. The only thing left to do is to tell browser the font style should be inherited.


em:lang(nl) { font-style: inherit }

Note that the font style should not be set to normal, as the emphasized text should be able to inherit the font style if it happens to be a child of something that does use italics (like a definition or a variable, for example). Also note that I reckon that bold type is a proper means for indicating strong emphasis (strong), so this requires no language specific styling.

P.S. I vaguely recall reading something about emphasizing characters by making them smaller (more compact) in traditional Chinese typography, but I can�t find any documentation on it.

ACJ

Comments

7 comments so far.

1/7

Nice write-up. Care to put up an example page?

Posted by: Mathias Bynens on June 13, 2005, at 18:47

2/7

I will put up an example when I finish the series. The thing started out as a single article, but it got rather complex so I have been breaking it up. Eventually, it

Posted by: ACJ on June 13, 2005, at 20:16

3/7

Well… I'm a Chinese but I rarely find people emphasize characters with dots…

Posted by: minghong on June 30, 2005, at 00:01

4/7

OK, this is in response to ACJ's question about Chinese way of emphasizing characters. For chinese computing, we use bold and italic just like English. For modern Chinese (???), some use the quotation marks (e.g. ?

Posted by: minghong on June 30, 2005, at 03:28

5/7

Thanks a bunch,

Posted by: ACJ on June 30, 2005, at 08:32

6/7

I think the sentence (from the "Dutch" paragraph) The latter is

Posted by: Gerrit on July 17, 2005, at 20:58

7/7

nice, really nice!

Posted by: Bapyadvaw on April 17, 2009, at 11:20

Comment

Identify
Remember Me?
Note
Markup allowed. Linebreaks and paragraphs are automatically converted. Email and ip addresses are logged but never shared with third parties. Comments are not moderated on opinion or use of language, but on relevance. I hate spam with a passion.