[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.

#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.