Skip to content
This repository has been archived by the owner on Feb 22, 2022. It is now read-only.

Support for hanging punctuation #4

Open
martinfjant opened this issue Jun 9, 2019 · 3 comments
Open

Support for hanging punctuation #4

martinfjant opened this issue Jun 9, 2019 · 3 comments
Assignees

Comments

@martinfjant
Copy link

While it does not yet have a widespread support, akin to hyphens, it degrades gracefully. Having punctuation in CSS is available for periods and quotation marks. It ensures that the flow of the text is not broken, by pushing these out in the margin. Okay, so it's currently only supported by Safari, but it's really, really neat. Here's a blog post explaining it: https://www.bram.us/2018/02/26/hanging-punctuation-in-css/

@benface benface self-assigned this Jun 9, 2019
@benface
Copy link
Owner

benface commented Jul 4, 2019

I'm hesitant to add this because the spec in which the hanging-punctuation property is defined (CSS Text Module Level 3) is still a Working Draft, which probably explains why only Safari supports it at the moment. So there's a chance that the spec changes before other browsers implement it... but on the other hand, you're right that it degrades gracefully, so not that big of a deal.

If I were to add it, what should the classes be? I'm thinking:

.hanging-none {
    hanging-punctuation: none;
}

.hanging-first {
    hanging-punctuation: first;
}

.hanging-last {
    hanging-punctuation: last;
}

.hanging-both {
    hanging-punctuation: first last;
}

.hanging-force-end {
    hanging-punctuation: force-end;
}

.hanging-allow-end {
    hanging-punctuation: allow-end;
}

.hanging-first-force-end {
    hanging-punctuation: first force-end;
}

.hanging-first-allow-end {
    hanging-punctuation: first allow-end;
}

.hanging-last-force-end {
    hanging-punctuation: last force-end;
}

.hanging-last-allow-end {
    hanging-punctuation: last allow-end;
}

.hanging-both-force-end {
    hanging-punctuation: first force-end last;
}

.hanging-both-allow-end {
    hanging-punctuation: first allow-end last;
}

@martinfjant
Copy link
Author

Yea, I get that it's not a priority and that the support is scarce, if not nonexistent. I've actually had a hard time getting it to work myself at all when writing CSS manually. It is bit sad though, because it's really a neat feature if it works. But yea, it degrades very nice, so it's more of a waste of space and time concern I guess :). Like, I want to have it because I love obscure new CSS features, but it's totally reasonable that you're reluctant to add it.

I think as a suggestion, that merely .hanging would be nice as a shorthand for the most common or standard way of hanging punctuation (which I guess is both?), but that's nitpicking ^^;

@felipepodesta
Copy link

+1

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants