Page MenuHomePhabricator

Lay out featured languages using flexbox
Open, Needs TriagePublic

Description

Back in 2012, a two-column layout was added for the top 10 languages on devices with 240px < width ≤ 480px, using a float:left hack. (This was expanded to three columns in 2017 in rWPORe12a299a164723e428efaf95c33ffa52ab52c829.) It’s understandable that float:left was used at the time, since no browsers other than Internet Explorer used to support flexbox yet (and IE also used to support it in v8+ only, and with vendor prefixing). Since 2015, all browsers have supported flexbox without vendor prefixing (the last one to come to the party was Safari), so there’s no reason not to switch to that. It has several benefits:

  • Better right-to-left support. If the user requests the site in a right-to-left language such as Hebrew, the <html> element gets a dir="rtl" attribute, but the hardcoded float:left means that the first language appears at the top left, not at the top right as the directionality would request. A flexbox uses the natural text directionality, so the first language will automatically at the top left in LTR languages and at the top right in RTL languages.
  • Simplify CSS. Currently there is another rule for width ≤ 240px, which switches to a one-column mode. A flexbox layout would automatically switch to one-column mode if there isn’t enough space, so we could get rid of a breakpoint.
  • Bring back two-column mode. On a 241px wide screen, three columns are too many. A flexbox would automatically switch from three-column mode to two-column mode depending on the screen width, before switching to one-column mode.

If someone uses a decade-old browser that doesn’t support flexbox yet (and is able to access our sites somehow), it gracefully degrades to a single-column layout, which should be fine.

Current layout:

480px242px236px
Screen Shot 2026-01-09 at 15.41.13.png (480×604 px, 52 KB)
Screen Shot 2026-01-09 at 15.41.34.png (242×604 px, 47 KB)
Screen Shot 2026-01-09 at 15.41.39.png (236×604 px, 34 KB)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

The other projects list also uses float:left, so it suffers from the same problems ­– except that it uses three columns on >480px and two columns on ≤480px – including very small (≤240px) screens, so it becomes unreadable on those devices. Maybe it could be brought into the scope of the current task.

Kavaljeet_Singh subscribed.

Hi, I’d like to work on this task. I’ll update the layout from float: left to Flexbox as described and handle the responsive/RTL improvements. Thanks!

Change #1225070 had a related patch set uploaded (by Aklapper; author: Kavaljeet Singh):

[wikimedia/portals/deploy@master] Use flexbox for featured languages layout

https://gerrit.wikimedia.org/r/1225070

Change #1225070 abandoned by Kavaljeet Singh:

[wikimedia/portals/deploy@master] Use flexbox for featured languages layout

https://gerrit.wikimedia.org/r/1225070

Change #1225148 had a related patch set uploaded (by Kavaljeet Singh; author: Kavaljeet Singh):

[wikimedia/portals@master] Use flexbox for featured languages layout

https://gerrit.wikimedia.org/r/1225148