[css-inline] add explicit width and height to initial-letter

[dauwhe]

...as requested by Tantek... need to integrate with model.

[fantasai]

Minutes at https://lists.w3.org/Archives/Public/www-style/2015Sep/0096.html

[fantasai]

Committed first pass of edits.

[dauwhe]

@tantek I worked with your example, setting an explicit width on the ::first-letter, and then right-aligning. It works in WebKit :)

[css-meeting-bot]

The Working Group just discussed applying width/height to initial-letter, and agreed to the following:

• RESOLVED: accept sizing properties for initial-letter

The full IRC log of that discussion

<fantasai> Topic: applying width/height to initial-letter
<fantasai> github: https://github.com//issues/863
<fantasai> https://github.com/w3c/csswg-drafts/commit/4893b213ff17a4c8deab181c6997b47b93972911
<frremy> fantasai: request from tantek
<frremy> fantasai: seemed reasonable
<frremy> fantasai: we would like the group to review the proposal
<fantasai> https://drafts.csswg.org/css-inline-3/#initial-letter-model 2nd bullet
<frremy> dbaron: in case of alignment, what gets aligned into what?
<frremy> TabAtkins: the letter aligned inside the box
<frremy> dbaron: the aligment properties are not specified to apply?
<frremy> fantasai: well, we use them in the algo, we just forgot to mention it
<frremy> fantasai: we can fix this
<frremy> dbaron: why is that useful?
<frremy> TabAtkins: it's super useful for width
<frremy> dbaron: seems true, but for height this is more concerning
<frremy> dbaron: because now you have to align with the lines and take the height into consideration
<dauwhe__> using width and text-align with initial-letter https://usercontent.irccloud-cdn.com/file/G7EqH0Jd/tantek.png
<frremy> fantasai: you create a box around the glyph
<frremy> fantasai: from there, they are locked, and there are two ways to align this box
<frremy> fantasai: the exclusion however always use the glyph bounding box
<frremy> dbaron: globally, this seems reasonable
<frremy> dbaron: it's more complex than the last time I looked, but this still looks fine
<frremy> fantasai: there was already an similar feature before
<frremy> fantasai: (explains why you needed to do this in the past)
<frremy> koji: two days ago, we said the exclusion space is created only for the second line
<frremy> koji: so if you say margin-top: 30px, how does that work?
<frremy> fantasai: it pushes the entire block, including the initial letter
<frremy> fantasai: the first line is positioned with the glyph
<frremy> fantasai: details for how that would work is another issue, which we will address later, let's not discuss this
<frremy> fantasai: but since the initial letter and the first line are locked, the initial letter will never sunk further than the first line
<frremy> Rossen: so unlike other inline, the initial letter's margin has an effect on layout
<frremy> koji: does that margin collapse?
<frremy> fantasai: waaaiiiiiiiiiiiiiiiiiiiiiiiit :)
<frremy> fantasai: let's not discuss this today
<frremy> fantasai: let's push this to tpac
<frremy> Rossen: ok, so were are we towards getting a resolution
<frremy> fantasai: review and accept the edit allowing width/height/alignment
<frremy> dauwhe: and we do have good use cases for this stuff
<frremy> Rossen: any objection?
<frremy> (no objection)
<frremy> RESOLVED: accept sizing properties for initial-letter