809841 - Reader mode ignores text-align and hyphens properties

Status: RESOLVED INCOMPLETE

(Firefox for Android Graveyard :: Reader View, defect, P4)

Description

[marcosmesser]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:18.0) Gecko/18.0 Firefox/18.0
Build ID: 20121106042013

Steps to reproduce:

Enabled reader mode in a page with the following CSS code:

.post-body { 
text-align: justify;
-moz-hyphens: auto;
hyphens: auto; }

And HTML code:
<article itemscope='' itemtype='http://schema.org/BlogPosting'>
<div class='post-body' itemprop='articleBody'>
[text]
</div></article>


Actual results:

In reader mode, the article text reverted to being displayed without hyphenation and left-aligned.


Expected results:

Given that the mobile version has hyphenation capabilities, this CSS property should not be ignored in reader mode.

Additionally, justified text should remain that way in reader mode; especially in properly data marked-up content.

Comment 1

[Aaron Train [:aaronmt]]

Which build of Firefox do you see this with?

Comment 2

[marcosmesser]

(In reply to Aaron Train [:aaronmt] from comment #1)
> Which build of Firefox do you see this with?

I've let it as x86_64? Sorry for the mistake.

Comment 3

[Lucas Rocha (:lucasr)]

Reader Mode overrides any page-specific style in order order to streamline the reading experience. So, maybe you want to propose justified text with hyphenation as the style for reader mode itself?

Ian, what do you think?

Comment 4

[Ian Barlow (:ibarlow)]

(In reply to Lucas Rocha (:lucasr) from comment #3)
> Reader Mode overrides any page-specific style in order order to streamline
> the reading experience. So, maybe you want to propose justified text with
> hyphenation as the style for reader mode itself?
> 
> Ian, what do you think?

I'd like to see how well hyphenation performs visually before making a call on this.

Comment 5

[marcosmesser]

Mozilla's hyphenation algorithm works really well if the lang meta tag was correctly set. 

I don't think that it should became the default style, but as it stands, for very few sites Reader Mode can be a downgrade from the original reading experience. 

Maybe inheriting this particular property would be a better solution for the time being.

Comment 6

[Lucas Rocha (:lucasr)]

Attachment: Use hyphening and justify alignment whenever possible in reader

Comment 7

[Lucas Rocha (:lucasr)]

If the lang attribute is set on the toplevel document element, we enable hyphening and justify alignment if we have the hyphen dict for the given language. Keep the default alignment otherwise.

Here's how it looks: https://dl.dropbox.com/u/1187037/h4.png

Ian, what do you think?

Comment 8

[Ian Barlow (:ibarlow)]

That sounds like a level of automation that would be a little confusing to our users.

"Why is this page justified, but not the other one I was just reading?"

The more I think about it, the more I think we should continue along with defaulting to left aligned for all articles, whether the original page defines justification or not, and provide settings for user to choose text alignment in the reader menu.

Now, the obvious drawback to this is that a user could potentially set text to be justified on a page that doesn't have the lang attribute applied, and their article won't read as well given the lack of hyphenation, but at least they will feel like they are in control, instead of Firefox making what appear to be arbitrary decisions on their behalf.

Comment 9

[Lucas Rocha (:lucasr)]

(In reply to Ian Barlow (:ibarlow) from comment #8)
> That sounds like a level of automation that would be a little confusing to
> our users.
> 
> "Why is this page justified, but not the other one I was just reading?"

Good point. Just wanted to submit the patch to get some discussion going.

> The more I think about it, the more I think we should continue along with
> defaulting to left aligned for all articles, whether the original page
> defines justification or not, and provide settings for user to choose text
> alignment in the reader menu.
> 
> Now, the obvious drawback to this is that a user could potentially set text
> to be justified on a page that doesn't have the lang attribute applied, and
> their article won't read as well given the lack of hyphenation, but at least
> they will feel like they are in control, instead of Firefox making what
> appear to be arbitrary decisions on their behalf.

The problem is that the hyphening process resolves around specific languages. You need to enable it for a specific language. This is why the patch I posted only enables hyphening if language is explicitly defined and supported.

Comment 10

[marcosmesser]

Ian,

you are completely right. As an user I think the Reader Mode goal is to provide a familiar and comfortable experience, and my suggestion would detract from that.

A setting for alignment in hyphenation with Lucas' patch would be perfect.

Comment 11

[Mark Finkle (:mfinkle) (use needinfo?)]

Comment on attachment 681501 [details] [diff] [review]
Use hyphening and justify alignment whenever possible in reader

>diff --git a/mobile/android/themes/core/aboutReader.css b/mobile/android/themes/core/aboutReader.css

>+.content-hyphen {
>+  text-align: justify;
>+  -moz-hyphens: auto;
>+  hyphens: auto;

drop the "hyphen" part since only -moz-hyphen is supported by mozilla

r+ on the approach. It seems like you might want to change things around though, based on the comments. So I'll just f+ this until we decide on the approach we want to take.

Comment 12

[BMO Automation]

We have completed our launch of our new Firefox on Android. The development of the new versions use GitHub for issue tracking. If the bug report still reproduces in a current version of [Firefox on Android nightly](https://play.google.com/store/apps/details?id=org.mozilla.fenix) an issue can be reported at the [Fenix GitHub project](https://github.com/mozilla-mobile/fenix/). If you want to discuss your report please use [Mozilla's chat](https://wiki.mozilla.org/Matrix#Connect_to_Matrix) server https://chat.mozilla.org and join the [#fenix](https://chat.mozilla.org/#/room/#fenix:mozilla.org) channel.