Opened 3 years ago

Closed 3 years ago

#6111 closed change (fixed)

Fix overflowing text on

Reported by: trev Assignee: ire
Priority: P3 Milestone:
Module: Websites Keywords: goodfirstbug, content
Cc: julian, saroyanm, ire, jeen, wspee Blocked By:
Blocking: Platform: Unknown / Cross platform
Ready: yes Confidential: no
Tester: Unknown Verified working: no
Review URL(s):

Description (last modified by ire)


Any browser

How to reproduce

  1. Go to the Adblock Plus Features page under a language with long words, e.g.
  2. See the text the features boxes

Observed behaviour

See that the text overflow's it's box where the words are particularly long

Expected behaviour

For languages with longer words, add auto-hyphenation (hyphens: auto) to this and any other small containers (Boxes with width below 120px)

Attachments (1)

Screen Shot 2017-12-06 at 10.45.31 am.png (87.9 KB) - added by ire 3 years ago.
Auto-hyphenation in English

Download all attachments as: .zip

Change History (13)

comment:1 Changed 3 years ago by juliandoucette

  • Cc ire jeen wspee added
  • Description modified (diff)
  • Keywords goodfirstbug content added
  • Priority changed from Unknown to P2

Agreed. The example is clear. But it's unclear what else this should apply to e.g. all not~100% width components/widgets?

@Jeen, @wspee what do you think?

comment:2 Changed 3 years ago by trev

Is there any reason it shouldn't apply to all content? The main text would definitely look better with hyphenation as well. Is there a readability impact? Or are you concerned about hyphenation mistakes?

Changed 3 years ago by ire

Auto-hyphenation in English

comment:3 Changed 3 years ago by ire

I think the hyphenation looks a bit weird when it's in English, since the words aren't that long (See screenshot. So I don't think having it on *all* content works, but maybe we should consider adding it only for specific languages?

comment:4 Changed 3 years ago by lisabielik

I agree with @ire. It can be useful for certain languages (probably German, for one), but not all.

Also keep in mind that badly hyphenated wording is more annoying to read than non-hyphenated.

comment:5 Changed 3 years ago by juliandoucette

Additional feedback from Tamara:

Most of the languages that we support can be hyphenated, but I'd say it would make sense only for text like in the example, which has to be displayed inside a textbox or button and there are character restrictions due to the limited space.

comment:6 Changed 3 years ago by juliandoucette

Based on Lisa & Tamara's feedback I will:

  1. Convert this change request to a bug report
  2. Fix this bug in the place identified
  3. Fix this bug anywhere else I find easily
  4. Consider addressing this issue separately in website-defaults

comment:7 Changed 3 years ago by jeen

Yup agree with the above approach - and only applying it to items with small fixed minimum widths (below 120px for example).

comment:8 Changed 3 years ago by ire

  • Description modified (diff)
  • Owner set to ire
  • Ready set
  • Summary changed from Enable hyphenation on to Fix overflowing text on

comment:9 Changed 3 years ago by ire

  • Review URL(s) modified (diff)
  • Status changed from new to reviewing

comment:10 Changed 3 years ago by juliandoucette

  • Priority changed from P2 to P3

Reprioritizing because this seems to affect very few languages/widgets on this website (possibly none after new updates).

(Sorry trev, I can't remove you as reporter. Please ignore.)

comment:11 Changed 3 years ago by abpbot

A commit referencing this issue has landed:
Issue 6111 - Fix overflowing text on

comment:12 Changed 3 years ago by ire

  • Resolution set to fixed
  • Status changed from reviewing to closed
Note: See TracTickets for help on using tickets.