Opened on 11/30/2017 at 11:06:54 AM

Closed on 01/08/2018 at 03:14:19 PM

#6111 closed change (fixed)

Fix overflowing text on adblockplus.org/nl/features

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):

https://codereview.adblockplus.org/29657623/

Description (last modified by ire)

Environment

Any browser

How to reproduce

  1. Go to the Adblock Plus Features page under a language with long words, e.g. https://adblockplus.org/nl/features
  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 on 12/06/2017 at 09:46:22 AM.
Auto-hyphenation in English

Download all attachments as: .zip

Change History (13)

comment:1 Changed on 12/05/2017 at 02:32:24 PM 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 on 12/05/2017 at 02:38:01 PM 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 on 12/06/2017 at 09:46:22 AM by ire

Auto-hyphenation in English

comment:3 Changed on 12/06/2017 at 09:49:03 AM 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 on 12/15/2017 at 01:45:56 PM 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 on 12/16/2017 at 12:15:38 AM 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 on 12/16/2017 at 12:28:06 AM 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 on 12/18/2017 at 02:05:29 PM 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 on 01/05/2018 at 09:40:05 AM by ire

  • Description modified (diff)
  • Owner set to ire
  • Ready set
  • Summary changed from Enable hyphenation on adblockplus.org to Fix overflowing text on adblockplus.org/nl/features

comment:9 Changed on 01/05/2018 at 10:02:42 AM by ire

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

comment:10 Changed on 01/05/2018 at 02:01:09 PM 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 abp.org updates).

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

comment:11 Changed on 01/08/2018 at 03:13:43 PM by abpbot

A commit referencing this issue has landed:
Issue 6111 - Fix overflowing text on adblockplus.org/nl/features

comment:12 Changed on 01/08/2018 at 03:14:19 PM by ire

  • Resolution set to fixed
  • Status changed from reviewing to closed

Add Comment

Modify Ticket

Change Properties
Action
as closed .
The resolution will be deleted. Next status will be 'reopened'.
to The owner will be changed from ire.
 
Note: See TracTickets for help on using tickets.