Skip to content

[css-inline] Sizing problem with initial-letter-wrap: grid #947

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

Closed
frivoal opened this issue Jan 17, 2017 · 7 comments
Closed

[css-inline] Sizing problem with initial-letter-wrap: grid #947

frivoal opened this issue Jan 17, 2017 · 7 comments
Assignees
Labels
Closed Accepted as Obvious Bugfix Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-inline-3 Current Work

Comments

@frivoal
Copy link
Collaborator

frivoal commented Jan 17, 2017

https://drafts.csswg.org/css-inline/#initial-letter-wrapping says:

The rule for matching the character grid is 1ch × n + letter-spacing × (n - 1), where n is the size of the initial letter as specified by the initial-letter property.

This seems wrong on two accounts:

  • This value is meant for CJK uses. The ic unit is the relevant one, not the ch unit. If we want to support aligning to a grid for latin monospaced fonts, we could make this depend on initial-letter-align, and use ic when it is set to ideographic and ch when it is set to alphabetic, but I am not sure it is worth doing, as Initial letters on monospaced latin text seems unusual.

  • n shouldn't be the size of the initial letter as specified by the initial-letter property. That would result in a too small exclusion area when the line gap is large (or when the initial-letter text is long).

Here's an example of initial-letter: 2 with a large line gap in vertical text. Each [ ] represents a 1ic square.

[ ]   ____|____
[ ]   ' _____ '
[ ]         /
[ ]        /
[ ]    ---+---
[ ]       |
[ ]       |
[ ]       ’
[ ]   [ ]   [ ]
[ ]   [ ]   [ ]
[ ]   [ ]   [ ]
[ ]   [ ]   [ ]

Here, the exclusion area needs to be 8ic + 7 × letter-spacing, not 2ic + 1 × letter-spacing.

I suggest replacing that sentence with something like this:

The size of the exclusion area in the inline direction must be 1ic × n + letter-spacing × (n - 1) where n is the smallest integer for which the exclusion area is equal or larger than the advance measure of the initial letter.

@frivoal frivoal added the css-inline-3 Current Work label Jan 17, 2017
@frivoal
Copy link
Collaborator Author

frivoal commented Jan 17, 2017

Actually, even that is wrong. It should be (1ic + letter-spacing) × n, otherwise we won't line up with the next line.

@dauwhe
Copy link
Contributor

dauwhe commented May 22, 2018

Proposed text (and a new figure 11):

The size of the exclusion area in the inline direction must be
(''1ic'' + 'letter-spacing') × m,
where m is the smallest integer for which
the exclusion area is equal or larger than
the advance measure of the initial letter.

cjk-exclusion

@frivoal is the figure accurate? Does the exclusion area need to include the letterspacing shown, otherwise the next character would be off-grid?

@frivoal
Copy link
Collaborator Author

frivoal commented May 23, 2018

Thanks! Yes, the figure and text look good good to me.

However, thinking about letter spacing gave me a follow up question. Should the exclusion area count towards the min content inline size? If the line is shorter than the exclusion area but long enough to fit the initial letter frame, should there be scrollable overflow? I suggest that the answer to both questions should be no. If it is yes, then we probably shrink the exclusion area by 1 letter spacing when it is the last thing on the line (but not when it is not). That seems fiddly and needlessly complicated.

@fantasai
Copy link
Collaborator

OK, we updated the spec (just with slightly different wording than you suggested). Good catch on the formula. I think I agree with you on the min-content size, there shouldn't be anything special caused by the exclusion area change. Probably the margin box of the initial letter should always be considered as part of the content, just as with any inline or float.

@fantasai
Copy link
Collaborator

@frivoal Closing out the issue, mind reviewing to make sure we got it right? :)

@frivoal
Copy link
Collaborator Author

frivoal commented May 24, 2018

2171624 looks good. Are you tracking the intrinsic size question elsewhere, or should I file it?

@dauwhe
Copy link
Contributor

dauwhe commented May 24, 2018

Are you tracking the intrinsic size question elsewhere, or should I file it?

File away!

@fantasai fantasai added Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. and removed Commenter Response Pending labels May 25, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Closed Accepted as Obvious Bugfix Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-inline-3 Current Work
Projects
None yet
Development

No branches or pull requests

3 participants