davidmerfield / davidmerfield/Typeset

hanging punctuation for right-aligned blocks?

Open
#55 1 comment 0 reactions 1 assignee Claimed by @danielhaim1 View on GitHub
enhancement
Dominant language
JavaScript
Stars
2.7k
Forks
53
PR merge metrics
No merged PRs in 30d

Description

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).

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.