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] support adjacent initial-letter as well #965

Open
hunboy opened this issue Jan 21, 2017 · 17 comments

Comments

@hunboy
Copy link

commented Jan 21, 2017

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

This comment has been minimized.

Copy link
Member

commented Jan 23, 2017

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

This comment has been minimized.

Copy link
Author

commented Jan 24, 2017

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 hunboy changed the title [css-text-3] ::first-letter is typographically misplaced [css-inline-3] ::first-letter is typographically misplaced Jan 24, 2017

@hunboy

This comment has been minimized.

Copy link
Author

commented Jan 24, 2017

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

d2092384-d338-47c7-8e73-5553f34ec785

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

adjacent_2

@hunboy hunboy changed the title [css-inline-3] ::first-letter is typographically misplaced [css-inline-3] support adjacent initial-letter as well Jan 24, 2017

@hunboy

This comment has been minimized.

Copy link
Author

commented Jan 24, 2017

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

This comment has been minimized.

Copy link
Author

commented Jan 24, 2017

gutenberg

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

@hunboy

This comment has been minimized.

Copy link
Author

commented Jan 25, 2017

image12_w650

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

@hunboy

This comment has been minimized.

Copy link
Author

commented Jan 25, 2017

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

International sample (typography knowledge base) "Hanging" Cap

hanginginitial

@dauwhe dauwhe added the css-inline-3 label Jan 26, 2017

@dauwhe dauwhe self-assigned this Jan 26, 2017

@hunboy

This comment has been minimized.

Copy link
Author

commented Jan 26, 2017

hanging

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

@fantasai

This comment has been minimized.

Copy link
Collaborator

commented May 24, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Jul 27, 2018

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

This comment has been minimized.

Copy link
Author

commented Jul 27, 2018

@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

This comment has been minimized.

Copy link
Author

commented Jul 27, 2018

@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

This comment has been minimized.

Copy link
Contributor

commented Jul 27, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Oct 16, 2018

@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

This comment has been minimized.

Copy link
Collaborator

commented Oct 16, 2018

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.

@fantasai fantasai added this to Needs Edits in Initial Letters Oct 16, 2018

@dauwhe

This comment has been minimized.

Copy link
Contributor

commented Oct 17, 2018

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

p {
  margin-left: 72pt;
}

adjacent-initial-letter

@fantasai

This comment has been minimized.

Copy link
Collaborator

commented Oct 21, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.