Consider injecting `<wbr>` automatically at strategic locations

[wincent]

I can manually write something like <code>/usr<wbr>/local<wbr>/bin<wbr>/git</code>
(note placement of <wbr> before or after slash is debatable) but it might be nice
to have it happen automatically in some cases. eg. in URL-ish things; maybe in
<code> elements etc.

Another option is to insert ​ or ​, but both the entity approach and the <wbr> approach may be hard to make work with the markdown-it package, because it escapes all HTML here even when html: true applies. This is, of course, usually what you want, so you can write things like I did above in my fenced code block. It just means that we can't do the easy thing (pre-insert the <wbr> tag); we have to do the trickier thing instead (post-process the HTML after escaping).

I say "automatically" but also open to making this work manually, as getting it to work well heuristically may be tricky — will have to experiment and see.

See:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

[wincent]

What GitHub does, at least in gists.

Same text pasted here:

Plain: /long/path

Backticks: /long<wbr>/path

Code: /long/path

[wincent]

Just to wrap this up, I got rid of the most annoying aspect of this without using <wbr> by switching my overflow-wrap property for code spans from anywhere (not recognized by Safari and therefore not by any browser on iOS) to break-word. This fixes the unwanted horizontal scrolling.

Now, it is possible that hand-placed <wbr> tags might provide better presentation in some places, but it is fiendishly difficult to place these potential breakpoints such that they'll produce an "optimal" result at all widths, so I don't think it's worth exploring further.

Consider: current appearance without <wbr> tags —

vs appearance with tags manually placed before slashes —

I don't think the latter even looks any better...