Search Support

How to invert colors in the embedded pfd reader? (A dyslexic-friendly setting)

  • 5 replies
  • 1 has this problem
  • 3 views
  • Last reply by cor-el

more options

I am a dyslexic (and die-hard) Firefox user. Along the course of the years, I found out that inverting the text-background colors is a good practice to reduce the eye-straining and increase my reading speed.

To achieve this in Firefox, I installed "Dark Background Light Text" add-on and it I used to work out extremely good. However, in June 2018 (Firefox 61) this add-on lost the priviledge to operate in the embedded PDF viewer. This is extremely painful (considering that on average I open 40-50 PDF per week), and I often I have to download/open the documents outside Firefox. This often turns out to be a disrupting process, that makes me lose focus when swapping back and forth between the PDF viewer, my IDE and the browser.

I don't know whether there is a way to activate this feature and I think I made a couple of requests to implement it, but, as of now, I've never received any answer. What makes things worse the Firefox's PDF viewer is the __only__ viewer that doesn't support this feature natively. Is there a way to enable this in Firefox? (I could be as desperate as to try to volunteer to implementing it in the code myself)

Please, don't leave my support request unanswered any longer.

Attached screenshots

Chosen solution

Here is a bookmarklet that works as a toggle:

javascript:/*PDF - toggle filter invert*/(function(){var L='style_PDFI',S='#viewerContainer>#viewer.pdfViewer>.page{filter: invert(100%)}',SS,E=document.querySelector('style[id="'+L+'"]');if(E){SS=E.disabled;E.disabled=(SS==true)?false:true}else{SS=document.createElement('style');SS.setAttribute('type','text/css');SS.id=L;SS.innerHTML=S;document.querySelector('head').appendChild(SS);}})()

It looks better if I select all the text as that makes the text color yellow.

You can modify the bookmarklet to enable/disable the above posted style to override the style rule added via userContent.css.

javascript:/*PDF - toggle filter unset*/(function(){var L='style_PDFU',S='#viewerContainer>#viewer.pdfViewer>.page{filter:unset!important}',SS,E=document.querySelector('style[id="'+L+'"]');if(E){SS=E.disabled;E.disabled=(SS==true)?false:true}else{SS=document.createElement('style');SS.setAttribute('type','text/css');SS.id=L;SS.innerHTML=S;document.querySelector('head').appendChild(SS);}})()
Read this answer in context 👍 0

All Replies (5)

more options

Firefox can't do that as far as I know, so maybe best is to use an external PDF Viewer. Evince can do this via the "Ctrl+I" command.

Helpful?

more options

I know that Firefox can't do that. My question is why? How can it be changed? Where should I put my hands on to hardcode it?

My screenshot shows exactly the solution you are talking about. So, for what concerns me, that's not a solution but the problem per se.

Every open source reader that I am using other than the Firefox embedded reader, implemented this option years ago. Maybe, it was time Firefox added it as well.

Helpful?

more options

This isn't straightforward as reversing all colors can images look weird, but this might be necessary to some background images (colors).

See also this issue (some others are duped to this one): Unable to change the text and background colors. · Issue #2071

Helpful?

more options

Hi ninoCan, Firefox treats the PDF Viewer as a part of the browser, which restricts what add-ons can do -- basically, they can't touch the document.

There is a way to apply an invert filter to the PDF viewer using a custom style rule in a userContent.css file. This is a bit of an all-or-nothing setting, so in the rare case of a light-on-dark PDF, it will be inverted to dark-on-light. To counteract that, you would need to inject an overriding style rule.

So if you have some time to experiment, like 15 minutes, this is how you would do it:

Set up Invert Filter in userContent.css

This assumes you do not already have a userContent.css file. If you do already have a working userContent.css file, you just need to add the rule under (A) to your file.

(A) Select and copy the following style rule code

/*** Invert PDF Viewer ***/
#outerContainer > #mainContainer > #viewerContainer > #viewer > .page {
  filter: invert(100%);
}

(B) Generate and download a userContent.css file

Open the following page and paste the above rules into the editor, replacing the sample rule:

https://www.userchrome.org/download-userchrome-css.html

Then change the file name selection to userContent.css and click "Generate CSS File". Save the userContent.css file to your computer. (See first attached screenshot)

Use the downloads list on the toolbar to open the downloads folder directly to the new userContent.css file. (See second attached screenshot)

Minimize (don't close) that File Explorer (Mac: Finder; Linux: ?) window for later reference.

(C) Create a new chrome folder in your profile folder

The following article has the detailed steps for that (#1, #2, and I recommend #3)

https://www.userchrome.org/how-create-userchrome-css.html

I have videos for Windows and Mac in case the text is not clear.

(D) Move the userContent.css file you generated in Step B into the chrome folder you created in Step C

You could copy/paste, drag/drop, etc.

(E) Set Firefox to look for userContent.css at startup -- see step #6 in the above article.

The next time you exit Firefox and start it up again, it should discover that file and apply the rules to the PDF viewer.

Success?


Set Up Bookmarklet to Undo (Override) the Invert Filter

(A) Select and copy the following script code

javascript:r='#viewerContainer > #viewer > .page {filter: unset !important;}'; s=document.createElement('style'); s.appendChild(document.createTextNode(r)); document.body.appendChild(s); void 0;

(B) Create the bookmarklet

  • Right-click the Bookmarks Menu or Bookmarks Toolbar near where you want to add the bookmarklet
  • Click New Bookmark
  • Paste the script code into the Location field
  • Type a name in the Name field, like UnvertPDF
  • Click the Add button

When you want to override the invert filter, click the bookmarklet button.

Modified by jscher2000

Helpful?

more options

Chosen Solution

Here is a bookmarklet that works as a toggle:

javascript:/*PDF - toggle filter invert*/(function(){var L='style_PDFI',S='#viewerContainer>#viewer.pdfViewer>.page{filter: invert(100%)}',SS,E=document.querySelector('style[id="'+L+'"]');if(E){SS=E.disabled;E.disabled=(SS==true)?false:true}else{SS=document.createElement('style');SS.setAttribute('type','text/css');SS.id=L;SS.innerHTML=S;document.querySelector('head').appendChild(SS);}})()

It looks better if I select all the text as that makes the text color yellow.

You can modify the bookmarklet to enable/disable the above posted style to override the style rule added via userContent.css.

javascript:/*PDF - toggle filter unset*/(function(){var L='style_PDFU',S='#viewerContainer>#viewer.pdfViewer>.page{filter:unset!important}',SS,E=document.querySelector('style[id="'+L+'"]');if(E){SS=E.disabled;E.disabled=(SS==true)?false:true}else{SS=document.createElement('style');SS.setAttribute('type','text/css');SS.id=L;SS.innerHTML=S;document.querySelector('head').appendChild(SS);}})()

Modified by cor-el

Helpful?

Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.