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] Initial Letter selection and hanging punctuation #310

Open
tabatkins opened this issue Jul 11, 2016 · 7 comments
Open

[css-inline] Initial Letter selection and hanging punctuation #310

tabatkins opened this issue Jul 11, 2016 · 7 comments
Labels
css-inline-3 Current Work i18n-tracker Group bringing to attention of Internationalization, or tracked by i18n but not needing response. Needs Feedback/Review

Comments

@tabatkins
Copy link
Member

On Thu, May 26, 2016 at 5:44 AM, Doonge .Hagen [email protected] wrote:

concerning https://drafts.csswg.org/css-inline/#initial-letter-styling

Could you include an example with starting punctuation in the draft, and
show how you would address it?
Thanks.

For instance (using non-english punctuation,
https://en.wikipedia.org/wiki/Guillemet , with spaces ):

« M. French here has a problem » said the inner voice. English wasn't the writer's native language, so he struggled a bit. « Perhaps, answered the writer, but will they care? »

Some consideration around this can be found at
http://theworldsgreatestbook.com/book-design-part-6/ , in the "Book Design:
Initial Caps with Quotation Marks" part at the very end of the document (I'm
not the author).

Typically, I see that opening punctuation has no special style applied to it
(it has the same style than the whole paragraph, not the style of the
initial-letter).
Hence, I have the impression there has to be a finer control over what's in
the pseudo element. An ability to exclude the special characters from the
pseudo-selection.

Something like: "exclude-punctuation: none | left | right | both;"

@tabatkins tabatkins added the css-inline-3 Current Work label Jul 11, 2016
@tantek
Copy link
Member

tantek commented Jul 14, 2016

IE5/Mac would include starting punctuation as part of the :first-letter per CSS1/2.1 specs, so that e.g. if you floated it, or sized it the leading quote and next character would both be affected. Do we have any existing test cases for this?

@plinss
Copy link
Member

plinss commented Jul 14, 2016

We have hundreds of first letter tests with punctuation:
http://test.csswg.org/shepherd/search/testcase/spec/css21/section/5.12.2/name/first-letter-punct/

@dauwhe
Copy link
Contributor

dauwhe commented Jan 5, 2017

Figure 7 in the spec does show initial punctuation. I can certainly see the value in having more control over this, but I would prefer to defer that to the next level of the spec.

@fantasai
Copy link
Collaborator

We need to keep in mind that initial punctuation isn't always quotes, sometimes it's brackets. And typographic practice probably varies a lot between English and CJK, so automatic rules that make sense for English might not in Japanese typesetting. The description in http://theworldsgreatestbook.com/book-design-part-6/ shows a lot of subtleties that would be nice to have control over but certainly shouldn't be done automatically for all classes of punctuation worldwide.

Probably the two things that we need here are to a) clarify handling of hanging-punctuation in the presence of initial-letter and b) look into adding a pseudo-element like ::first-punctuation or something, to allow the author to select and style punctuation that is part of ::first-letter.

fantasai added a commit that referenced this issue May 24, 2018
@fantasai
Copy link
Collaborator

fantasai commented May 24, 2018

Checked in spec text to exclude hanging punctuation from being measured as part of the initial letter's box. This better clarifies that when there is hanging punctuation, it is not considered when positioning the initial letter. It has the effect, however, that the punctuation may be drawn outside the initial letter box (since it is not measured when fitting the box to the initial letter contents).

The alternative would be to add a magical negative margin equal to the advance of the hanging punctuation. This would preserve the behavior of aligning the initial letter as if it didn't have the punctuation, but ensure that it is included in the initial letter box (which matters if you happen to make it visible).

I've marked this as an open issue in the spec. Thoughts?

A related, but independent question is: should we allow initial-letter to apply to an inline element that is not the first-most descendant of the block container, but is preceded only by hanging punctuation?

Note, the issue of a pseudo-element for controlling ::first-letter punctuation is filed as #2040

@fantasai
Copy link
Collaborator

fantasai commented Jun 12, 2018

Rewording and expanding on the previous comment in outline form:

  1. We made some clarifications to how hanging-punctuation and initial-letter interact, see
    502194f

  2. We ignore the hanging punctuation when positioning the initial letter. Fine. What happens if we put a background on it? Is the punctuation included?

    • Non-initial-letter hanging punctuation is included in its parent inline box’s bounds (it's just not measured for fit for line-breaking, alignment, etc). So it would be consistent to include it (plus this helps ensure sufficient color contrast).
    • Text layout uses the logical bounds of the character (advance width, ascent/descent, etc.) not the glyph bounds, so the same method (measure the contents as normal) isn't directly applicable. If we include the punctuation, do we use its glyph bounds or its logical bounds?
  3. Related, but independent question: should we allow initial-letter to apply to an inline element that is not the first-most descendant of the block container, but is preceded only by hanging punctuation?

  4. Note, the issue of a pseudo-element for controlling the formatting of first-letter–associated punctuation is filed as [css-pseudo] Problems with styling ::first-letter with punctuation #2040. It is an independent problem.

@r12a r12a added the i18n-tracker Group bringing to attention of Internationalization, or tracked by i18n but not needing response. label Jul 27, 2018
@bradkemper
Copy link
Contributor

I think the background and border should extend around the hanging punctuation by default, so that it doesn’t end up unreadable (if it straddled the border otherwise, for instance). Just my opinion, currently.

Not sure I fully understand the second bullet of that question.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-inline-3 Current Work i18n-tracker Group bringing to attention of Internationalization, or tracked by i18n but not needing response. Needs Feedback/Review
Projects
None yet
Development

No branches or pull requests

7 participants