Feature request: Right-to-Left (RTL) support

omnivore-app / omnivore

Omnivore is a complete, open source read-it-later solution for people who like reading.

https://omnivore.app

GNU Affero General Public License v3.0

12.35k stars 623 forks source link

Feature request: Right-to-Left (RTL) support #3279

Open PandaBrrr opened 8 months ago

PandaBrrr commented 8 months ago

Texts in languages that are written right-to-left (Hebrew, Arabic, Persian, etc.) are currently displayed incorrectly. With close to a billion of speakers worldwide, this issue likely affects tens of millions of potential users.

There are two main issues that make reading RTL languages in LTR configuration difficult:

All text is aligned left when it should be aligned right (minor)
The order of words and sentences with LTR (e.g., English) words gets messed up (major)

Example

Original article:
Article in Omnivore

As you can see, the red line representing the first part of the sentence, gets broken in two in Omnivore, with the first half appearing before blue and green, and the second half after. It should be displayed unbroken before the two other parts of the sentence.

A solution to this issue would be greatly appreciated.

jacksonh commented 8 months ago

We've looked at this one a couple times and its a bit more work than initially expected. But going to try and get it out of the way now. I see a few distinct pieces we need to do:

add a direction property to library_item
in puppeteer-parse, the browser extension, and iOS try to detect direction. The reason it needs to be done here is we often don't save the <body tag with items
Update reader to fetch and set this property
Update the updatePage API to allow setting this property

PandaBrrr commented 8 months ago

This would be the best gift for 2024 for many users like myself! Fingers crossed.

PandaBrrr commented 7 months ago

@jacksonh I just thought of a temporary quick workaround. Would it be possible to add an RTL display option per article? Similar to justify text or changing the color of the display.

jacksonh commented 6 months ago

@PandaBrrr sorry i missed your comment before. That's exactly what I am starting to do here: https://github.com/omnivore-app/omnivore/pull/3619

Basically our next steps are:

Allow user to switch to RTL mode (its actually set as a cookie value, so it will always be the last set value)
Roll out a change to start detecting the page's RTL value when parsing (sadly this requires extension and iOS updates also)
Start setting the value based on the parsed page value.

I am also wondering about changes to the library view, it might be tricky to mix RTL and LTR titles in the library, along with summaries.

PandaBrrr commented 6 months ago

@jacksonh That's brilliant, thank you! Even having just the switch would be a huge QoL improvement, but automatic detection would be sweet af.

I dug up my old Pocket account to see how they do it:

Title
Source
Reading time
Picture (duh)
Tags

I don't see any summary in the mobile app, but I can check how it works in the web viewer when I'm back home.

jacksonh commented 6 months ago

oh funny, so they do RTL the title but left everything else LTR?

PandaBrrr commented 6 months ago

@jacksonh Yup. It works well on a small-ish mobile screen. IIRC, they do it similarly in the web client.

jacksonh commented 6 months ago

@PandaBrrr the code to detect RTL isn't live yet but you can manually enable it now on web by going into the reader settings (the thing where you set the font), going to advanced, and enabling right to left text. Unfortunately this will set it for all articles at the moment. You'll also have to do a refresh of your browser after enabling it.

PandaBrrr commented 6 months ago

@jacksonh That's brilliant, thank you!

I'm testing it now.

jacksonh commented 6 months ago

Thanks, i did some testing for library changes to support too. The detection changes might take a bit more as it requires extension updates and mobile app updates.

kbdragon commented 3 months ago

@jacksonh Hi Jackson, is there any update on implementing the automatic encoding detection? It sometimes works when I use the extension on android, but doesn't work on the web.