basshelal/wudooh

Browser extension that allows Arabic script modifications for clarity and customization

Wudooh وضوح

Wudooh (clarity in Arabic and Persian) is a simple browser extension that makes reading Arabic script text clearer and more pleasant.

Wudooh allows you to customize the way Arabic script text is displayed on your browser by allowing you to change font, font size, line height as well as many more advanced features such as whitelisting, custom site settings and even custom fonts!

This is not just for Arabic, but for any Arabic script, meaning this can work for Persian, Urdu and any other Arabic script language.

Read more about the Wudooh project including details, features, guides and FAQs in the project's GitHub wiki.

wudooh's Issues

Google Docs with Arabic text are unaffected by the extension.

I'm not sure why, but I used to be able to have Wudooh increase the size of Arabic letters in Google Docs, and now it seems to do nothing on those pages. It makes notetaking very difficult, is there any way this could be fixed? On Firefox, if that matters.

Create Version 2.0 marketing materials

All the non technical stuff we need to be ready for version 2.0 deployment to all the stores.
This includes:

• Website pages & guides
• Updated Readme
• Promotional Images
• Updated store description

The website should include a "What's new in version 2.0" page which will be launched immediately after users update. It should also have guides on the features especially the complex ones like Import Export and Custom Fonts.

The above is done all in the wiki 😁

Add Opera and Edge support

Opera uses a similar extensions API to Chrome so it should be pretty straightforward. However Opera does not support chrome.storange.sync according to their website so we'll have to use chrome.storage.local instead.

This is only useful in that we can say we support 3 browsers instead of 2, the number of users that this will add is negligible. Basically it's nice marketing and who knows maybe those 4 guys who use Opera as their daily browser might be grateful.

font face and size do not update automatically on new page load

Behavior:

1. Set font face and size and observe page rendering as expected.
2. Browse to a new page via any link.
3. Font and size settings are retained by UI but new page's font face and font size are not updated.
   Expected behavior: All pages during a browsing activity must automatically update font face and size.

.

Add Internationalization for Arabic and Farsi (Persian)

Add translations for the popup.html UI elements and for description.txt into:

• Arabic
• Persian
• Urdu

Minor bug: Any open-brackets immediately after Arabic text are treated as Arabic text.

See for instance this image:

The open-parenthesis after "وُضُوح", despite containing English text, is marked by the extension as Arabic text and thus enlarged.

This appears to occur on Chrome (v86.0.4240.198, 64-bit), Windows 10.

To reproduce:

1. Have the extension installed on Chrome.
2. Set font size to 157%, line height to 128%, and font to "سهل زسخ".
3. View any page where an open-parenthesis containing non-Arabic text immediately follows Arabic text (e.g. this one).
4. The open-parenthesis will be the same size as the Arabic text before and considerably larger than the following close-parenthesis.

(Obviously this is pretty low-priority, but I thought I should report it for documentation's sake. Still, I'm enjoying the extension nonetheless and I'm finding any Arabic easier to read now from the increased size and non-system font.)

Update Firefox version to 2.x

Just in case I foget to do this once I come back to this project.

Firefox is a bitch, but we still need to at least release the update for the 12 users on that god awful mess of a browser, even if it doesn't behave exactly the same as Chromium.

Convert all pages content into GitHub wiki

GitHub wiki is easier to maintain and write!
Let's keep things simple for users and easy for ourselves!
HTML is weird, let's make the website be just a landing page to download the extension and all the features, guides and documentation in the GitHub wiki.
There's not much of a reason to use the website since really all pages will just be text with some images.
Simplicity is beauty, let's simplify!
I might change my mindset later, but I'm not a front end developer (yet) and Markdown is much easier.

Remove the Wudooh updated page

Someone complained it keeps launching on startup on their version, while this really is a "them" problem, I do agree that it's kind of not an amazing thing to have and users should just get the latest version without being told. Keep it simple stupid!

Fix the YouTube text not updating issue

See this, I'm thinking we might be able to solve this by adding another attribute to each affected node called "oldValue" where we can store the old value before update.

This is the exact function, updateNode where we updating a node.

The main problem though is we'd need a callback of some sort to know when to change it back to it's old value, we have to look into that part, but if we figure something out then this is pretty much solved.

Allow user to upload custom fonts

Allow user to add custom fonts.

Add export and import settings

Hey,
Thanks for this great extension !
I have a question about the white listing functionality. Is it exportable in case of wanting to change the browser?

Google Docs cursor is broken by Wudooh during editing.

I'm editing mixed English and Arabic in a single Google Doc - when they appear in the same sentence, the visual location of the cursor becomes offset from where the cursor actually is, making editing more difficult.

I believe this has to do with how the size of the Arabic font is changed. Is there a feasible solution to this?

Thank you again for your work!

Allow user to override global settings with site specific settings

So allow the user to check a checkbox or toggle switch to make the currently shown settings only apply to the current site (hostname) so that global site settings can be different from settings for YouTube for example. This shouldn't be too hard but will require some more storage.

Different settings for different languages

Allow the user to have different settings for each language, this makes things more accessible and customizable for those who read multiple Arabic script languages.

An example is Naskh for Arabic and Nastaliq for Farsi.

The detection should be done per node so that a reddit or twitter feed with both languages will show Farsi in Nastaliq and Arabic in Naskh.

The language detection is done for us courtesy of chrome.i18n.detectLanguage.

Careful though, the interactions between settings becomes quite complex with this, so we need to think carefully about this, with a good Settings page and default settings option for all languages or when detection fails (which it does sometimes).

I don't think we be able to release this in version 2.0 however.

Update popup UI to look more modern and pretty

Urdu & Mehr Nastaliq, both fonts get messed up

Following is the picture: of URDU Font

Following is the picture of NOTO NASTALIQUE Font

Following is the picture of MEHR NASTALIQUE Font

Text in all fonts jump over each other.

I would suggest adding "Jameel Noori Nastalique" Font

Finish GitHub.io static page

Should we consider creating a github.io page that includes proper SEO?

Add number remapping feature

This might not be exactly a core feature but I think it is an excellent add-on. Almost all Maghreb readers, myself included, find it difficult to understand the Farsi numbering system used by our middle eastern cousins.

A feature that would re-render those numbers on the screen as Arab numerals would be awesome.

I could see the code traversing the dom structure, getting the inner text and maybe perform a simple replace regex but I'm not sure if that is the best approach as it actually changes the source code the page.

I would deem this as low priority.

Add Mehr Nastaleeq font

In my humble opinion this is the most beautiful Nastaliq font for the web, it would be great to use it with this extension! There is a "nastaleeq" extension which adds this font for some sites like BBC Urdu: https://chrome.google.com/webstore/detail/nastaleeq/oddbjmjgpaofommagnbfednbdifaakfb

I think the website for the font is here: http://csalt.itu.edu.pk/urdufont/

Extension not working on content inside of an Iframe

platform: mozilla 111.0.1
didnt check on other browsers
noticed this on youtube stream live chat
while the extension works over all other arabic text in the website it does not on the stream live chat


the last important note
poping out the chat does indeed fix the issue which should mean its an Iframe issue

i dont have any other website to check if its truly Iframe issue or just youtube odd behavior

Change all Array usages in the storage to use Set instead

Set is better because it does the guesswork in duplicate checking for us.

We should use it for both whitelisted and customSettings.

For whiteListed we need to add a migration on the background script when the extension is updated so that users don't lose their current data.

Test this well please!

Add support for macOS Safari

Wudooh is a great extension and I think support should be added for the Safari browser on macOS.

How to use Wodooh?

Download all fonts and use the extension-local fonts instead of CDN hosted fonts

Release Edge Chromium Version

Again in case I forget this once I come back to this project.

Edge Chromium is becoming way popular, and Wudooh should be available natively on the Edge store and not have to make users go to the Chrome Web Store. On our end, we need not change anything, just test that it works and deploy, should be fairly straightforward fingers crossed.

Arabic Google Search infinite reloading bug

Replicate by:

• New Incognito Window (Wudooh on!)
• Google.com
• Change region to Arabic region (QA for example) (do this at bottom right Settings -> Search Settings)
• Change language to Arabic (this is important, English Google is fine)
• Search anything
• Watch the page reload forever

I have no idea what is causing this, highly highly likely it is on Google's end and not ours but we still need to know what is causing this.

The only solution is to whitelist or turn off Wudooh, delaying the update still breaks it.

I am curious if Google can actually detect the update function changing stuff on the page and doesn't like it and causes a refresh maybe as a security thing or something as many garbage extensions will actuall insert ads into Google search results even if you have adblock on (seen this firsthand). This is troubling but I'll need to explore further, if it really is the case then we need to change to an update by changing styling method and not update by adding Nodes or HTMLElements.

Look at #7 again because we explored the advantages and issues of such a method, mainly when a HTMLElement has both text to be updated (Arabic) and text to be ignored within it. The best looking way is the current, make a new HTMLElement for the text to be updated and set its styling but the ignored text remains the same. Thus the non-Arabic text is identical and only the Arabic text appears differently.

Absolute worst case, we make a switch for both methods with users changing methods as they wish and we ship an optimal list of them. This means adding a new element to the database. But this would technically kind of fix #7 but not in the ideal way but would also significantly complicate the extension as users now have to understand how the extension works. Inconvenient, but again what's worse is that it's all not ideal, it's just a fix but not a solution.

While I hate having to accomodate for other site's weird behaviors, in this case I don't mind as much because I know the reason Google are doing this and I completely understand it and kind of support it if I am correct.

Extension is free but now our thousands of users have to see shitty ads on their Google search results (which Google themselves have no idea about) which we'll make (probably illegal and definitely unethical) money from. Imagine how far this could go, and all from a shitty extension that downloads videos or does YouTube analytics or whatever in which case...

Fuck you you filthy capitalist human garbage dirty cunt companies who make things worse for everyone for a quick (and small) buck.

Indeed, money is the root of all evil.

Extract all UI strings into a `messages.json`

This is the first step of i18n in #3

I don't think there are too many strings in popup.html, the custom fonts page has a lot more long strings but because that's still beta we can leave it for now.

Clean up directory structure

Quality of life refactoring improvement, the main thing I may forget to do is to:
Move .js files into a separate directory dist for example and not push these to git to have a cleaner repo overall and easier build process

Adding a font for Uyghur, Kazakh, Kyrgyz

Hello, I would like to suggest adding ALKATIP Basma Tom font to Wudooh extention.

ALKATIP Basma Tom is a font very widely used in Xinjiang, China. It is used to display Arabic script for Uyghur, Kazakh and Kyrgyz.

The three scripts have approximately 12 million users inside and outside of China, which excludes Kazakh and Kyrgyz speakers who use Cyrillic script (such as in Kazakhstan and Kyrgyzstan).

The reason why this font is necessary is because other Arabic fonts do not properly render the intended shape of many alphabets, because the three language use orthography and spelling which are significantly different from Arabic, Persian, Urdu etc., and some of their characters is not supported by many major Arabic fonts. (for example ۆ ۈ ۉ ۅ ڭ ڭ)

Here are some additional explanations: https://telegra.ph/Uyghur-Kazakh-Kyrgyz-01-08

Here is a link in which you can find and download the font files, or I can send you the files directly upon request.

May peace be upon you!

App main view must remain opened until dismissed by user

Behavior: App main view closes immediately after the user sets font face and/or size.
Expected behavior: App main view must remain open until the user closes such view by clicking elsewhere on the page. User may choose font face or size multiple times until they settle on a choice.

Allow inputs and editables to be modified by Wudooh

Writing emails sucks asshole without Wudooh, the update by styling method fixes this (I literally did it in developer tools with like 2 CSS changes to an element).

We only really undid this from Huruf because update by adding breaks it but we don't need to use that method anymore here and instead just modify the styling.

There is however the issue of consistency, as in users need to know that what they're seeing in the input is because of Wudooh and the final result can be different.

Do not overestimate user's intelligence as I have recently sadly discovered.

Also, some inputs will allow for font and size changes to the text so we have to see how to work around that somehow, bit complicated to be honest but it's worth exploring definitely.