typography

colak · 2025-04-23 03:25:09

As there are new rules widely supported by the browsers maybe we should:

Remove (If we haven’t removed it already. I cannot find it!) the runt (did we use to call them orphans?) from page_title tags that added   between the last two words.
Add text-wrap: pretty; in the default installs, both in the front and back end, although admittedly this is still in development.
Add text-wrap: balance; in the h tags, both in the front and back end.

phiw13 · 2025-04-23 04:46:10

Disagree on the last two points.

text-wrap: pretty; is still pretty limited. Chromium only applies it to the last 2~3 lines and the result is far from an improvement. Apple’s implementation works only on a paragraph basis – the whole text is not taken in account as a whole, the result can be equally as jarring. I think it was Grubber (Mastodon link) that showed such rather odd behaviour. The Japanese, Chinese texts in Webkit’s demo are an insult to good typography. That Arabic example is problematic as well.

text-wrap: balance; is eventually interesting for headline but mostly (only… in my opinion) in a small screen context. Wider blocks (larger screens) more often than not sees the headline wrapped into two halves and only occupying half the block width.

Agree on the first point though, I thought there was an open GH issue but can’t find it.

jakob · 2025-04-23 07:21:01

colak wrote #339596:

As there are new rules widely supported by the browsers maybe we should:

Remove (If we haven’t removed it already. I cannot find it!) the runt (did we use to call them orphans?) from page_title tags that added   between the last two words.

The no_widow attribute and corresponding function do still exist but are set to off as standard. It’s only found in txp:title, and for the label titles of txp:recent_articles and txp:related_articles (not page_title). Personally, I still find it useful.

Like Philippe, I like the direction of the new CSS declarations but the implementation is still lacking.

Aside: What I’d really like to see in browser typography is better hyphenation support. It’s not really any good in languages like German which have long words. In critical areas, I’ll add tons of shy; soft-hyphens but it’s laborious.

jakob · 2025-04-23 07:23:41

phiw13 wrote #339597:

I thought there was an open GH issue but can’t find it.

I think you may mean this one The end result was: the no_widow function still exists but the pref that used to exist setting it site-wide was removed.

EDIT: The CSS widows declaration seems to deal with a different situation than the lone word on the end of a line that the Textpattern attribute addresses. In addition MDN states “limited availability” – so, in my opinion, there’s still a reason to have it as an option in Textpattern. (Philippe and Phil both mention that difference in the GitHub thread)

phiw13 · 2025-04-23 07:37:26

jakob wrote #339599:

I think you may mean this one The end result was: the no_widow function still exists but the pref that used to exist setting it site-wide was removed.

Indeed I did, no wonder I did not find it…, it is closed and done.

–^–

An example of text-wrap:balance at work on this old test & playground site of mine:

In a narrow, phone-sized column: dev.l-c-n.com/_b/balance(1).png – this is OK
In a slightly larger column: dev.l-c-n.com/_b/balance%20(2).png – the right-hand column could have one more word on the 1st line

Sample URL: emps.l-c-n.com/notebook/, both images taken with Firefox desktop, Safari 18 gives similar results (desktop & iPhone)

phiw13 · Today 00:37:35

jakob wrote #339598:

Aside: What I’d really like to see in browser typography is better hyphenation support. It’s not really any good in languages like German which have long words. In critical areas, I’ll add tons of shy; soft-hyphens but it’s laborious.

Does the hyphenate-limit-chars property (MDN reference) helps some bits? (Firefox + Chromium, Safari lags a little)

–^–

Good Typography related: the lh and rlh line-height units are very useful to create a good vertical rhythm. Webkit published a blog post on the subject. One of my usecases in Sandspace: set the min-height of a textarea.

colak · Today 02:07:32

jakob wrote #339598:

Aside: What I’d really like to see in browser typography is better hyphenation support. It’s not really any good in languages like German which have long words. In critical areas, I’ll add tons of shy; soft-hyphens but it’s laborious.

I have a similar issue with long urls where I have to use <wbr>.

phiw13 · Today 02:16:20

colak wrote #339609:

I have a similar issue with long urls where I have to use <wbr>.

overflow-wrap: breakword (or anywhere) – MDN – or word-break: break-all; – MDN – should make those long URL’s more manageable, me thinks.

Textpattern CMS

Textpattern CMS support forum

#1 2025-04-23 03:25:09

typography

#2 2025-04-23 04:46:10

Re: typography

#3 2025-04-23 07:21:01

Re: typography

colak wrote #339596:

#4 2025-04-23 07:23:41

Re: typography

phiw13 wrote #339597:

#5 2025-04-23 07:37:26

Re: typography

jakob wrote #339599:

#6 Today 00:37:35

Re: typography

jakob wrote #339598:

#7 Today 02:07:32

Re: typography

jakob wrote #339598:

#8 Today 02:16:20

Re: typography

colak wrote #339609:

Board footer