Csswg-drafts: [css-inline-3] support adjacent initial-letter as well

[hunboy]

Currently the ::first-letter is typographically misplaced. To solve this issue some spec declaration would be useful.

I collected the issue at the mozbugzilla with samples, explanations, workarounds, troubleshoots, etc during the years.

Please, visit for discussion:
https://bugzilla.mozilla.org/show_bug.cgi?id=415506

The adjacent initiale is missing from the new spec.

Referred spec is: https://drafts.csswg.org/css-inline-3/#initial-letter-styling

[tabatkins]

Floated ::first-letter layout allows browsers to do "smart" drop-cap layouts, but doesn't define how it works.

Are you trying to suggest new properties equivalent to the 'initial-letter' properties?

[hunboy]

Seems, yeah. I missed this new spec, now analysing.
Only a few comment is:

• initlial-letter: 3 inifinite (or something)
  should be the adjacent initial .

• the initial-letter: 2.51 3; sample is typographically invalid, however someone will like that.
  Reason: The dropped initiale cap-height must reach the first line's cap-height, or
  can be above of that, but never below.

summary: this is good for raised and dropped and allows sunken but doesn't allow adjacent currently.

I like the new spec. So I don't want to rename them, I just copied here the ideacollection we made years ago.

[hunboy]

Well yes, this issue is almost complete except adjacent initial-letter, so I modify the title for that.

Workaround is here for adjacent sample: https://jsfiddle.net/utasir/vgfz13L1/

This feature is also available at ms-word under name in-margin-initial-letter

https://support.office.com/en-us/article/Create-a-large-dropped-initial-capital-letter-5294dc91-e05d-4b30-b93f-9da393dfa7d1

The typographically correct graphical sample is here:
https://bug415506.bmoattachments.org/attachment.cgi?id=8404689

[hunboy]

Note, there are some issues with the adjacent initiale:

• adjacent initiale for paged media is applied for all paragraphs exclusively on the first page, where it is defined.
• adjacent initiale stops at the forwarding pages.

These issues are for the paged media.

How is it happen?

I say, we have 1 section with a few paragraphs. In this case, when we apply

• section::first-letter { initial-letter: 5.5 adjacent; } that affects the all of paragraphs with in-margin effect
• p::first-letter { initial-letter: 5.5 adjacent; } that only affects the paragraph itself.

On the screen the first sample is clear, but on the page only the current page is affected with the in-margin

[hunboy]

The first Gutenberg Bible with an adjacent cap (marked as red)

[hunboy]

The three common initiale in the hungarian typography (source: University of ELTE Tipography lessions)
süllyesztett (dropped), lógatott (adjacent) és kiemelt (raised)

[hunboy]

http://theworldsgreatestbook.com/book-design-part-6/

International sample (typography knowledge base) "Hanging" Cap

[hunboy]

A scan from a book: Péter Virágvölgyi - The profession of typography
This refers as "hanging initial"

[fantasai]

We have an outstanding WG resolution to make width/height apply to initial letter. Once you have that, this is easy: set the first-letter to a width, then give it a negative margin-start of that same width. This will place it in the margin.

https://github.com/w3c/csswg-drafts/issues/863

[fantasai]

OK, we've applied width/height to the initial letter in #863, so hanging the initial letter in the margin should be possible now.

@hunboy We can certainly do the initial letter in the margin, as illustrated in your manuscript. But it's not entirely clear what's happening in the magazine clip. Can you clarify what’s expected to happen if

• If there is a another paragraph after the one with the hanging initial letter? Is that paragraph also indented, or does it start underneath the hanging initial letter?

• If the first paragraph is short enough that the second paragraph begins halfway between the top and bottom of the hanging initial letter?

We need to know if hanging in the margin is sufficient, or if we need a different form of clearance for initial-letter-wrap, and if so how exactly that operates.

[hunboy]

@fantasai the adjacent initial letter introduces at the paged media 500 years ago so we need fix, if what this means when we are on a non paged media, probably margin reaches the end of the document, not only the current paragraph. On paged media it's clear: margin stays ONLY on the current page. (the whole page, not only the current paragraph). So shortly, the margin is wider, and the place for cap is the margin.

Here is a sample what I'm talking about:

http://jsfiddle.net/utasir/34nkw9ab/

This explains lots of your questions.

[hunboy]

@fantasai here is a two column sample:

http://jsfiddle.net/utasir/34nkw9ab/1/

only the first column is affected by the margin, the second one not.

[AmeliaBR]

If the goal is to have a margin that auto-computes based on the initial size, and only applies to the current layout fragment (page and/or column), then maybe this would be best described as a new value of the -wrap property?

[fantasai]

@AmeliaBR Yes, it would have to be a new value for that property, one that extends to the next initial letter, the end of the block formatting context, or the bottom of the fragmentainer, whichever comes first.

Flagging this for the next level, I think there's more than enough complexity for a first level in the current spec. :/

[fantasai]

We'll add an example of how to do the basic case of putting the initial letter in a gutter to the L3 spec, though; that should handle the most common situations, and can be done just with width + negative margin.

[dauwhe]

p::first-letter {
  initial-letters: 3;
  color: red;
  width: 72pt;
  text-align: right;
  margin-left: -72pt;
}

p {
  margin-left: 72pt;
}

[fantasai]

I might suggest using 'em's there, otherwise looks good. :)