Prevent Your Em-Dashes From Wrapping
In my e-books, I take care to use proper em dashes, like so: —. It’s important for me to use proper em dashes rather than, say, one, two, or three hyphens.
There is a problem, though, with em dashes on web pages: the HTML renderer will sometimes wrap them incorrectly. I think starting a line with an em dash doesn’t look great, and it looks wrong to have a line consist of a single em dash.
Consider this line from the Clark Ashton Smith poem Recompense:
In some cases, this may be fine, but let’s try to aim a little higher. The solution is to wrap the em dash and the word before it in a <span> element, and then give the span the styling “white-space: nowrap;”.
Simple enough, but how can the creation of the span element be automated during the parsing process?
I put the question to people on FOSStodon, and received this response from wizzwizz4:
string = string.replace(/(\s)(\S+—)/gi, “$1$2”);
This is the result:
Seems to be working well, or at least headed in the right direction. Than you, wizzwizz4!
This may seem like a little thing, because it is. Still, it’s a good example of Charles Colton’s famous summary of Michelangelo’s art: “Trifles make perfection, and perfection is no trifle.”
SHOW/HIDE COMMENTS
- No comments yet.
WANT TO COMMENT?