Break at beginning/break preferences

[strarsis]

Is it possible to let the browser break at a specific soft-hyphen? Or let it prefer breaking at hyphens at end of a word instead at the beginning? Alternatively, first word-breaking and resorting to breaking at soft-hyphens if the word would overflow (as last resort)? Are there JavaScript libraries that can make use of the soft-hyphens injected by this plugin? Or can this plugin even enqueue on by itself for adding this functionality?

[mundschenk-at]

Not that I know of. If you find such a JS library, I'll consider including it. Though to me, that sounds more like hyphenation parameters you want to set. For specific words, you can override the hyphenation points from the settings (otherwise you'd have to edit the patterns).

However, wp-Typography uses the TeX hyphenation algorithm, so enhancements are only possible within the limits imposed by that algorithm and the existing pattern files.

[strarsis]

Apparently there had been some discussion about hyphen/break-word prioritization: https://github.com/w3c/csswg-drafts/issues/791

wp-typography correctly injects the soft hyphens (similar to Hypher.js, but on server side and customizable by user via CMS backend) and the browser just uses them according to its own rules.

The algorithm would have to look like this: First break everything by word only. When a word doesn't fit into a line (alone), break at (soft)hyphens. But then subsequent words may also not fit anymore, permutations would have to be find out for optimal distribution of whole words and broken words.

[mundschenk-at]

Hyphenation is tricky and without proper wordlists (or the resulting pattern files), no algorithm will produce good results. Since the only free pattern files are the LaTeX ones, we have to stay with the TeX hyphenation algorithm.

wp-Typography sets hyphenation points according to the user's settings. What the browser does with those hyphenation points is beyond our control. Implementing a JavaScript library to control the line-breaking behaviour of browsers is out of scope for this project.

[strarsis]

@mundschenk-at: There seems to be a technique for this: https://stackoverflow.com/questions/5392853/html-css-denoting-a-preferred-place-for-a-line-break

[mundschenk-at]

@strarsis Which answer do you mean? The wrapping in <span> for each word in a list? That's some ugly markup. Of course you can manually insert that into your content to prevent or force a break at a certain point, but I don't see any way to do that automatically. (And did I mention that the markup is really, really ugly?)

[strarsis]

@mundschenk-at: Can I use some hook in wp-typography for injecting these span-wrappers for a 'preferred/first' breaking? For a particular site this would be really handy, breaking whole words first, then specific fragments and then by hyphens (wp-typography) results in much nicer visual text flow.

[mundschenk-at]

I'm not sure how you'd intend to target them. I've been thinking about a custom fix class that takes WordPress filters for some time now, but that would work best for a NodeFix. For hyphenation, I'd have to use a TokenFix and that API is quite a bit more complicated (hyphenation happens on tokenized words).

I'd have to think very hard about how to expose that API in way that makes sense to WordPress developers.

[strarsis]

@mundschenk-at: Does wp-typography use some kind of default dictionary for determining where to break? Can I also use it for finding out what fragments would belong together? E.g. "test case" would be something that belongs together. Are there any dictionaries I can use for this?

The class-public-interface looks very useful for using the right filters with a custom process function.

Edit: Would it make sense to me creating a wp-typography plugin for this feature (wrapping words and word parts into <span> for controlling break-preference, etc)?

[mundschenk-at]

@strarsis I'm not sure what you mean by "default dictionary". wp-Typography uses the hyphenation algorithm devised by Frank Liang and uses the TeX pattern files (converted to JSON).

As for the actual text manipulation, that's done by mundschenk-at/php-typography. I could provide a WordPress based API for hooking into the library, but hyphenation is a pretty finicky thing. Unless you have a clear algorithmic idea you'd like to implement, I don't think the result will match what you would like to see.

[strarsis]

@mundschenk-at: I was able to achieve this functionality by re-using a modified Public_Interface and WP_Typography class from wp-typography and process_textnodes from PHP_Typography.

The textContent of each DOMText passed to process_textnodes callback is split by an array of predefined text fragments that should be grouped preferably (and by space character (for avoiding breaking words by default)) and wrapped into <span> elements with a class (avoidwrap in this case). The wrapper element is assigned display: inline-block; style which will cause the browser to first wrap between these text fragments and then only wrap the words inside and their hyphens as a last resort when available width becomes too scarce.

It would be great if this feature could be added as wp-typography plugin with its own settings tab/page so the user can define own text fragments that should preferably stay together. Would this feature make sense in the wp-typography plugin?

[mundschenk-at]

You can provide your own hyphenation exceptions for specific words. I'm not sure that anything else (one-letter words already get special treatment) would be generally useful, but if you've got some code I'll have a look. In any case, to do a clean implementation, you would have to provide an implementation of \PHP_Typography\Fixes\Node_Fix.

[strarsis]

@mundschenk-at: https://github.com/strarsis/wp-typography-groups The code is quite hacky and consists basically of modified wp-typography parts. The plugin relies on the filter management of wp-typography and text node handling of PHP_Typography.

[mundschenk-at]

Ah yes, that's way to high up in the processing chain. Still not sure why the extra <span> is needed. Why not just use a non-breaking space? Not quite the same result, but way easier to do and much cleaner mark-up.

[mundschenk-at]

Ah, now I get it. The two words should stay together, but wrapping at the space is better than breaking up a word.

[strarsis]

@mundschenk-at: Yes! This is very useful for text fragments that should stay together, e.g. 'New York', because breaking there can look quite ugly and can even confuse the reader.

The non-breaking space seems to prevent any breaking at all. Ideally there should be a special unicode break-character that just discourages breaking but does not completely prevent it.

[strarsis]

@mundschenk-at: Would this feature be useful enough though for being considered to be implemented in wp-typography?

[mundschenk-at]

@strarsis It would first have to be implemented in php-typography. It's not a priority for me at the moment, but I wouldn't rule it out either.

[mundschenk-at]

This issue was moved to mundschenk-at/php-typography#76