Skip to content

[css-text] Rename text-wrap-style: avoid-orphans #11283

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kizu opened this issue Nov 27, 2024 · 22 comments
Open

[css-text] Rename text-wrap-style: avoid-orphans #11283

kizu opened this issue Nov 27, 2024 · 22 comments
Labels

Comments

@kizu
Copy link
Member

kizu commented Nov 27, 2024

Following the resolution in #3473 (comment), opening an issue. I will copy my comment from that issue:


In various recent typographic contexts, words like “widows” and “orphans” can be considered insensitive, and also can be easily confused between themselves, with people often using one when meaning another.

From wikipedia Source
Widow (sometimes called orphan)
A paragraph-ending line that falls at the beginning of the following page or column, thus separated from the rest of the text. Mnemonically, a widow is "alone at the top" (of the family tree but, in this case, of the page).
Orphan (sometimes called widow)
A paragraph-opening line that appears by itself at the bottom of a page or column, thus separated from the rest of the text. Mnemonically, an orphan is "alone at the bottom" (of the family tree but, in this case, of the page).
Runt (sometimes called widow or orphan)
A word, part of a word, or a very short line that appears by itself at the end of a paragraph. Mnemonically still "alone at the bottom", just this time at the bottom of a paragraph. Orphans of this type give the impression of too much white space between paragraphs.

By this definition, this property should've been called `avoid-runts`, for example, which would be even harder for people to understand (and would also be insensitive, as it also seems to be used as a derogatory term).


For example, Ellen Lupton writes about this in her “Thinking with Type” book, on page 128, and proposes a term “short lines” instead of “orphans”.

Given the current description of text-wrap-style: avoid-orphans starts as “Specifies the UA should avoid excessively short last lines,” I propose renaming the value to avoid-short-lines (could be more explicit as avoid-short-last-lines, but this is probably too much)


In the meeting and in IRC, there were two questions brought up:

  1. Should the name be avoid-short-lines or avoid-short-last-lines? Just avoid-short-lines might be a bit too vague, and authors could expect that short lines on other lines could also be avoided.

  2. There are already widows and orphans properties in CSS.

My thoughts about these:

  1. The current spec already allows UA to decide against improving the last line, so having the avoid-short-lines not doing something that they expect will be already an issue. I also think that a case when there are short lines in the middle of the text are relatively rare. It happens only when there are very long words with a short word between, and in the majority of cases, people want to fix the last line specifically. So, when an author trying to solve this problem would see the avoid-short-lines available, they will understand that it will solve it. The opposite: an author looking at the available values and wondering when they could use one is a much more rare case.

  2. I'd vote to rename these two, but probably in a separate issue: [css-break] Rename and/or reimagine widows and orphans #11286. While these properties exist, their support is very uneven, with Firefox not implementing them yet, and other browsers having an uneven support for them.


I did also write a blog post about this.

@meyerweb
Copy link
Member

meyerweb commented Nov 27, 2024

Would changing the value to avoid-runts, or possibly avoid-leading-runts and avoid-trailing-runts, address the concerns raised?

@kizu
Copy link
Member Author

kizu commented Nov 27, 2024

Would changing the value to avoid-runts, or possibly avoid-leading-runts and avoid-trailing-runts, address the concerns raised?

Yes, the Wikipedia entry also mentions this word for this specific case. I did encounter it there for the first time in this context, so from a perspective of an author unfamiliar with this term, it won't be as discoverable as avoid-short-lines.

That said, when I looked into the dictionaries, one of the definitions of “runt” is also derogatory:

For example, from https://www.merriam-webster.com/dictionary/runt:

  1. usually disparaging : a person of small stature

In other common dictionaries, I did not find the typographic meaning as well. Looking at some other books on typography that I have which mention orphans and widows, I did not find the mention of “runts” there as well. So I am not sure where this term comes from, and it is unlikely to be widely known.

@svgeesus
Copy link
Contributor

svgeesus commented Dec 4, 2024

Being Scottish I am familiar with all three meanings listed in Merriam-Webster. The first (remnant plant part) is archaic and I have rarely heard it used. The second is common, usually for a litter of pigs but also cats or dogs, and carries an implication not only of size but also weakness and unfitness for life:

We lost one of the piglets last night but no wonder, it was the runt of the litter

There is a clear derogatory connotation and, especially if replacing widow and orphan for cultural sensitivity reasons, runt would be a spectacularly bad choice.

@jensimmons
Copy link
Contributor

jensimmons commented Mar 10, 2025

We definitely need to rename this property. In part, because a single word left alone at the end of a paragraph is called a "widow", not an "orphan". So even if we wanted to continue using the traditional word for this, it should be avoid-widows. The text-wrap-style: avoid-orphans rule would mean avoiding having a word all by itself on a single line at the beginning of the paragraph — which makes no sense at all.

I agree however, that in 2025, we should rename these terms, not carry them even further into the future. Even the word "widow" as a term for human is frustrating. It's deeply rooted in the idea that women cannot live on their own, that there's something very wrong with a woman being single. She should go from her father's house to her husband's house, and if her husband dies, she needs to be labeled by society with an especially-tragic term, since she is now destined to poverty and hardship, since only men can properly hold careers and own a household.

So what do we rename this to? I believe avoid-short-last-line might be the best we can do.

It should be line not lines because it's about the length of the very last line, not the last 2-3 lines. In fact, the second-and-third-to-last lines are likely to get shorter, not longer, when this is applied (as some of the words from those lines are moved down to the last line).

avoid is good — it's sets the stage, we are avoiding something
short is a strong way to say what's wrong, we don't like something far too short
last-line is descriptive. It also works in all writing modes.

It's tempting to keep going on a search for the perfect different phrase that will trigger people's memory of this thing. But that doesn't exist. "Widow" is what western typography calls it and what art schools / graphic design classes teach. Most people have never heard of this concept — that it's bad for the last line of a paragraph to be too short. Without having a pre-conceived notion for this idea, the CSS value has to explain it.

Is there something shorter and easier to remember than text-wrap-style: avoid-short-last-line? Maybe we don't need to "avoid" something, but more directly state the result we want?

  • text-wrap-style: avoid-short-last-line
  • text-wrap-style: longer-last-line
  • text-wrap-style: long-last-line

It might feel tempting to talk about words & use something like avoid-single-word, but that's a terrible idea, given the commitment to ensure CSS represents all languages and scripts, not just English/Latin-alphabetic scripts. The term we chose must support character-based languages, and "word" isn't applicable in that context.

@jensimmons
Copy link
Contributor

I do like this set of options:

  • text-wrap: balance;
  • text-wrap: pretty;
  • text-wrap: longer-last-line;
  • text-wrap: wrap;

@jfkthame
Copy link
Contributor

jfkthame commented Mar 10, 2025

I agree that terminology involving widows and/or orphans here is problematic, as they are not widely understood, and even within typographic circles, usage is inconsistent and confusing. (See https://en.wikipedia.org/wiki/Widows_and_orphans)

text-wrap: avoid-short-last-line seems better than other options such as longer-last-line, in my opinion. A property text-wrap: longer-last-line is unclear (longer than what?). It sounds like it's asking for the last line of the block to be made longer than the other lines, which is not at all what is intended.

@jensimmons
Copy link
Contributor

For anyone wondering the source for my assertion that it should be avoid-widows, not avoid-orphans… Robert Bringhurst in The Elements of Typographic Style best explained which is which (in the context of first/last lines of a paragraph ending up on by themselves at the beginning/end of a column) on page 43-44 (emphasis added):

The typographic terminology is telling. Isolated lines created when paragraphs begin on the last line of a page are known as orphans. They have no past, but they do have a future, and they need not trouble the typographer. The stub-ends left when paragraphs end on the first line of a page are called widows. They have a past but not a future, and they look foreshortened and forlorn. It is the custom — in most, if not in all, the world’s typographic cultures — to give them one additional line for company. This rule is applied in close conjunction with the next.

@jensimmons
Copy link
Contributor

jensimmons commented Mar 10, 2025

Ah, I agree "longer" could be understood to mean longer than the rest of the lines. That's misleading. So perhaps this set of options:

  • text-wrap: balance;
  • text-wrap: pretty;
  • text-wrap: avoid-short-last-line;
  • text-wrap: wrap;

@jensimmons
Copy link
Contributor

Can anyone think of any alternative names that we might use instead of this?

text-wrap: avoid-short-last-line;

@sturobson
Copy link

text-wrap: tidy; - make all the text nice and tidy without a hair out of place.

@stevefulghum
Copy link

How about ‘text-wrap: avoid-singles’? It’s linguistically simple and reasonably descriptive about what’s being done.

@astearns
Copy link
Member

If it had to be shorter I suppose we could use avoid-short-last that matches the text-align-last property. But I think I prefer avoid-short-last-line.

@MattyBalaam
Copy link

MattyBalaam commented Mar 13, 2025

How about two?

For widows you could use pretty-last, and for orphans pretty-first?

Edit: checked up on orphans and they weren't exactly what I remembered so I'm not sure if pretty-first makes sense as much as pretty-last

@runofthemillgeek
Copy link

avoid-short-last-line reads well to me.

Two others options I wanted to throw in:

  1. avoid-short-end-line

    In the spirit of logical property names (*-block-end). The block part is unnecessary here and implied.

  2. prefer-long-end-line

    Although this might be read strongly about wanting a long line at the end and might be confused with @prefers-* even if that's a different context.

@jfkthame
Copy link
Contributor

text-wrap: tidy; - make all the text nice and tidy without a hair out of place.

It's not obvious how that would differ from text-wrap: pretty.

How about ‘text-wrap: avoid-singles’? It’s linguistically simple and reasonably descriptive about what’s being done.

I don't think "singles" is a readily-understood term in this context. Presumably it's intended to be shorthand for "single words", but we shouldn't be thinking in terms of "words" given that some languages don't use inter-word spaces at all; and with very short words a last line containing two words (so not a "single") could still be very short.

This also doesn't make clear that it relates only to the last line of the block, not to all lines.

avoid-short-end-line
prefer-long-end-line

I think "last line" is more natural than "end line" (which sounds like it's got something to do with the end of the line), and there's precedent for the term "last" in text-align-last.

Of the suggestions I've seen so far, I'd favor avoid-short-last[-line] as being much the clearest.

@jensimmons
Copy link
Contributor

I posted this question on Bluesky, hoping the wisdom of the crowds might shake out a great name that we're just not thinking of: https://bsky.app/profile/jensimmons.bsky.social/post/3lkbg42miec2g

New ideas include:

  • text-wrap: balance-last-line;
  • text-wrap: retract-last-word;
  • text-wrap: avoid-singles;
  • text-wrap: avoid-dangle;
  • text-wrap: avoid-danglers;
  • text-wrap: avoid-floaters;
  • text-wrap: avoid-stub;
  • text-wrap: no-stragglers;
  • text-wrap: no-stub;
  • something with stray
  • something with hanger

@jensimmons
Copy link
Contributor

My feeling is that singles, dangle/danglers, floaters, stub, stragglers, stub, stray, hanger are all strong candidates as replacements for widow/orphan/runt, but they all still require some sort of graphic design training / prior knowledge. I'd love for us to take advantage of the opportunity to pick a name that's more self evident and therefore can teach authors, rather than mystify folks who aren't familiar.

balance-last-line could be good — but this feature won't actually balance the line; it doesn't make the lines have the same length the way the balance value does. (Doesn't have the effect of folding in half / thirds, etc.)

I still like avoid-short-last-line the best so far. I'll keep looking to see what else folks have come up with.

@MattyBalaam
Copy link

last-words-united is my newest thought.

@nt1m
Copy link
Member

nt1m commented Mar 16, 2025

Whatever this issue comes up with, it would be nice to add the same alias to the orphans property, to show that these 2 are linked

@frivoal
Copy link
Collaborator

frivoal commented Mar 24, 2025

While most suggestions above are about name of a value, a few bits of discussion mention picking a name for the property. Unless we want to change the design of the property as well as the unfortunate naming, what we're looking for is a name for a value, which would live alongside with auto, balance, stable and pretty as values of text-wrap-style (and it's text-wrap shorthand).

@jensimmons
Copy link
Contributor

jensimmons commented Mar 24, 2025

Whatever this issue comes up with, it would be nice to add the same alias to the orphans property, to show that these 2 are linked

Well, first, orphans is not the property that maps to this idea, it's widows. But more importantly, the CSS widows and orphans properties don't affect how many words are on the first or last line, they affect how many lines exist before/after a page/column break.

I do agree we should rename those two properties. But that feels like a separate effort.

avoid-short-last-line doesn't easily become avoid-too-few-last-lines-in-this-column

Plus this is a value, and those are properties....

Seems like those should become something like:

  • break-block-start-line-minimum: 3
  • break-block-end-line-minimum: 2

… to be bikeshed in this issue: #11286

@css-meeting-bot
Copy link
Member

The CSS Working Group just discussed [css-text] Rename `text-wrap-style: avoid-orphans` , and agreed to the following:

  • RESOLVED: rename avoid-orphans to avoid-short-last-line
The full IRC log of that discussion <TabAtkins> jensimmons: text-wrap:pretty is defined to do many different things to make it prettier
<TabAtkins> jensimmons: i propose to have a new value that *only* avoids orphans (word by itself on the last line of a paragraph)
<TabAtkins> jensimmons: similar to chrome's current bheavior anyway
<TabAtkins> jensimmons: it's proposed as avoid-orphans. that's actually a widow, adn the names are bad anyway
<TabAtkins> jensimmons: lots of suggestions, i think all the names are bad
<astearns> not just a word by itself, very short lines with more than one word should also be avoided
<TabAtkins> jensimmons: if you read thru it, i think `avoid-short-last-line` is best so far
<florian_irc> q+
<TabAtkins> jensimmons: we can bikeshed the name if needed, but even if we don't have the name decided on i'd like to switch to avoid-short-last-line *for now*
<kizu> q+
<TabAtkins> +1 to abandoning the orphan/widow terminology
<lea> q+
<TabAtkins> I have *never* remembe3red which is which anyway
<TabAtkins> florian_irc: agree with the problem, and the temporary problem
<TabAtkins> florian_irc: and the suggested name isn't wrong in an international context, it doesn't mention "words". that's nice
<TabAtkins> florian_irc: would like something shorter, but this'll do
<astearns> ack florian_irc
<TabAtkins> fantasai: one idea is avoid-short-lines? i guess we want to avoid short lines in general
<TabAtkins> astearns: this is just about last lines
<astearns> ack fantasai
<TabAtkins> fantasai: so a short line in the center of a paragraph is okay?
<TabAtkins> jensimmons: yeah this doesn't handle that
<TabAtkins> florian_irc: nuance: if the penultimate line is short, it would somewhat balance that against the last line
<TabAtkins> florian_irc: but wouldn't touch a line in the middle
<astearns> q+
<TabAtkins> jensimmons: so if you have one line with a short word, followed by a long word, in a narrow column. right now the long word will wrap.
<ChrisL> Supercalifragilisticexpialidocious
<TabAtkins> jensimmons: which will leave you with a short line in the middle of the paragraph. and this feature isn't trying to mitigate that.
<astearns> ack kizu
<TabAtkins> jensimmons: so i think it's best to be specific with "avoid-short-last-line"
<TabAtkins> kizu: i think i like this term even if the value is long
<TabAtkins> kizu: you won't use it that often, and it's very understandable
<ntim> q+
<jensimmons> q+
<TabAtkins> kizu: looking at all the other values i think they're all a bit too wide in what they cover
<astearns> ack lea
<TabAtkins> lea: right now this is a flag, essentially
<TabAtkins> lea: a lot of typesetting programs give designers more control over orphan prevention
<TabAtkins> lea: that woudl change naming conventions
<florian_irc> q?
<TabAtkins> lea: number of words, or % of content area
<TabAtkins> lea: that would give us different names to work with
<florian_irc> q+ to respond to lea
<TabAtkins> lea: and more ability, probably with an auto value to let the UA choose
<kurt> q+
<TabAtkins> lea: it's not just about orphans, if you have a very long line even two words looks bad
<TabAtkins> lea: but i do agree changing the word "orphan"
<TabAtkins> lea: orphan is used in both words and lines, typographically. confusing because you dont' know which it's referring to
<TabAtkins> florian_irc: and it' bad in both cases
<astearns> ack florian_irc
<Zakim> florian_irc, you wanted to respond to lea
<TabAtkins> florian_irc: i disagree with giving fine-grained controls, there's so many fine-grained things you might want to set, you have to not only set those but also their priorities
<TabAtkins> florian_irc: you end up with a toolbox of many knobs, most of the parameter space is nonsensical. think letting the browser figure it out is more often better.
<lea> q?
<TabAtkins> florian_irc: but if we do want to do that, it's a big problem, file a separat eissue. but i'd rather not
<TabAtkins> astearns: i agree mostly with florian. InDesign doesn't let you choose a % of content length
<TabAtkins> astearns: it's complicated on what effect this has on other lines in the paragraph
<TabAtkins> astearns: it's not okay to implement this as putting an nbsp in the last two words
<TabAtkins> astearns: the spec should say something like "use the facilities you have in text-wrap:pretty to avoid a short last line"
<TabAtkins> astearns: if the overall line-breaking for a paragraph cannot be improved, we will sometimes still get a short last line
<astearns> ack ntim
<TabAtkins> astearns: so the spec should say that this is a bit subtle, not a dumb switch
<astearns> ack astearns
<TabAtkins> florian_irc: right, its' "avoid", not "forbid"
<TabAtkins> ntim: iirc, avoid-orphans was one of the ways to mitigate the perf problems of text-wrap:pretty
<TabAtkins> ntim: should it be a name that's easy to remember, then, so people are more likely to use it rather than pretty?
<TabAtkins> ntim: "pretty" is short and easy to use
<TabAtkins> florian_irc: so rename "pretty" to "please-use-nice-typography-if-you-can"
<TabAtkins> florian_irc: it would be nice to find a shorter name, yeah
<TabAtkins> ntim: yeah, would just be nice to encourage people to use the new value
<TabAtkins> fantasai: i think the fact that it's obvious what it does might actually encourage people
<astearns> ack jensimmons
<TabAtkins> astearns: and if you can come up with a better name, feel free to suggest it
<TabAtkins> jensimmons: i think avoid-short-last-lines is good because it is flexible enough to handle all scripts
<TabAtkins> jensimmons: and it's very clear what it is, no prior typographic education
<TabAtkins> jensimmons: if you've never known typograph stuff, you read this property, you see this value and you think you know waht it does right away. that's a good quality
<TabAtkins> jensimmons: i think we've been prioritizing those two qualities *over* a short word
<bkardell> I like `avoid-short-last-lines` - it is clear... +1 to what jensimmons is saying rightnow
<TabAtkins> jensimmons: dont' think we'll really find a shorther phrase. trick is a lot of people havne't thought about this before, so we ahve to name all the pieces
<TabAtkins> jensimmons: there is a question of if we need this at all, i think perf of "pretty" shoudl be fine anyway unless they have ridiculous paragraphs
<kbabbitt> q+
<TabAtkins> jensimmons: but it does give browsers some flexibility to avoid messing up "pretty"
<TabAtkins> jensimmons: and to address alan's concerns about the precise definition, it does go to some details about that already. you have to look at multiple lines
<TabAtkins> jensimmons: there's a lot of MAY in there
<astearns> ack kurt
<TabAtkins> jensimmons: you'll see a lot of different choices if you open the same text in chrome and safari, that's fine
<kurt> https://drafts.csswg.org/css-break/#widows-orphans
<TabAtkins> kurt: there's a property for widows and orphans in css-break already
<TabAtkins> kurt: does that hit the same problems?
<TabAtkins> jensimmons: yeah, those affect the first/last lines of a paragraph around a break
<astearns> ack kbabbitt
<TabAtkins> astearns: if we had to replace those we'd need an alias anyway. but this is a new term
<TabAtkins> kbabbitt: among these terms i like avoid-short-last-line best, yeah
<TabAtkins> kbabbitt: isn't there a property... the use-case is finding the right balance of quality vs perf
<TabAtkins> kbabbitt: there's another set of propertites about image-rendering that also hint about quality vs perf
<TabAtkins> TabAtkins: image-rendering, yeah
<TabAtkins> kbabbitt: can those names apply
<iank_> q+
<TabAtkins> TabAtkins: we have deprecated optimizequality and optimizespeed. they mean the same thing. the other values are all specific about what's happening. so if we want to draw a parallel, it's similar to what's being proposed ehre, with specific details about what's happening
<TabAtkins> jensimmons: and we dont' want to necessarliy say "speed", computers get faster, algos get better. don't want to tie a behavior to taht based on current perf considerations that might change later
<TabAtkins> jensimmons: if you turn on the feature flag in the recent version, webkit's pretty does a lot of work.
<TabAtkins> jensimmons: doesn't handle rivers yet, but it's a lot more than what chrome does right now
<TabAtkins> jensimmons: and the perf is great
<TabAtkins> jensimmons: i need to do some more testing, but afaik you can put it on as many elements as you want
<TabAtkins> jensimmons: concern is that i fyou have one element that's hundreds or thousands of lines long, you might see an issue
<TabAtkins> jensimmons: so if you just have zero paragraph breaks at all in a long article, that's the area that might be slow. but otherwise is fine.
<astearns> ack iank_
<TabAtkins> jensimmons: that's also why i hesitate warning people off of pretty
<TabAtkins> iank_: for perf, we don't see on the low end devices getting faster year over year. they're getting cheaper, isntead
<TabAtkins> iank_: that's been true for many years now
<TabAtkins> iank_: i think we're positioned to have the msot users in that segment.
<TabAtkins> iank_: so yeah, perf in the high end is getting better, but on the low end it's static, and we have the biggest slice of that market
<TabAtkins> jensimmons: good point. iphone 16e is pretty fast
<TabAtkins> astearns: so i think we're ready to rename avoid-orphans to avoid-short-last-line
<TabAtkins> astearns: objections?
<TabAtkins> RESOLVED: rename avoid-orphans to avoid-short-last-line

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Regular agenda
Development

No branches or pull requests