different style sheets for screen/printing?

[Geoff Cox]

Hello,

I publish some web pages using large fonts and would like to give the
user the opportunity to print the pages using a smaller font.

I believe that this is possible using different style sheets? I am not
clear how the user would select the different .css files?

Seems to be easier than having duplicate html files ...

Appreciate any help!

Cheers

Geoff

[Martin Honnen]

Geoff Cox wrote:

I publish some web pages using large fonts and would like to give the
user the opportunity to print the pages using a smaller font.

I believe that this is possible using different style sheets? I am not
clear how the user would select the different .css files?

There is no need for you to select a different CSS file, rather specify
the media in the <link> element
<link rel="stylesheet" media="screen" type="text/css" href="screen.css">
<link rel="stylesheet" media="print" type="text/css" href="print.css">

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Geoff Cox]

On Thu, 16 Oct 2003 12:09:29 +0200, Martin Honnen <ma*******@yahoo.de>
wrote:

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

Martin,

I'm a little lost here! I have added the above 2 lines using my 2
different .css files but when I go for print from the browser the
larger font text is printed ... Am I missing something here?!

Cheers

Geoff

[Martin Honnen]

Geoff Cox wrote:

On Thu, 16 Oct 2003 12:09:29 +0200, Martin Honnen <ma*******@yahoo.de>
wrote:

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

I'm a little lost here! I have added the above 2 lines using my 2
different .css files but when I go for print from the browser the
larger font text is printed ... Am I missing something here?!

I don't see anything wrong with the suggested lines.
Which browser are you using? Browsers like IE6/Win, Netscape 7 or Opera
7 should certainly support the stylesheet for print media, older
browsers like Netscape 4 don't support that.

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Beauregard T. Shagnasty]

Geoff Cox pounced upon this pigeonhole and pronounced:

On Thu, 16 Oct 2003 12:09:29 +0200, Martin Honnen <ma*******@yahoo.de>
wrote:

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

Martin,

I'm a little lost here! I have added the above 2 lines using my 2
different .css files but when I go for print from the browser the
larger font text is printed ... Am I missing something here?!

For each element in the screen css, you must have a corresponding element
in the print css, with a smaller size specified, at least for the elements
you want to be different.

h1 { font-size: 160%; } in the screen css

h1 { font-size: 140%; } in the print css

--
-bts
-This space intentionally left blank.

[Andreas Prilop]

On Thu, 16 Oct 2003, Geoff Cox wrote:

I publish some web pages using large fonts
If you mean that you specify a font size for BODY - don't do that!
and would like to give the
user the opportunity to print the pages using a smaller font.

Just let the reader decide about typeface and font size for BODY.

[Geoff Cox]

On Thu, 16 Oct 2003 14:09:44 +0200, Martin Honnen <ma*******@yahoo.de>
wrote:

Geoff Cox wrote:

On Thu, 16 Oct 2003 12:09:29 +0200, Martin Honnen <ma*******@yahoo.de>
wrote:

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

I'm a little lost here! I have added the above 2 lines using my 2
different .css files but when I go for print from the browser the
larger font text is printed ... Am I missing something here?!

I don't see anything wrong with the suggested lines.
Which browser are you using? Browsers like IE6/Win, Netscape 7 or Opera
7 should certainly support the stylesheet for print media, older
browsers like Netscape 4 don't support that.

You are quite riight ! I must have made an error somewhere.

Thanks

Geoff

[Tim]

Martin Honnen <ma*******@yahoo.de>

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

Geoff Cox <ge*******@blueyonder.co.uk> wrote:
I'm a little lost here! I have added the above 2 lines using my 2
different .css files but when I go for print from the browser the
larger font text is printed ... Am I missing something here?!

Those lines go into your HTML document, in the head section. Instead of
one stylesheet link, you're providing alternatives.

Alternatively, you could reference one style sheet in your HTML, and use
@ rules inside it, to do sections for different types of media.

A visit to the CSS specifications webpages would help you.

Such as here: <http://www.w3.org/TR/REC-CSS2/>

--
My "from" address is totally fake. (Hint: If I wanted e-mails from
complete strangers, I'd have put a real one, there.) Reply to usenet
postings in the same place as you read the message you're replying to.

[Geoff Cox]

On Thu, 16 Oct 2003 15:41:40 +0200, Andreas Prilop
<nh******@rrzn-user.uni-hannover.de> wrote:

On Thu, 16 Oct 2003, Geoff Cox wrote:

I publish some web pages using large fonts
If you mean that you specify a font size for BODY - don't do that!

Andreas,

the point here is that the person who is paying me wished the pages to
be made like this...they are to be read by some people with visual
impairment and I guess not all would be aware of how to change the
font themselves?

Cheers

Geoff

and would like to give the
user the opportunity to print the pages using a smaller font.

Just let the reader decide about typeface and font size for BODY.

[Geoff Cox]

On Fri, 17 Oct 2003 00:13:42 +0930, Tim <ad***@sheerhell.lan> wrote:

Martin Honnen <ma*******@yahoo.de>

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

Geoff Cox <ge*******@blueyonder.co.uk> wrote:

I'm a little lost here! I have added the above 2 lines using my 2
different .css files but when I go for print from the browser the
larger font text is printed ... Am I missing something here?!

Those lines go into your HTML document, in the head section. Instead of
one stylesheet link, you're providing alternatives.

Alternatively, you could reference one style sheet in your HTML, and use
@ rules inside it, to do sections for different types of media.

Tim,

I will follow this up. Thanks.

If I wish to allow the user to select which font size to print in, I
will need to provide a duplicate html page in the different font size?

css cannot cover this?

Geoff

A visit to the CSS specifications webpages would help you.

Such as here: <http://www.w3.org/TR/REC-CSS2/>

[Brian]

Geoff Cox wrote:

the point here is that the person who is paying me wished the pages to
be made like this...they are to be read by some people with visual
impairment and I guess not all would be aware of how to change the
font themselves?

So someone who is visually impaired has not already set a font-size to
something readable? How do they read any other pages?

--
Brian
follow the directions in my address to email me

[Thor Kottelin]

Geoff Cox wrote:

On Thu, 16 Oct 2003 15:41:40 +0200, Andreas Prilop
<nh******@rrzn-user.uni-hannover.de> wrote:

On Thu, 16 Oct 2003, Geoff Cox wrote:

I publish some web pages using large fonts
If you mean that you specify a font size for BODY - don't do that!

the point here is that the person who is paying me wished the pages to
be made like this...they are to be read by some people with visual
impairment and I guess not all would be aware of how to change the
font themselves?

People with visual impairment are one of the reasons *not* to screw with
font sizes.

Thor

--
http://thorweb.anta.net/

[Geoff Cox]

On Thu, 16 Oct 2003 15:58:37 GMT, Brian
<us*****@mangymutt.com.invalid-remove-this-part> wrote:

Geoff Cox wrote:

the point here is that the person who is paying me wished the pages to
be made like this...they are to be read by some people with visual
impairment and I guess not all would be aware of how to change the
font themselves?

So someone who is visually impaired has not already set a font-size to
something readable? How do they read any other pages?

You are probably right for most people ..

Geoff

[Brian]

Geoff Cox wrote:

If I wish to allow the user to select which font size to print in, I
will need to provide a duplicate html page in the different font size?
Heavens no!
css cannot cover this?

It can. In fact, done properly, it is the best way to handle font-size.

body {font-size: 100%}
/* sets the font size for the body element to 100% */
/* of the size the user has set in her or his browser */

h1 {font-size: 200%}
/* sets h1 element to twice the size of body text */

h2 {font-size: 150%}
/* sets h2 element to be 50% larger than body text */

h3 {font-size: 120%}
/* sets h3 element to be 20% larger than body text */
As others have said before, users are likely to be in one of two
groups: (1) those who have set their font size in their browser to
something that they like, and won't appreciate you changing it; and
(2) those who use the font-size set by the browser when it was
installed, and don't want to change it. For both groups, the only
sensible option is to always set the font-size of the body element to
100%. Set other elements to whatever size works given your size, but
always as a percent of the body element, that is, a percent of the
default size selected in the users' browsers.

hth

--
Brian
follow the directions in my address to email me

[Stan Brown]

In article <2b********************************@4ax.com> in
comp.infosystems.www.authoring.html, Geoff Cox
<ge*******@blueyonder.co.uk> wrote:

Hello,

I publish some web pages using large fonts and would like to give the
user the opportunity to print the pages using a smaller font.

I believe that this is possible using different style sheets? I am not
clear how the user would select the different .css files?
Good news! If you set it up right, the user doesn't have to do
anything. The key, as you suspect, is to link to separate screen and
print style sheets. (You could also use @media in a single style
sheet, but browser support is less good.)

Here's how I do it: <link rel="stylesheet" type="text/css" href="../screen.css" media="screen, projection">
<link rel="stylesheet" type="text/css" href="../print.css" media="print">
You can see this in action at a page like http://www.acad.sunytccc.edu/instruc...t/normcalc.htm

Note the colored background for headings like "Percentiles", and the
extra margin at the left for body text. Then try Print (or Print
Preview), and see how the appearance changes.

That said, you probably ought to think twice about setting any
absolute text sizes in either your print or your screen style sheet.
Users already have both of those set to values that are comfortable
for them. Good practice is to set font sizes in percentages,
relative to the user's chosen size for body text. The above style
sheets illustrate that.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Geoff Cox]

On Thu, 16 Oct 2003 19:36:37 GMT, Brian
<us*****@mangymutt.com.invalid-remove-this-part> wrote:

Geoff Cox wrote:

If I wish to allow the user to select which font size to print in, I
will need to provide a duplicate html page in the different font size?

Heavens no!

css cannot cover this?

It can. In fact, done properly, it is the best way to handle font-size.

body {font-size: 100%}
/* sets the font size for the body element to 100% */
/* of the size the user has set in her or his browser */

h1 {font-size: 200%}
/* sets h1 element to twice the size of body text */

h2 {font-size: 150%}
/* sets h2 element to be 50% larger than body text */

h3 {font-size: 120%}
/* sets h3 element to be 20% larger than body text */
As others have said before, users are likely to be in one of two
groups: (1) those who have set their font size in their browser to
something that they like, and won't appreciate you changing it; and
(2) those who use the font-size set by the browser when it was
installed, and don't want to change it. For both groups, the only
sensible option is to always set the font-size of the body element to
100%. Set other elements to whatever size works given your size, but
always as a percent of the body element, that is, a percent of the
default size selected in the users' browsers.

hth

Brain

Food for thought ! I appreciate what you are saying, will have to go
back to the web site owner and see if I can persuade him to this point
of view....

Thanks

Geoff

[Tim]

On Thu, 16 Oct 2003 15:56:54 GMT,
Geoff Cox <ge*******@blueyonder.co.uk> wrote:

If I wish to allow the user to select which font size to print in, I
will need to provide a duplicate html page in the different font size?

No. (A nice simple answer.)

As you'll have read, there's plenty of good reasons not to mess with
font sizes (which I've always agreed with). If you were to provide
users with *some* way to use your site at different sizes, then users
will have to fiddle with their browsers. They might just as well
properly configure their browsers so that all pages work fine for them;
rather than providing strange mechanisms, and having to explain it. You
may be better to find a reference to some good "how to use your browser"
sites, and link to them in a "help" section on your site.

Having said that, if you are determined to let users use your site in
different styles, browser support for that is limited (the most
prevalent browser, MSIE, doesn't support it), but you'd do it by using
more than one link to different stylesheets in the document head; that's
one HTML document, with one default stylesheet, and various
alternatives, either as a personal choice, or automatic alternatives
depending on the media that they're designed for (screen, print, etc.).

| <html>
|
| <head>
| <title>A test page</title>
| <link rel="stylesheet" type="text/css" href="usual.css" title="Site's usual look">
| <link rel="alternate stylesheet" type="text/css" href="different.css" title="A different look">
| <link rel="stylesheet" type="text/css" media="print" href="for_paper.css" title="For printing">
| </head>
|
| <body>
| <h1>A test page</h1>
| <p>This page can be viewed in different styles, if your browser gives you some way to choose between them.</p>
| </body>
| </html>

If you read the CSS and HTML specifications (the introductions, at the
very least; and I suggest that you read the "style" page in the HTML
specifications), you'd save us all a lot of explaining.

Producing large font sites for people with eyesight problems is just
further isolating them from the rest of the web. If they don't learn
how to configure their system for most sites, or get help to do so, then
they're only going to be able to use specially prepared sites.

If you're going to go out of your way to support users, it's better to
just produce well authored sites, using HTML properly, and not doing
anything proprietary; this produces sites that work well for everyone.

--
My "from" address is totally fake. (Hint: If I wanted e-mails from
complete strangers, I'd have put a real one, there.) Reply to usenet
postings in the same place as you read the message you're replying to.