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.
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'.
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.
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. |
Links: Section 7.2 • Related tests
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. |
Links: Section 7.2 • Related tests
Notes
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.
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.
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.