Summarized test results:
Selectors 3, first-letter

Intended audience: users, XHTML/HTML coders (using editors or scripting), script developers (PHP, JSP, etc.), CSS coders, Web project managers, and anyone who wants to know whether the CSS pseudo-class ::first-letter works as specified.

Updated

These tests check whether user agents highlight expected characters when the ::first-letter selector is used in CSS.

The tests check whether ::first-letter selects just the first character on the line, or the first grapheme cluster (ie. a sequence of characters that form a logical unit, such as a base character and it's combining characters).

To see the test, click on the link in the left-most column. To see detailed results for a single test, click on the link in the Details column and look just above the table. The detailed results show the date(s) the test result was recorded, and the version of the browser tested.

Any dependencies are shown in notes above the table, and notes below the table will usually provide any additional useful information, including an explanation of why a result was marked as 'partially successful'.

Results

Note that these test results are for released versions of the browsers tested. Versions that are still in development may provide better support for these features. The tests do not use any vendor prefixes. Tests that do show support for vendor prefixes are listed in the next section.

Latin text


Test link Assertion Detail
latin, single letter
css3-selectors-first-letter-001.html
:first-letter will select a single letter at the start of a line.
latin, letter + diacritic
css3-selectors-first-letter-002.html
:first-letter will select a letter + a following combining character at the start of a line.
latin, letter + 2 diacritics
css3-selectors-first-letter-003.html
:first-letter will select a letter + two following combining characters at the start of a line.
latin, ij in dutch
css3-selectors-first-letter-004.html
[Exploratory] :first-letter will select an IJ as a single item at the start of a line in a Dutch context.

Devanagari text


Test link Assertion Detail
hindi, letter only
css3-selectors-first-letter-010.html
:first-letter will select a devanagari letter at the start of a line.
hindi, base character with 1 combining character
css3-selectors-first-letter-011.html
:first-letter will select a devanagari letter and a following combining character at the start of a line.
hindi, consonant + 2 combining characters
css3-selectors-first-letter-012.html
:first-letter will select a devanagari letter and two following combining characters at the start of a line.
hindi, simple conjunct
css3-selectors-first-letter-014.html
[Exploratory] :first-letter will select a devanagari two-consonant conjunct at the start of a line.
hindi, conjunct plus combining character
css3-selectors-first-letter-015.html
[Exploratory] :first-letter will select a devanagari two-consonant conjunct and a combining character at the start of a line.

Notes

  1. None of the browsers support selection of conjoined consonants. These are basic units in indic scripts, and all component characters need to be highlighted together, but this goes beyond the definition of a grapheme cluster in the Unicode Standard.

    These results mean that ::first-letter is of little use for languages such as Hindi and Marathi at the moment, even on Firefox. Text in those languages does use things such as drop caps at the start of a paragraph, but that would therefore have to be coded into the HTML manually using spans.

  2. Firefox can sometimes appear to support more complex sequences. This doesn't happen in these tests, which download a WOFF font to show the devanagari characters. But if, on a Mac, the Devanagari MT system font is applied to the test (see this version of the test), the following correct selections are produced.

    Picture of screen.

    This appears to be very font specific: it works with the Devanagari MT font, but not with other fonts on the system used. It also only works when a left-sighted vowel-sign is used. The other conjuncts on the page failed.

    It also appears to be Firefox specific.