Repository navigation
[css-inline-3] Initial-letter alignment when 'over-sunk' #5329
Description
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.
Activity
[-][css-inline-3] Initial-letter alignment[/-][+][css-inline-3] Initial-letter alignment when 'over-sunk'[/+]fantasai commentedon Jul 20, 2020
So, there's two ways we could handle this:
align-selfto dictate the alignment when they don't match up, defaultingnormalto 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 commentedon Jul 28, 2020
Note, the first option also seems to handle some of the concerns in #5015, see #5015 (comment)
faceless2 commentedon 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.
What fantasai is proposing is aligning with the top alignment points where size < sink, which looks like this:
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 commentedon Jul 31, 2020
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.
[css-inline-3] initial letter is aligned using its top point when siz…
fantasai commentedon Aug 13, 2020
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 commentedon Aug 13, 2020
@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."
[css-inline-3] Update example. #5329
fantasai commentedon Aug 26, 2020
@zed-vector Done. Thanks! :)
[initial-letter] Fix block position when size is less than sink
[initial-letter] Fix block position when size is less than sink
[initial-letter] Fix block position when size is less than sink
[css-inline-3][editorial] Fix stale text left over from #5329