Prevent User From Changing Font Size in FireFox

[crjunk]

First, let me say that I know that doing something like preventing the
user from changing the font size is never a good thing from a usability
standpoint.

Let me explain why I'm trying to do this. I'm trying to recreate an
online payment invoice that looks very similar to the hard copy invoice
we mail out to our customers. The user will be able to print out this
invoice from their web browser and mail it in along with their payment.
The web browser printout needs to be similar in size to the invoice we
mail out. I would prefer to create the invoice as a PDF for the user,
but because of deadline time constraints, I do not have this luxury.

I have found examples on how to limit the size of text in IE, but this
solution does not work in FireFox. Is there a way to "lock" the size
of text in Fireox?

Thanks,
CR Junk

 

[Roy Schestowitz]

First, let me say that I know that doing something like preventing the
user from changing the font size is never a good thing from a usability
standpoint.

Let me explain why I'm trying to do this. I'm trying to recreate an
online payment invoice that looks very similar to the hard copy invoice
we mail out to our customers. The user will be able to print out this
invoice from their web browser and mail it in along with their payment.
The web browser printout needs to be similar in size to the invoice we
mail out. I would prefer to create the invoice as a PDF for the user,
but because of deadline time constraints, I do not have this luxury.

I have found examples on how to limit the size of text in IE, but this
solution does not work in FireFox. Is there a way to "lock" the size
of text in Fireox?

Thanks,
CR Junk

I don't think you can do that and I think you must never force fonts to have
a fixed size. This will stir up an outrage among people whose sight is
poorer than yours. Some seniors I know prefer Firefox because of the
powerful font scaling support (SHIFT accelarator and CTRL+-). Firefox gives
them the 'power' to read pages even when the Web developer is overly
adamant.

If you want to generate PDF's on-to-fly, you have a flexible package that
you can use. It took me only an hour or two to make an HTML->PDF feature
work.

http://schestowitz.com/Weblog/archives/2005/07/12/wordpress-and-pdf/

The package is widely used in the Open Source community. Since you can never
fight a browser that puts the user in control, you may wish to just add a
friendly warning that discourages users from changing the default font
size. Also don't forget that pages will be rendered differently on
different platforms, browsers and devices.

Roy

 

[Will A]

First, let me say that I know that doing something like preventing the
user from changing the font size is never a good thing from a usability
standpoint.

Let me explain why I'm trying to do this. I'm trying to recreate an
online payment invoice that looks very similar to the hard copy invoice
we mail out to our customers. The user will be able to print out this
invoice from their web browser and mail it in along with their payment.
The web browser printout needs to be similar in size to the invoice we
mail out. I would prefer to create the invoice as a PDF for the user,
but because of deadline time constraints, I do not have this luxury.

I have found examples on how to limit the size of text in IE, but this
solution does not work in FireFox. Is there a way to "lock" the size
of text in Fireox?

Thanks,
CR Junk

(First post, might be getting in over my head, but here goes.)

Try using a separate print-media stylesheet, with font sizes in pixels:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

While the font size can also be changed there, using Print Preview, I
doubt many people will do so.

 

[Roy Schestowitz]

(First post, might be getting in over my head, but here goes.)

Try using a separate print-media stylesheet, with font sizes in pixels:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

While the font size can also be changed there, using Print Preview, I
doubt many people will do so.

I have just put this to the test under Firefox. The change of stylesheet to
a printer-friendly one will not affect the selected font size/focus. If the
user got the settings to suit short-sightendness, for example, not even the
alternative stylesheet will stand in his/her way. Probably only a browser
hack will do the trick.

Roy

 

[Neredbojias]

With neither quill nor qualm, (e-mail address removed) quothed

First, let me say that I know that doing something like preventing the
user from changing the font size is never a good thing from a usability
standpoint.

Let me explain why I'm trying to do this. I'm trying to recreate an
online payment invoice that looks very similar to the hard copy invoice
we mail out to our customers. The user will be able to print out this
invoice from their web browser and mail it in along with their payment.
The web browser printout needs to be similar in size to the invoice we
mail out. I would prefer to create the invoice as a PDF for the user,
but because of deadline time constraints, I do not have this luxury.

I have found examples on how to limit the size of text in IE, but this
solution does not work in FireFox. Is there a way to "lock" the size
of text in Fireox?

You can make the font size the same size *relative to the page size*
using javascript. Works in Mozilla, IE, etc. Here's an (old) example:

http://www.neredbojias.com/alpha/rextex.html

 

[dorayme]

I don't think you can do that and I think you must never force fonts to have
a fixed size. This will stir up an outrage among people whose sight is
poorer than yours. Some seniors I know prefer Firefox because of the
powerful font scaling support (SHIFT accelarator and CTRL+-). Firefox gives
them the 'power' to read pages even when the Web developer is overly
adamant.

If you want to generate PDF's on-to-fly, you have a flexible package that
you can use. It took me only an hour or two to make an HTML->PDF feature
work.

http://schestowitz.com/Weblog/archives/2005/07/12/wordpress-and-pdf/

The package is widely used in the Open Source community. Since you can never
fight a browser that puts the user in control, you may wish to just add a
friendly warning that discourages users from changing the default font
size. Also don't forget that pages will be rendered differently on
different platforms, browsers and devices.

Roy

Would there not be a way to simply fix the font size in a stylesheet for
printing only while yet leaving the screen image free to be seen at whatever
font size the user finds comfortable?

dorayme

 

[Roy Schestowitz]

Would there not be a way to simply fix the font size in a stylesheet for
printing only while yet leaving the screen image free to be seen at
whatever font size the user finds comfortable?

dorayme

I would know the answer because I almost never print anything. I imagine the
printer will receive the input in a WYSIWYG fashion, so if print.css is
selected and displayed on the screen, problems will arise. I don't know
what will happen if the browser or O/S is configured to choose print.css
'behind the scenes'.

Neredbojias actually pointed out a good solution that I hadn't thought of.
From experience, however, even scaling fonts based on the window
(technically speaking, _visible frame_ rather, which excludes toolbars and
window decorations) size is not something you can rely on. It does
/roughly/ the right thing and I don't know how many browsers support it.

Roy

 

[Adrienne]

Would there not be a way to simply fix the font size in a stylesheet
for printing only while yet leaving the screen image free to be seen at
whatever font size the user finds comfortable?

@media screen {
body {font-size:100%}
}
@media print {
body {font-size:10pt}
}

 

[wayne]

dorayme wrote:




I would know the answer because I almost never print anything. I imagine the
printer will receive the input in a WYSIWYG fashion, so if print.css is
selected and displayed on the screen, problems will arise. I don't know
what will happen if the browser or O/S is configured to choose print.css
'behind the scenes'.

Neredbojias actually pointed out a good solution that I hadn't thought of.
From experience, however, even scaling fonts based on the window
(technically speaking, _visible frame_ rather, which excludes toolbars and
window decorations) size is not something you can rely on. It does
/roughly/ the right thing and I don't know how many browsers support it.

Roy

different css styesheets do work! Even in IE. This is what I use:

<link rel="stylesheet" type="text/css" href="styles/main.css"
media="screen" />
<link rel="stylesheet" type="text/css" href="styles/print.css"
media="print" />

 

[hyweljenkins]

I would prefer to create the invoice as a PDF for the user,

but because of deadline time constraints, I do not have this luxury.

http://www.fpdf.org/ - takes about an hour to create a PDF file with
this and PHP. Probably far less time that you've wasted trying to
block text size changes.