New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
dauwhe opened this Issue Jan 6, 2017 · 4 comments

Comments

Projects
None yet
3 participants
@dauwhe
Contributor

dauwhe commented Jan 6, 2017

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

@fantasai

This comment has been minimized.

Show comment
Hide comment
Contributor

fantasai commented May 25, 2018

@fantasai

This comment has been minimized.

Show comment
Hide comment
@fantasai

fantasai May 25, 2018

Contributor

Committed first pass of edits.

Contributor

fantasai commented May 25, 2018

Committed first pass of edits.

@dauwhe

This comment has been minimized.

Show comment
Hide comment
@dauwhe

dauwhe May 25, 2018

Contributor

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

initial letter with explicit width and text align

Contributor

dauwhe commented 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 :)

initial letter with explicit width and text align

@dauwhe dauwhe self-assigned this May 25, 2018

@css-meeting-bot

This comment has been minimized.

Show comment
Hide comment
@css-meeting-bot

css-meeting-bot Jul 5, 2018

Member

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/w3c/csswg-drafts/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
Member

css-meeting-bot commented 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-letter
The full IRC log of that discussion <fantasai> Topic: applying width/height to initial-letter
<fantasai> github: https://github.com/w3c/csswg-drafts/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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment