Open Bug 1332959 Opened 3 years ago Updated 8 months ago

RTL web pages are aligned on the left side when the viewport is too small for the content

Categories

(Core :: Layout, defect, P3)

53 Branch
defect

Tracking

()

Webcompat Priority revisit
Tracking Status
firefox53 --- affected

People

(Reporter: karlcow, Unassigned)

References

()

Details

(Whiteboard: [webcompat])

Attachments

(1 file)

This is related to https://webcompat.com/issues/4305

Steps to Reproduce:
0. With Firefox Android, go to http://www.haaretz.co.il/misc/writers/1.2557412
1. Once the page is loaded, note how the content is aligned on the left side.
  (The content is larger than the viewport and can't be scrolled horizontally but that's another issue.)

Expected:
The content should be aligned on the right side, where the photos are and where the content starts. Chrome does it right. It also has a content larger than the viewport but the alignment is right.

Actual:
Content aligned on the left side.
It is not really Android-specific. It can be reproduced with Responsive Design Mode as well.
OS: Android → All
Hardware: ARM → All
(In reply to Karl Dubost :karlcow from comment #0)
>   (The content is larger than the viewport and can't be scrolled
> horizontally but that's another issue.)

Seems like the more urgent issue. Got a bug#?
Flags: needinfo?(kdubost)
Jet, 
not yet, but I'm planning to do that this week with the right test cases and references. :)
FWIW, it looks like the problem here occurs because the page is styled with CSS "direction: rtl" on the <body> element, not on the root <html> element. Moving the direction:rtl property to the root seems to resolve things.

Also, best practice for such a site would be to set the directionality using the HTML "dir" attribute, NOT the CSS "direction" property.
  https://www.w3.org/International/questions/qa-bidi-css-markup
  https://drafts.csswg.org/css-writing-modes-3/#direction

This doesn't alter the fact that we appear to have a bug here; but this particular site, at least, would work better if it followed the best practice of writing <html dir="rtl"> for its content, rather than styling it with "body { direction: rtl; }".
Attached file testcase?
This is an old known issue with scrolling to negative values. For example, the testcase above should show gradient RGB colors, but due to the RTL container, it is impossible to see the left side. I am not sure if this is the same issue as noted above, but it looks similar to me.
(In reply to Jet Villegas (:jet) from comment #2)
> (In reply to Karl Dubost :karlcow from comment #0)
> >   (The content is larger than the viewport and can't be scrolled
> > horizontally but that's another issue.)
> 
> Seems like the more urgent issue. Got a bug#?

Bug 1336346
And also https://mzl.la/2l3iDCb
Flags: needinfo?(kdubost)
Whiteboard: [webcompat]
Priority: -- → P3

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Webcompat Priority: --- → ?

See bug 1547409. Migrating whiteboard priority tags to program flags.

Webcompat Priority: ? → revisit
You need to log in before you can comment on or make changes to this bug.