You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
[css-inline] add explicit width and height to initial-letter #863
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
Activity
fantasai commentedon May 25, 2018
Minutes at https://lists.w3.org/Archives/Public/www-style/2015Sep/0096.html
[css-inline-3] Apply width/height properties to initial letters per T…
fantasai commentedon May 25, 2018
Committed first pass of edits.
dauwhe commentedon May 25, 2018
@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 commentedon Jul 5, 2018
The Working Group just discussed
applying width/height to initial-letter, and agreed to the following:RESOLVED: accept sizing properties for initial-letterThe 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