Add class to P elements (or others) that start with punctuation

[jpamental]

Thinking of this as a way to handle hanging punctuation in as abstracted a way as possible. Perhaps something like this:

Define classes that follow the (not yet implemented anywhere) spec as outlined here:
https://css-tricks.com/almanac/properties/h/hanging-punctuation/

So, for a paragraph that begins with double quotation marks, this might be added:

class="beginswith-dq"

or if it's single quotation marks:

class="beginswith-sq"

And if it ends with double quotation marks:

class="endswith-dq"

These could be added wherever necessary, so if it's a quote in a paragraph on its own you might have:

class="beginswith-dq endswith-dq"

There are likely a relatively small number of punctuation marks to consider. I think they should be referenced specifically thought because if you were using CSS to hang the punctuation nicely you would want to only bring it back out a small amount for a single quote and slightly larger amount for double quotes.

[nathanford]

This is a great idea, but I would be interested in seeing if there would be an automatic way to detect how far to pull the character out. That way, we could just set this as an on/off toggle in the CSS property.

[jpamental]

I wonder if in JS you could build an array of punctuation and relative values? (mainly because I have no idea how you would programmatically determine a width :0 )

[nathanford]

We could take the first character, see if it matches a set of known punctuation (should be small). If it matches, wrap it in a span, measure its width, then set a negative text-indent for that much. Finally, clean out the span and presto!

[jpamental]

Couldn't have said it better myself ;) (and unlike me, you would actually have an idea about how to make that happen!)