Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to override the minumum font size in webkit browsers?

I am rendering tiny text on a canvas instance and it works as expected on Firefox 4, but on Chrome and Safari the font renders using the minimum font size set in these browsers, which is already at its minimum and can't be lowered through the UI, (which looks like a 6px font size) but it is still too big for what I want to accomplish.

The code I am using to print the font is similar to the following, in case it might be useful:

ctx.font = '4px Monospace';
ctx.fillText("Any text", 0, 10);

So, is it possible at all to override the minimum font size settings?

Update: I know a text is not readable at 4px, but that's not the point of the question. I don't need it to be readable at all, as a matter of fact.

Update 2: On Safari this solution works, but it still doesn't work in Chrome.

Thanks.

like image 343
Sergi Mansilla Avatar asked Nov 04 '22 20:11

Sergi Mansilla


1 Answers

You could try using a bigger font and scaling the context:

ctx.font = '8px Monospace';
ctx.save();
ctx.scale(0.5, 0.5);
ctx.fillText("Any text", 0, 20);
ctx.restore();

Remember to keep the scaling in mind when specifying the position of your text.

This could easily reduce the graphics quality of the text, but at that size it will be pretty unreadable anyway.

like image 116
Joachim Sauer Avatar answered Nov 09 '22 12:11

Joachim Sauer