Skip to content

Instantly share code, notes, and snippets.

@diegodlh
Last active September 21, 2023 20:11
Show Gist options
  • Save diegodlh/a899e92712a39fc13ec39ef1f3333284 to your computer and use it in GitHub Desktop.
Save diegodlh/a899e92712a39fc13ec39ef1f3333284 to your computer and use it in GitHub Desktop.
How to see text selected in pdf files with pdf.js?
Sometimes, text that can be selected in pdf files (text overlay) does't match exactly the text as it is shown in the canvas layer. As a result, if one wants to select some text (for copy-pasting, for example) it is difficult to say if one has selected the right characters.
Here I show one way to see the text selected using pdf.js, the pdf reader that is used, for example, in Firefox.
1) Find the path to your profile directory: In Firefox, press Tab to see the menu bar, go to Help > Troubleshooting information. Click "Open Directory" next to "Profile directory".
2) Create a folder named "chrome" in your profile folder and a userContent.css file inside.
3) Write this in the userContent.css file that you created, and save it:
@-moz-document regexp('.*\.(p|P)(d|D)(f|F)') {
.textLayer ::selection {
color: white;
}
}
4) Go back to Firefox, go to about:config, look for toolkit.legacyUserProfileCustomizations.stylesheets, and change it to true.
5) Restart your browser.
That's it! Now the text selected should show white in pdf.js. You can choose another color by changing the color line in the userContent.css file above.
Sources:
https://www.reddit.com/r/firefox/comments/77rh0l/how_do_i_customize_the_appearance_of_pdfjs_using/
https://superuser.com/questions/318912/how-can-i-override-the-css-of-a-site-in-firefox-with-usercontent-css
http://kb.mozillazine.org/UserContent.css
https://www.ghacks.net/2019/05/24/firefox-69-userchrome-css-and-usercontent-css-disabled-by-default/
https://userstyles.org/styles/147206/firefox-pdf-viewer-pdf-js-edge-style
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment