Ed's Blog on Cascading Style Sheet first-letter, first-word, and first-line Pseudo-elements

Introduction

Western calligraphy has a long tradition of embellishing the first letter, first word, or first line of a paragraph of text to enhance the visual appeal of a written document. Extraordinary examples of this tradition may be found in the Book of Kells, the splendid illuminated Gospel manuscript of the early Middle Ages from Kells, County Meath, Ireland. Although it is not known precisely when or where the Book of Kells was written, written evidence strongly supports that it was present in the monastary at Kells in the year 1007 CE(1). Below I have reproduced an example of each type of embellishment: first letter (Fig. 1), first word (Fig. 2) and entire first line (Fig. 3) from folios in the Book of Kells.

Fig. 1. Example embellishment of initial majuscule “P” in the Book of Kells. From the last folio of the Breves causae (Gospel summary) of John covering XIV, 26 - XXI, 17.

Fig. 2. Example embellishment of the initial word “Tunc” (Thereupon, at that time ...) in the Book of Kells. From the Gospel of Luke XXIV (folio 288v).

Fig. 3. Example embellishment of an entire initial line from the Book of Kells. The line reads, "FUIT IN DIEBUS HERO" (There was in the days of Herod ...) from Luke I, 1-5 (folio 188v).

Of course after the invention of the printing press, the textual embellishment motifs of the medieval calligraphers were borrowed by printers and typographers who created their own numerous variations on these themes, guided by what worked well within the constraints of the various technologies that were available to them over time -- up to our present day.

The World Wide Web Consortium's(2) Cascading Style Sheet standards for first-letter, first-word, and first-line pseudo-elements can be viewed as a part of the digital evolution of these visual motifs that go back centuries.

Initial Drop Letters in an Indic-derived Script: Using Thai as an Example

While Western-style typography has a tradition that goes back centuries, in countries such as Thailand, the arts of printing and typography have only flourished during the course of the most recent century(3). Typography in Thailand has clearly been influenced by the Western typographical traditions. For example, it is now quite common to see decorative fonts with western-style serifs in use in magazines and advertising media. Although serifs are undoubtedly a completely foreign borrowing, the effect is often quite pleasing.

In higher-quality typography in Thailand one now also finds enlarged initial drop letters just as one does in high-quality Western typography (We cannot call them "drop caps" because there is no case distinction in Thai). Note however that the Thai script shares with other Indic and Indic-derived scripts the character of having vowels which surround consonants or consonant clusters. The vowels may precede, follow after, hover above, or hover below consonants:

In addition to vowels, Thai and related scripts like Lao have tone marks that also hover above letters or vowels:

The set of vowels which precede or follow after consonants or consonant clusters present no problem when creating the embellishment of an initial letter in Thai. If the word starts with one of the vowels that precedes a consonant, one just enlarges that vowel, as shown in Fig. 4. While true for Thai, this simplicity may not be true for Indic- or other Indic-derived scripts.

Fig. 4. In this example from a printed book (4), the vowel “เ” THAI CHARACTER SARA E precedes the consonant “ป” THAI CHARACTER PO PLA in the word “เป็น” and is enlarged to create a “drop cap” just as one would do with an initial consonant.

In any case, vowels and tone marks that hover above and vowels that hover below need to be treated in a fashion analagous to the Unicode combinining diacritical marks and must be combined with the logically-preceding base character when rendering the glyphs, as shown in Fig. 5:

Fig. 5. Here's an example from the same book about butterflies (ผีเสื้อ) where the vowel “◌ี” THAI CHARACTER SARA II hovers over the consonant “ผ” THAI CHARACTER PHO PHUNG to form an embellished initial letter.

Proper rendering of the CSS first-letter pseudo-element on a web browser or other device (such as a printer) needs to take the positioning of vowels and tone marks in Thai and other Indic-derived scripts into account in exactly the same manner as combining diacritical marks need to be taken into account when rendering the first-letter pseudo-element in Latin, Greek, or Cyrillic CSS-styled HTML texts in NFD normalization.

Many other scripts in the world beside the Indic and Indic-derived scripts have characters, vowels, or other special marks which combine with a base character in one way or another. These characters need to be considered when implementing CSS first-letter styling support in modern, Unicode-capable browsers.

Implementing CSS first-word support for Thai and related scripts

Thai and related scripts like Lao do not use spaces between words. Implementing CSS first-word support for such scripts therefore requires that a browser knows where to break words in these languages. Of course this problem is not limited to CSS styling: the browser needs to know where to break words at line ends as well.

Recommendations on Implementing CSS first-letter and first-word Styling Support in modern, Unicode-capable browsers

While CSS styling of the first-line pseudo-element should not present a problem, styling the first-letter and first-word pseudo-elements is non-trivial for a subset of modern language scripts. Developers interested in implementing these features in browsers or other software should review the section on Combining Characters in The Unicode Standard (section 2.6 in version 3.0: a more recent version is now available) (5).

The following chart is my attempt to organize by script/Unicode block the set of combining characters that will affect the rendering of the CSS first-letter element by a browser or other client. The majority of these combining characters hover over or below the logically previous base character. The set includes diacritical marks, tone marks, vowel marks, and other symbols.

The chart also contains my suggestions for how first-letter and first-word styling should work, or not work as the case may be, for a given script described below. Note that my perspective is that one should implement the important cases first --i.e., those cases that are likely to appear frequently in texts-- and forget about the numerous "edge cases" --such as the double diacritics, or the combining half-marks-- which one could waste a lot of time on.

References

1. Henry, Françoise. The Book of Kells. Alfred A. Knopf, New York 1977. See p. 150.

2. The World Wide Web Consortium, http://www.w3c.org.

3. Nawikkamune, Anek. A century of Thai Graphic Design. English edition translated and edited by David Smythe. River Books, Bangkok 2000.

4. สุวรรณภักดิ์, เกรียงไกร. ผีเสื้อ. สำนักพิมพ์สารคดี Sarakadee Press, Bangkok 1997.

5. The Unicode Consortium. The Unicode Standard Version 3.0. Addison-Wesley, 2000. http://www.unicode.org.