MozillaZine

Online PDF Font is White

User Help for Mozilla Firefox
zlaer
 
Posts: 283
Joined: June 29th, 2018, 11:11 am

Post Posted September 24th, 2020, 1:46 pm

Hi guys. When I open a pdf online the font is white and cant read it. But I can read it when I disable 'Allow pages to choose their own fonts, instead of your selections above' which is found in: settings > general > language & appearance > fonts & colors > advanced.

But I want to be able to read pdfs while enabling this setting. Is there a way around that?
.

Grumpus

User avatar
 
Posts: 12566
Joined: October 19th, 2007, 4:23 am
Location: ... Da' Swamp

Post Posted September 25th, 2020, 7:11 am

You might try changing your theme.
Doesn't matter what you say, it's wrong for a toaster to walk around the house and talk to you

zlaer
 
Posts: 283
Joined: June 29th, 2018, 11:11 am

Post Posted September 25th, 2020, 10:49 am

Grumpus wrote:You might try changing your theme.


Hi grumpus.. Sadly that didnt work.

Grumpus

User avatar
 
Posts: 12566
Joined: October 19th, 2007, 4:23 am
Location: ... Da' Swamp

Post Posted September 25th, 2020, 12:12 pm

Look in /tools/options/General/Language & Appearance and click the Colors button.
See if any adjustment there helps.
Record what was there before making a change
Doesn't matter what you say, it's wrong for a toaster to walk around the house and talk to you

jscher2000

User avatar
 
Posts: 11067
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted September 25th, 2020, 2:13 pm

Is this a PDF displayed in Firefox's built-in PDF viewer or a viewer hosted by the site itself?

The pdf.js viewer displays an HTML canvas for each converted page of the PDF, and positions a layer of *transparent* text in front of the canvas for use by Find in page and for text selection.

If you cannot see the text in the canvas on any PDF, perhaps there is something weird about how HTML canvases render in your Firefox?

zlaer
 
Posts: 283
Joined: June 29th, 2018, 11:11 am

Post Posted September 25th, 2020, 7:10 pm

Grumpus wrote:Look in /tools/options/General/Language & Appearance and click the Colors button.
See if any adjustment there helps.
Record what was there before making a change


Hi grumpus. Nope.. that doesnt work either. I tried as you asked by choosing 'always' in 'Override the colors specified by the page with your selections above.' I also tried ticking 'system colors'. But both of these didnt fix it.

zlaer
 
Posts: 283
Joined: June 29th, 2018, 11:11 am

Post Posted September 25th, 2020, 7:14 pm

jscher2000 wrote:Is this a PDF displayed in Firefox's built-in PDF viewer or a viewer hosted by the site itself?

The pdf.js viewer displays an HTML canvas for each converted page of the PDF, and positions a layer of *transparent* text in front of the canvas for use by Find in page and for text selection.

If you cannot see the text in the canvas on any PDF, perhaps there is something weird about how HTML canvases render in your Firefox?


Hi scher. The pdf is shown in Firefox's built-in PDF.

Btw, I tried to tweak the font color with css. But the font is semi-transparent like you said and not opaque. If you know how to get around this with css, I'd appreciate it.

And if possible, would you be able to help me change the background color of the pdf via css or other means?

Looking forward to your response

Grumpus

User avatar
 
Posts: 12566
Joined: October 19th, 2007, 4:23 am
Location: ... Da' Swamp

Post Posted September 26th, 2020, 7:52 am

Experiment Open this pdf 1040 using Firefox.
I'm thinking it may be the pdf you are trying to open.
Also, are you using formauto?
Doesn't matter what you say, it's wrong for a toaster to walk around the house and talk to you

jscher2000

User avatar
 
Posts: 11067
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted September 26th, 2020, 1:03 pm

zlaer wrote:Btw, I tried to tweak the font color with css. But the font is semi-transparent like you said and not opaque. If you know how to get around this with css, I'd appreciate it.

And if possible, would you be able to help me change the background color of the pdf via css or other means?

I am not aware of a way to use CSS to color a canvas, but you can darken it in general.

While you have the PDF viewer open with a PDF displayed, you can experiment in the Style Editor (Shift+F7). Click the + button above the list of style sheets to create a new one and try this:

Code: Select all
.textLayer {
  opacity: 1 !important;
}
.textLayer > span {
  color: #008 !important;
}
canvas {
  filter: brightness(0.8) !important;
}

zlaer
 
Posts: 283
Joined: June 29th, 2018, 11:11 am

Post Posted September 26th, 2020, 6:50 pm

Grumpus wrote:Experiment Open this pdf 1040 using Firefox.
I'm thinking it may be the pdf you are trying to open.
Also, are you using formauto?


Hi grumpus. That pdf link displays well. But other pdfs dont display at all as I've mentioned. The only way to get those pdfs displaying with no problem is by enabling 'Allow pages to choose their own fonts, instead of your selections above.' But I wish not to do this cuz I run a global css with desired code to render all fonts as arial.

Whats formauto?

.

zlaer
 
Posts: 283
Joined: June 29th, 2018, 11:11 am

Post Posted September 26th, 2020, 6:54 pm

jscher2000 wrote:
zlaer wrote:Btw, I tried to tweak the font color with css. But the font is semi-transparent like you said and not opaque. If you know how to get around this with css, I'd appreciate it.

And if possible, would you be able to help me change the background color of the pdf via css or other means?


I am not aware of a way to use CSS to color a canvas, but you can darken it in general.

While you have the PDF viewer open with a PDF displayed

Code: Select all
.textLayer {
  opacity: 1 !important;
}
.textLayer > span {
  color: #008 !important;
}
canvas {
  filter: brightness(0.8) !important;
}


I've tried your code to darken it. But I dont like it since I want the background dark and font white. Thanks anyway.

.

jscher2000

User avatar
 
Posts: 11067
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted September 26th, 2020, 9:38 pm

zlaer wrote:I dont like it since I want the background dark and font white. Thanks anyway.

What? I thought you were complaining that the font was white. That's the subject of this thread.

So just change the color then. #008 is dark blue, change that to the word white or the code #fff.

Happy?

zlaer
 
Posts: 283
Joined: June 29th, 2018, 11:11 am

Post Posted September 27th, 2020, 10:42 am

jscher2000 wrote:
zlaer wrote:I dont like it since I want the background dark and font white. Thanks anyway.

What? I thought you were complaining that the font was white. That's the subject of this thread.

So just change the color then. #008 is dark blue, change that to the word white or the code #fff.

Happy?


Hi jscher. Excuse the typo. I meant the background isnt dark enough but I can play with the code to get it dark enough. The code is good. But theres no way to save this css in stylus. Any ideas?

jscher2000

User avatar
 
Posts: 11067
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted September 27th, 2020, 11:48 am

zlaer wrote:I meant the background isnt dark enough but I can play with the code to get it dark enough. The code is good. But theres no way to save this css in stylus. Any ideas?

If you make the background darker using the brightness filter, you won't be able to see the images very well. Maybe put a black background behind the text instead.

Code: Select all
[mozdisallowselectionprint] .textLayer {
  opacity: 1 !important;
}
[mozdisallowselectionprint] .textLayer > span {
  color: #fff !important;
  background-color: #000 !important;
}
[mozdisallowselectionprint] canvas {
  filter: brightness(0.8) !important;
}

You do have to use a userContent.css file for this because extensions cannot inject content scripts into the built-in PDF Viewer. http://kb.mozillazine.org/UserContent.css

zlaer
 
Posts: 283
Joined: June 29th, 2018, 11:11 am

Post Posted September 27th, 2020, 12:35 pm

jscher2000 wrote:
zlaer wrote:I meant the background isnt dark enough but I can play with the code to get it dark enough. The code is good. But theres no way to save this css in stylus. Any ideas?

If you make the background darker using the brightness filter, you won't be able to see the images very well. Maybe put a black background behind the text instead.

Code: Select all
[mozdisallowselectionprint] .textLayer {
  opacity: 1 !important;
}
[mozdisallowselectionprint] .textLayer > span {
  color: #fff !important;
  background-color: #000 !important;
}
[mozdisallowselectionprint] canvas {
  filter: brightness(0.8) !important;
}

You do have to use a userContent.css file for this because extensions cannot inject content scripts into the built-in PDF Viewer. http://kb.mozillazine.org/UserContent.css



Hi jscher. Appreciate the follow up. I deleted this piece of code below from your code cuz it made the pdf look weird:

Code: Select all
[mozdisallowselectionprint] .textLayer > span {
  color: #fff !important;
  background-color: #000 !important;
}


So now it looks better. I'll fidget a bit to darken the background just a little not too much as per your suggestions. Appreciate it a lot dude.

Return to Firefox Support


Who is online

Users browsing this forum: Bing [Bot], Google [Bot] and 5 guests