hanging punctuation for right-aligned blocks?

[mbutterick]

As part of my research on #52 I also studied whether the push/pull technique could be applied to blocks with text-align:right (that is, the punctuation would hang over the right margin instead of the left). I haven’t gotten it to work yet. It may be too complicated to be worthwhile. What I tried:

• In the processor script, closing punctuation would need to be wrapped similar to opening punctuation, though in opposite order: the pull would precede the push. Also, the wrapping tag for the closing punctuation would want to be distinct from the opening (e.g., push-open and push-closed rather than just push). This part seemed tractable.

• In the CSS, however, I couldn’t come up with a way of styling the push-closed and pull-closed to get analogous behavior with the usual push/pull pairs. The usual idea is that in the middle of a line, the two appear together, but at a line break, the push remains at the end of one line, the line break happens, and the pull appears at the beginning of the next. On the right edge, the pull would happen first, at the end of the line, and then assumedly you’d want the push to wrap to the next.

• More troublesome still, I couldn’t come up with a way to toggle this behavior purely with CSS. That is, in any given text block, the text is either aligned left or right (or neither) so only the opening push/pull pairs or closing push/pull pairs should work (or neither). But there isn’t any way to write a CSS selector conditioned on the presence of another CSS property. If every right-aligned block was guaranteed to have, say, class="right", then you can have CSS selectors like .right push-closed and so on. But that requires the right-alignment to be encoded at “compile time”, rather than strictly in the CSS (where it should be).

[davidmerfield]

This is an interesting challenge. Nothing comes to mind at the moment. I will give this some further thought.

I suppose we could mandate an inline-style instead of a class but it's hardly ideal!

[style*="text-align"][style*="right"] .push-closed {
  ...
}

Terrible hack aside, getting right-aligned hanging punctuation working for a predetermined parent class (e.g. .right) at compile time is a decent first step.

There's a part of me that would like to offer some optional front-end JavaScript which could handle this automatically. The front-end JavaScript could also generate the magic numbers for .push and .pull widths in typeset.css automatically, but that's for another thread...