4

Recently I've been approached by a non techincal member of my team with regards to how paragraphs are being displayed on various different mobile devices and desktops. They are particularly concerned about the number of "hanging" words. What I mean by that are words that drop onto a new line because of reaching the edge of a container and there is simply no more room.

Usually what they ask me to do is try to bring the word back up in line with the others which often involves reducing the size of the font which I do not like doing....and then another solution is that they ask me to bring more words onto the second line to make the paragraph appear more balanced.

I've included the below images to describe what I mean:

Image 1: Paragraph of text on screen width 380px notice the last word "risus" hanging on it's own.

enter image description here

Image 2: Paragraph of text on screen width 400px notice no words are wrapping to line on their own.

enter image description here

Image 3: Paragraph of text on screen width of 375px. Notice "vehicula at in risus" all on one line so paragraph appears more balanced.

enter image description here

However the real issue is that surely you cannot prevent this from happening when you consider the vast majority of devices and screen sizes out there? Or am I being ignorant? Is there a method to ensure this doesn't happen? Is it a problem with regards to usability?

4

I believe what you want is the Knuth-Plass Line Breaking Algorithm. This algorithm distributes the words in a paragraph across all its lines so that the text looks more even. As a result, spacing is more consistent, edges are more aligned, and there are more words on the last line.

So, for example,

The quick brown fox jumped over the lazy
dogs

turns into

The quick brown fox
jumped over the lazy dogs

Unfortunately, support for this is not common outside of TeX. There is a proposal for adding it to CSS, but that’s all it is right now. However, there are two JavaScript libraries that implement this algorithm: Typeset and BalanceText. The latter even has a demo page.

I hope that helps!

  • Absolutely, very helpful David, appreciate that :) – Javacadabra Dec 10 '15 at 15:30
  • You’re welcome! Do let us know what you end up doing in the end. I’m very curious if either of these solutions work well in practice, or if you end up going a different way. – David Regev Dec 10 '15 at 16:53
5

The simplest solution would be to add a non-breaking space between the last two words of a paragraph. Some words are long enough to not need this.

4

I believe this is more of question of how to use CSS. Did you try some of these suggestions? https://stackoverflow.com/questions/4652654/how-to-turn-off-word-wrapping-in-html

Also, I would recommend changing the alignment to left or justified, placing the one or two remaining words on the left edge of the paragraph. I think this would help with that feeling of the words being "imbalanced" since the eye would naturally find those words more easily than in the center of the screen.

  • 1
    Hey appreciate your response and I do agree with you, there is definitely the argument to be made that this is a CSS related question as inevitably CSS will be used to achieve whatever is needed for optimal results. However I guess I'm wondering in terms of UX is it actually a problem if words wrap on to a new line by themselves. I personally don't see an issue with it. – Javacadabra Dec 10 '15 at 12:11
  • 2
    Have you considered left alignment or justified alignment? Perhaps the single words feel imbalanced because they are in the center and hard for your eye to naturally find. – J. Dimeo Dec 10 '15 at 12:18
  • good point, could look into that actually. – Javacadabra Dec 10 '15 at 12:20
  • 2
    I strongly agree with changing the alignment to left-justified, but would not recommend using fully-justified as this causes "rivers" in the text which make it harder for people with dyslexia to read. uxmovement.com/content/… Also, when we read, our eyes use the left-hand margin as a sort of anchor point, so having an uneven left-hand margin (as happens with centered text) is tiring. uxmovement.com/content/… – Yvonne Aburrow Dec 10 '15 at 13:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.