detect screen change stylesheet

[Michael Hill]

I have a perl script that i use to render a html page. In that page i
call out a stylesheet. If the user has a 800x600 display the fonts are
really too big.

Since screen resolution is a function of the client and I have this
javascript ot detect the srecc size:
function ck_res()
{
if ( (screen.width != 1024) && (screen.height != 768) )
{
alert(" This graphic is best viewed at 1024 x 768 ! ");
// use a different stylesheet
}
}

How would I go about changing the style sheet that is being called on
the page?

Mike

[Lasse Reichstein Nielsen]

Michael Hill <hi****@ram.lmtas.lmco.com> writes:

I have a perl script that i use to render a html page. In that page i
call out a stylesheet. If the user has a 800x600 display the fonts are
really too big.
....
How would I go about changing the style sheet that is being called on
the page?

Before answering, I would first suggest that you just don't set the font
size in the style sheet. No matter what resolution, monitor size, and
browser size, the user is likely to have set up his browser, so that
the default font fits him. If you just use the default font size, the
font will be satisfactory to the user. Even if he has bad eyesight and
a 24pt font on a 18 inch monitor at 800x600.

Now, if you insist on having different stylesheets, I recommend having
a default stylesheet that is always loaded, and separate stylesheets
that are added with Javascript, and which overload only what they need
to. That way the page will also work without javascript.

<script type="text/javascript">
if (screen.width <= 800) { // or some other arbitrary condition
document.write("<style type='text/css' src='lowres.css'><\/style>");
}
</script>

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

[Michael Hill]

See comments below, Mike

Lasse Reichstein Nielsen wrote:

Michael Hill <hi****@ram.lmtas.lmco.com> writes:

I have a perl script that i use to render a html page. In that page i
call out a stylesheet. If the user has a 800x600 display the fonts are
really too big.
...

How would I go about changing the style sheet that is being called on
the page?

Before answering, I would first suggest that you just don't set the font
size in the style sheet. No matter what resolution, monitor size, and
browser size, the user is likely to have set up his browser, so that
the default font fits him. If you just use the default font size, the
font will be satisfactory to the user. Even if he has bad eyesight and
a 24pt font on a 18 inch monitor at 800x600.

Yes I have a default style sheet being loaded now that specifies many
attributes about that tag, the color, etc...

So yes if the user has his browser set-up to use his fonts, then it will
over-ride those I am using. But it doesn't over ride the size I am using
does it?

For example:
If a user is using 1024x768 I'd like to use font size 14, but if they are
using 800x600 then use 12. I would do this by something like you script
below, i.e.

<script type="text/javascript">
if (screen.width <= 800)
{ // or some other arbitrary condition
document.write("<style type='text/css' src='lowres.css'><\/style>");
}
else
{
document.write("<style type='text/css' src='default.css'><\/style>");
}
</script>

Doesn't this sound like a good practice?

Now, if you insist on having different stylesheets, I recommend having
a default stylesheet that is always loaded, and separate stylesheets
that are added with Javascript, and which overload only what they need
to. That way the page will also work without javascript.

<script type="text/javascript">
if (screen.width <= 800) { // or some other arbitrary condition
document.write("<style type='text/css' src='lowres.css'><\/style>");
}
</script>

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

[Lasse Reichstein Nielsen]

Michael Hill <hi****@ram.lmtas.lmco.com> writes:

Yes I have a default style sheet being loaded now that specifies many
attributes about that tag, the color, etc...

So yes if the user has his browser set-up to use his fonts, then it will
over-ride those I am using. But it doesn't over ride the size I am using
does it?
My browser does. I have a CSS rule in my user style sheet that says
body {font-size:100% !important;}
That means that any font size change you try on the body element will
fail, and I get my preferred font size.
For example:
If a user is using 1024x768 I'd like to use font size 14, but if they are
using 800x600 then use 12.
What if they are using 800x600 on a 10 inch screen?
What if they are using 1025x768 on a 28 inch screen?
What if they are near sighted and want larger fonts?
What if ... you catch the drift! You can never predict how the user
wants their fonts, or which fonts will even be readable for them.
The factors are not only screen resolution, but also screen size,
eyesight and preferences.
<script type="text/javascript">
if (screen.width <= 800)
{ // or some other arbitrary condition
document.write("<style type='text/css' src='lowres.css'><\/style>");
}
else
{
document.write("<style type='text/css' src='default.css'><\/style>");
}
</script>

Doesn't this sound like a good practice?

No. But I will claim that changing the font size is never good practice,
so I'm hard to convince.

If you *also* have a non-JS-inserted style sheet that makes the page
usable for people without javascript, then adding finishing touches
like the above will do what you ask for.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

[Michael Hill]

"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:he**********@hotpop.com...

Michael Hill <hi****@ram.lmtas.lmco.com> writes:
<snip>
What if they are using 800x600 on a 10 inch screen?
What if they are using 1025x768 on a 28 inch screen?
What if they are near sighted and want larger fonts?
What if ... you catch the drift! You can never predict how the user
wants their fonts, or which fonts will even be readable for them.
The factors are not only screen resolution, but also screen size,
eyesight and preferences.

Ok, so alot of "bad" things I am doing here, what do you do?

<script type="text/javascript">
if (screen.width <= 800)
{ // or some other arbitrary condition
document.write("<style type='text/css' src='lowres.css'><\/style>");
}
else
{
document.write("<style type='text/css' src='default.css'><\/style>");
}
</script>

Doesn't this sound like a good practice?

No. But I will claim that changing the font size is never good practice,
so I'm hard to convince.

If you *also* have a non-JS-inserted style sheet that makes the page
usable for people without javascript, then adding finishing touches
like the above will do what you ask for.

<snip>

[HikksNotAtHome]

In article <3F***************@ram.lmtas.lmco.com>, Michael Hill
<hi****@ram.lmtas.lmco.com> writes:

For example:
If a user is using 1024x768 I'd like to use font size 14, but if they are
using 800x600 then use 12. I would do this by something like you script
below, i.e.

What if the user has 1024X768 but has the browser window set at 800x600?
At the moment, mine is 2048X768 though (dual monitors) where the screen.width
alerts as 2048 but only 1024 is "available" to the browser. And as Lasse
pointed out, 1024X768 on a 24" monitor is a lot different than 1024X768 on a
15" monitor. Give the user the picture/page and let them decide what font size
they want to see. You will save yourself hours and hours of grief.

--
Randy

[Lasse Reichstein Nielsen]

"Michael Hill" <hi****@charter.net> writes:

Ok, so alot of "bad" things I am doing here, what do you do?

I don't set the font size. If I do, I use percentages or em's, so
the new font size is relative to the default font size. And then
I try to make a page design that doesn't break if the fonts are
particularly large or small.

Ofcourse, I am *not* a graphical designer :)
Try changing the font size on <URL:http://www.infimum.dk/> (in Danish,
so you won't worry about the contents :)). The design and decoration
(ugly as it might be) scales to fit the font, not the other way around.

It is not perfect in IE, probably due to limitations in its CSS
support, but it looks as designed in Opera and Mozilla.

(We are getting off-topic for this group. Is there a web design group
this discussions should be moved to?)
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

[Nobody]

Bravo to all who voted for relative font sizes! I use a 60" Mitsubishi
television set and the fixed font sites out there drive me nuts! There are
tons of them (many big names surprisingly.) Disheartening really. The Web
is basically a disaster area.

"HikksNotAtHome" <hi************@aol.com> wrote in message
news:20***************************@mb-m28.aol.com...
| In article <3F***************@ram.lmtas.lmco.com>, Michael Hill
| <hi****@ram.lmtas.lmco.com> writes:
|
| >For example:
| >If a user is using 1024x768 I'd like to use font size 14, but if they are
| >using 800x600 then use 12. I would do this by something like you script
| >below, i.e.
|
| What if the user has 1024X768 but has the browser window set at 800x600?
| At the moment, mine is 2048X768 though (dual monitors) where the
screen.width
| alerts as 2048 but only 1024 is "available" to the browser. And as Lasse
| pointed out, 1024X768 on a 24" monitor is a lot different than 1024X768 on
a
| 15" monitor. Give the user the picture/page and let them decide what font
size
| they want to see. You will save yourself hours and hours of grief.
|
| --
| Randy