Skip to content
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-3] Initial-letter alignment when 'over-sunk' #5329

Closed
zed-vector opened this issue Jul 16, 2020 · 7 comments
Closed

[css-inline-3] Initial-letter alignment when 'over-sunk' #5329

zed-vector opened this issue Jul 16, 2020 · 7 comments
Labels
Closed Accepted by CSSWG Resolution Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-inline-3 Current Work

Comments

@zed-vector
Copy link

zed-vector commented Jul 16, 2020

https://www.w3.org/TR/css-inline-3/#initial-letter-styling

Example 7 shows a case where the size of the initial letter is less than the sink and states that the alignment would be on the alphabetic baseline only. The effect is ugly and 'wrong'.

In this case, the alignment should be at the top, leaving any gap below. The use case is in trying to emulate letterpress printing in which only a limited set of discrete type font sizes was available to the printer. It makes no odds in setting up the type in the chase (I have actually done this, long ago) whether the initial letter type character is packed above or below, so it would have been packed upwards for the sake of appearance.

As a secondary suggestion, if initial-letter could have another value, to specify the initial letter font size (as, for example, a multiple of the surrounding text size, or with a keyword to indicate that the <number> value should be so interpreted) the effect would be easier to achieve and would base an 'over-sunk' character on top alignment only, so making the complex height calculation unnecessary in this case.

It may well be that the effect I suggest could be achieved in CSS by other means, but initial-letter should include it as that is the
obvious place to look.

@zed-vector zed-vector changed the title [css-inline-3] Initial-letter alignment Jul 16, 2020
@fantasai fantasai added the css-inline-3 Current Work label Jul 19, 2020
@fantasai
Copy link
Collaborator

fantasai commented Jul 20, 2020

So, there's two ways we could handle this:

  • When size > sink, align to the bottom metric; but when size < sink, align to the top metric.
  • Use the range between the top and bottom metrics of the paragraph as the alignment container, and the top and bottom metrics of the initial letter as the alignment subject, and honor align-self to dictate the alignment when they don't match up, defaulting normal to the appropriate baseline alignment.

The second option is strictly more powerful. We could also try to do both simultaneously, but that might get a bit confusing...

@fantasai
Copy link
Collaborator

Note, the first option also seems to handle some of the concerns in #5015, see #5015 (comment)

@faceless2
Copy link

faceless2 commented Jul 28, 2020

To illustrate the difference between the two, as currently defined now when size < sink, the content is aligned with the bottom alignment point.

image

What fantasai is proposing is aligning with the top alignment points where size < sink, which looks like this:

image

I think it's a good solution myself, it solves my issues with Indic scripts and I believe it resolves @zed-vector's concerns too.

@css-meeting-bot
Copy link
Member

The CSS Working Group just discussed initial-letter alignment with overflow:sunk, and agreed to the following:

  • RESOLVED: When 'over-sunk', an initial-letter is aligned with the top metrics instead.
The full IRC log of that discussion <TabAtkins> Topic: initial-letter alignment with overflow:sunk
<Rossen_> github:https://github.com//issues/5329
<fantasai> s/overflow:sunk/over-sunk letter/
<smfr> s/with overflow:sunk/when over-sunk/
<TabAtkins> faceless2: When you have an initial-letter smaller than the space given, how do you align it within that gap?
<TabAtkins> faceless2: Existing spec aligns it to the bottom, elika proposes we change it to the top
<TabAtkins> fantasai: It fixes a use-case I had for indic scripts, and the OP's case which is Latin
<TabAtkins> fantasai: The proposal is to do this when the size is less than the sink value.
<TabAtkins> fantasai: If size is > sink, we want to align to the bottom metric, because we want the top of the letter to be above th eparagraph
<TabAtkins> fantasai: But when size < sink, we align to the top metric so we're pulling up
<TabAtkins> florian: And the initial dfn just only considered one case and we forgot the secon dhalf?
<TabAtkins> fantasai: pretty mcuh
<TabAtkins> Rossen_: Any other opinions?
<TabAtkins> RESOLVED: When 'over-sunk', an initial-letter is aligned with the top metrics instead.
@fantasai
Copy link
Collaborator

Ok, edits checked in. See new https://drafts.csswg.org/css-inline-3/#initial-letter-block-position (once the draft server updates). @faceless2 Would you mind reviewing? @zed-vector Are the changes acceptable to you?

@zed-vector
Copy link
Author

@fantasai , thank you for that. It looks OK to me, however in Example 7 in https://drafts.csswg.org/css-inline-3/#sizing-drop-initials the text and .png presumably need to be fixed too. It currently reads:
"initial-letter: 2.51 3
The size of the initial letter does not have to be an integral number of lines. In this case only the bottom aligns."

fantasai added a commit that referenced this issue Aug 26, 2020
@fantasai
Copy link
Collaborator

@zed-vector Done. Thanks! :)

@fantasai fantasai added Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. and removed Commenter Response Pending labels Aug 26, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Closed Accepted by CSSWG Resolution Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. css-inline-3 Current Work
5 participants