Add support for initial-letter CSS property

[hay]

There's a W3C proposal for a new initial-letter property to introduce proper dropcap support in CSS.

Apparently this will be a feature of the upcoming iOS 9 Safari.

For those who think: but haven't we already got the :first-letter pseudoselector? You're right: but styling a dropcap also needs to take in account all the text surrounding the character, and that's notoriously tricky with regular CSS properties. This property will, for once and for all, allow 'proper' styling of dropcaps in CSS.

[Ugoku]

+1

[lembitk]

+1

[cbourgois]

+1

[Quinter]

+1

[tobireif]

It now is in Safari.

[connorshea]

+1

[jensimmons]

+1

[jawinn]

+1

[jensimmons]

I posted a demo of this property at http://labs.jensimmons.com/examples/initial-letter.html, along with a note about a current bug.

[hay]

@jensimmons i'm getting a 404 on that page :/

[jensimmons]

Sorry about that — I'm half-way through setting up a new site of layout examples, and moved things around after posting here. Durp!

The initial-letter demo is here now: http://labs.jensimmons.com/examples/initial-letter.html. (And I fixed the link above, so it works now, too.)

[dauwhe]

+1

[enterprisey]

+1

[jensimmons]

The Safari bug is fixed in the new Safari Technology Preview.

[achoukah]

I'm a sucker for things like this – sounds like a lovely idea. I'm sure there is a request somewhere here for :nth-letter(n) and :range-letters(2.10) too!

And while we're at it, :first-line, :nth-line(n), :last-line :)

[ryanwalters]

+1

[cadars]

+1

[julientaq]

+1

[cvrebert]

• https://webkit.org/status/#feature-initial-letter

[Schweinepriester]

+1

[maddesigns]

+1

[siiron]

+1

[jensimmons]

Some news about Initial Letter:
It is being added to Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1040714
The fix for the Safari 9 bug shipped in Safari 10.

[lujanfernaud]

+1

[Fyrd]

Now available at http://caniuse.com/#feat=css-initial-letter

[hay]

Thanks @Fyrd!