fix(css): `hanging-punctuation` sample

[strogonoff]

Description

In Safari the example doesn’t render correctly if either or both of these are true:

1. there is whitespace between the opening <p> tag and the opening quotation mark,
2. “dumb” quotation marks are used (" rather than “/”).

This fixes both.

Motivation

Allow documentation reader see hanging-punctuation in action.

Additional details

To clarify, while the example for hanging-punctuation before this PR may have been technically correct, minor formatting details prevented all users (including those on Safari Technical Preview) from seeing the property in action.

1. The spec seems to assert that the ‘dumb’ quote " should hang, too, and makes no mention of leading/trailing whitespace.
2. However, Safari requires it to be a proper quote (“) and leading whitespace would prevent hanging.

Thus it’s an open question whether this should be fixed or Safari should be fixed.

Related issues and pull requests

[github-actions[bot]]

Preview URLs

• /en-US/docs/Web/CSS/hanging-punctuation

(this comment was updated 2022-11-15 05:14:29.791854)

[strogonoff]

Renders correctly after this change. I suspect a comment is warranted to avoid someone fixing style/indentation and breaking it later.

[strogonoff]

@wbamberg, thanks for checking it out!

Do you have any reference about the Safari behavior or is this just your observation?

Just my observation. I encountered a use of hanging-punctuation in the wild for the first time recently and came to MDN to read about it. Confusingly, the quotation mark in the example didn’t actually hang, so I made this edit.

Yes, I think you are right.

This is my first contribution to MDN, and I’m trying to understand how is it possible to add a comment that isn’t displayed to readers but is visible to editors. I’d write in that comment that the lack of indentation and use of typographic quotes is on purpose and that this could probably be reverted when Safari supports the spec more fully.

Since it looks like the Safari behavior is nonstandard we should add a note about it in the BCD: https://github.com/mdn/browser-compat-data/blob/main/css/properties/hanging-punctuation.json. Let me know if you want to take care of that or I will.

I could do it but to be honest this is new to me. I see there’s a notes property (https://github.com/mdn/browser-compat-data/blob/main/css/properties/hanging-punctuation.json#L27) and I suppose that’s what you mean, but I’m not sure whether it can be a list or what are the style rules for formatting multiple notes.

[wbamberg]

@wbamberg, thanks for checking it out!

Do you have any reference about the Safari behavior or is this just your observation?

Just my observation. I encountered a use of hanging-punctuation in the wild for the first time recently and came to MDN to read about it. Confusingly, the quotation mark in the example didn’t actually hang, so I made this edit.

Yes, I think you are right.

This is my first contribution to MDN, and I’m trying to understand how is it possible to add a comment that isn’t displayed to readers but is visible to editors. I’d write in that comment that the lack of indentation and use of typographic quotes is on purpose and that this could probably be reverted when Safari supports the spec more fully.

I think it's fine to have this visible to readers as well as editors.

Since it looks like the Safari behavior is nonstandard we should add a note about it in the BCD: https://github.com/mdn/browser-compat-data/blob/main/css/properties/hanging-punctuation.json. Let me know if you want to take care of that or I will.

I could do it but to be honest this is new to me. I see there’s a notes property (https://github.com/mdn/browser-compat-data/blob/main/css/properties/hanging-punctuation.json#L27) and I suppose that’s what you mean, but I’m not sure whether it can be a list or what are the style rules for formatting multiple notes.

Yeah, it can be an array, like:

notes: [
  "first note",
  "second note"
  ],

(https://github.com/mdn/browser-compat-data/blob/main/schemas/compat-data-schema.md#notes)

But I'm totally happy to take care of this if you like.

[estelle]

Playing with https://codepen.io/estelle/pen/VwdjqJy. I don’t see the spacing issue you mention. As far as I can tell, the spec doesn’t require but a few specific characters to be supported. I don't see " on the list.

We should use an example that works, and yours does. I used borders. @wbamberg used a background color. Both work to help explain what is going on.

The text needs to mention that only a few characters are required to be supported, and UAs can add to that list. I don’t think we need to include a Safari exception note

[wbamberg]

Playing with https://codepen.io/estelle/pen/VwdjqJy. I don’t see the spacing issue you mention. As far as I can tell, the spec doesn’t require but a few specific characters to be supported. I don't see " on the list.

We should use an example that works, and yours does. I used borders. @wbamberg used a background color. Both work to help explain what is going on.

The text needs to mention that only a few characters are required to be supported, and UAs can add to that list. I don’t think we need to include a Safari exception note

Yes, I can't see the spacing issue either. And I agree that this page needs to list the characters that should be supported. I guess it is these:

This applies to all characters in the Unicode categories Pe, Pf, Pi plus the ASCII quote marks U+0027 ' APOSTROPHE and U+0022 " QUOTATION MARK.

(https://w3c.github.io/csswg-drafts/css-text/#hanging-punctuation-property)

This does include "smart quotes" U+201C and U+201D and also "dumb quotes" U+0022. So Safari's support is obviously incomplete, and we should at least note that in the BCD.

I don’t think we need to include a Safari exception note

Yes, fair enough. A BCD note should be enough.

[wbamberg]

From everything I have tried so far, it's only the ASCII quotes that Safari doesn't support. We might want to consider using something other than quotes for the example, which might be less likely to get accidentally broken: https://codepen.io/willbamberg/pen/poKbGBe .

[estelle]

This does include "smart quotes" U+201C and U+201D and also "dumb quotes" U+0022. So Safari's support is obviously incomplete, and we should at least note that in the BCD.

Ah, I read the list, not the characters in the values description list. This page should include a list of all the characters required to be supported in one place: I am likely not the only one that will scan a table and not read the rest of the doc looking for additions.

[wbamberg]

OK so I think the work here is:

• update this page with the set of characters that may hang for first, end, force-end and allow-end. I don't think we have to list all the individual character in the Unicode categories, we could just link to, say, https://unicodeplus.com/category/Pe.
• update the example so it works in Safari. I think that does not require a change in the whitespace but does require a change in the character. Optionally change from quotes to something else (like brackets) that might be less likely to be inadvertantly reverted.
• update the example so it has a background or a border, and includes hanging and non-hanging paragraphs, to better show the effect.
• update BCD to add a note to say that Safari does not support U+0022 as a hanging character.

I think that's it? @strogonoff , if you want to finish this off, please let us know, otherwise we will take care of it. And please feel free to ask if anything's unclear or I have forgotten something :).

[OnkarRuikar]

The preview companion link is not producing the live sample output for me:

Environment: Fedora 36, Firefox 106.0.4 (64-bit).

There are no such issues with other latest PRs. May be rebasing the branch will solve it.

[wbamberg]

The preview companion link is not producing the live sample output for me:

Environment: Fedora 36, Firefox 106.0.4 (64-bit).

There are no such issues with other latest PRs. May be rebasing the branch will solve it.

I think it's my fault, I put html-no-lint not html-nolint in the code block :(. I can never remember which it is, and it isn't documented anywhere. Should be working now...

[wbamberg]

I'm closing this PR in favour of https://github.com/mdn/content/pull/23000. Thanks for bringing it to our attention, @strogonoff !

[strogonoff]

@wbamberg Oh nice! Sorry I didn’t follow through, got distracted by other stuff.