Page MenuHomePhabricator

[Bug] Vector TOC should use hyphens instead of break-word
Open, MediumPublicDesign

Description

Background

Mentioned in T356532

There's one place in Vector where we're not using hyphens but we really should: the TOC. We're using word-break: break-word; instead of hyphens: auto; which breaks words without hyphens. I'd consider this a bug.

User story

In many languages, when a word breaks onto a new line, it's expected to have a hyphen. This is especially important when line-lengths are very short (like they are with the table of contents in Vector 2022) or in languages where words are very long (e.g. German).

Requirements

The Vector 2022 ToC should use hyphens.

Design

Screenshot 2024-04-09 at 11.40.56 AM.png (1×414 px, 94 KB)
Screenshot 2024-04-09 at 11.41.24 AM.png (1×420 px, 95 KB)
currentdesired

Acceptance criteria

  • The Vector 2022 ToC uses hyphens

Communication criteria - does this need an announcement or discussion?

  • No

Event Timeline

JScherer-WMF created this task.
JScherer-WMF updated the task description. (Show Details)

Current behviour:

Screenshot 2024-04-05 at 11.19.49 AM.png (1×3 px, 1 MB)

Improved behaviour:

Screenshot 2024-04-05 at 11.20.05 AM.png (1×3 px, 1 MB)

Hey @ovasileva @Jdlrobson this is a seemingly smaller wish and would be impactful to making iterative and responsive progress via the Wishlist. Any way to prioritize it in the next 1-2 months?

I did some testing on both pages that have been used on this task. It seems the behaviour of the hyphens attribute differs per browser, some browsers tend to cut words in half even when the display on two lines was fine. And honestly the current display (which seems to have changed in the period since this task has been created) seems fine in most cases.

Perhaps combined with text-wrap:balance; would provide a more readable experience?

Current behaviour:

image.png (1×901 px, 602 KB)

With both hyphens and text-wrap applied:

image.png (1×904 px, 608 KB)