Open Bug 2003019 Opened 3 months ago Updated 13 days ago

www.jw.org - Text on the page overflows

Categories

(Web Compatibility :: Site Reports, defect, P2)

Product:
Web Compatibility
Component:
Site Reports
Platform:
Desktop
Windows 10
Type:
defect

Tracking

(Webcompat Priority:P3, Webcompat Score:4)

Status:
ASSIGNED
Project Flags:
Webcompat Priority P3
Webcompat Score 4

People

(Reporter: ctanase, Assigned: twisniewski)

References

(Depends on 1 open bug,
URL
)

Details

(5 keywords, Whiteboard: [webcompat-source:web-bugs][webcompat:sightline][webcompat:core])

User Story

user-impact-score:90
platform:windows,mac,linux,android
impact:content-missing
configuration:general
affects:all
branch:release
diagnosis-team:layout

Attachments

(2 files)

image.png
452.05 KB, image/png
Details
Bug 2003019 - add a CSS webcompat intervention for www.jw.org library pages; r?ksenia
48 bytes, text/x-phabricator-request
Details | Review

Environment:
Operating system: Mac OS X 10.15/Windows 10
Firefox version: Firefox 145.0/147

Steps to reproduce:

  1. Go to https://www.jw.org/en/library/bible/kingdom-interlinear-greek-translation/books/revelation/22/
  2. Observe the text on the page.

Expected Behavior:
The text is correctly aligned and is fully visible.

Actual Behavior:
The text is not fully visible, it overflows on right side of the page.

Notes:

  • Reproduces regardless of the status of ETP
  • Reproduces in firefox-nightly, and firefox-release
  • Does not reproduce in chrome

Created from https://github.com/webcompat/web-bugs/issues/191594

Attached image image.png —
Whiteboard: [webcompat-source:web-bugs] → [webcompat-source:web-bugs][webcompat:sightline]
User Story: (updated)
Webcompat Score: --- → 1
Severity: -- → S2
User Story: (updated)
Webcompat Priority: --- → P2
Webcompat Score: 1 → 7
Keywords: webcompat:needs-diagnosis
Priority: -- → P2

Adding <wbr> after all <ruby> elements seems to fix the issue.

Workaround:
the following css seems to be fix the issue.

ruby::after {
  content: "\200B"; /* Zero-width space (line break opportunity) */
}

or

body {
  line-break:  anywhere;
}
Depends on: 2003395

I filed bug 2003395 as a platform-bug here.

Aside from us fixing that bug... the cleanest fix here would be for the site to move the space characters outside of the rb tags, as in reference case 1b posted on that bug.

In the absence of those fixes, the first part of comment 4 (adding an explicit zero-width space after each ruby tag) seems like a good possible sitepatch that we could ship. That might introduce linebreaks in spots where they aren't intended (and where other browsers don't break), after ruby elements that do not contain a space character; but nonetheless, it'll be better than the layout we're getting right now, I think.

Keywords: webcompat:needs-diagnosis → webcompat:needs-contact, webcompat:needs-sitepatch, webcompat:platform-bug
User Story: (updated)
Webcompat Score: 7 → 8
User Story: (updated)
Keywords: leave-open
Assignee: nobody → twisniewski
Status: NEW → ASSIGNED
Pushed by twisniewski@mozilla.com: https://github.com/mozilla-firefox/firefox/commit/de88805b4130 https://hg.mozilla.org/integration/autoland/rev/d038218f49ef add a CSS webcompat intervention for www.jw.org library pages; r=ksenia,webcompat-reviewers
User Story: (updated)
Webcompat Score: 8 → 4
Webcompat Priority: P2 → P3
Whiteboard: [webcompat-source:web-bugs][webcompat:sightline] → [webcompat-source:web-bugs][webcompat:sightline][webcompat:core]
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: