User Controlled text sizes

[skuff]

<font face="Tahoma">
<font size="2">
<font color="blue">

As you should be aware, users can control the text size in their browser (View - Text Size - user selection)

I have noticed using CSS that this over-rides the user control - does anyone know if there is away of over-coming this? Or is it, if you use CSS to control your font then thats it?

</font id="blue">
</font id="size2">
</font id="Tahoma">

[Rob]

CSS does overide the text size function of the IE browser.... no easy way round it really other than to just specify a font using the font tag, and leave the size up to the users browser.... you can also make use of the other size tags like h1, h2, etc.

I know with css you can specify text as bigger / smaller and this may be a way forward, although it is nothing I have really looked at before.

Can anyone else shed any light on this?

[skuff]

<font face="Tahoma">
<font size="2">
<font color="blue">

What would be good is if you could detect and use a user specified font - so you would have to use some sort of script to find out what their font setting is on the browser - if medium then use CSS style else use user selected font size.

You could have the stylesheet as an include file in ASP - then using a variable find out what the user text is set to and apply settings for font from there - trick is how do you find out if a user has set their font settings other than medium?

</font id="blue">
</font id="size2">
</font id="Tahoma">

I am not sure how to use the browsers font settings, however, a little trick I have used int he past it to have two CSS files. You can specify both CSS files up front and then switch between the two.

I have used this in two fashions. You can use it for a printer friendly page without having to reload the page or create a seperate page, or you could have a link on your page that says "Larger Fonts" which could switch to the CSS for larger fonts.

Here is an example of the code:

Code: Select all

<textarea name="" cols="100" rows="10" readonly="readonly">

<script language="JavaScript">
<!--
   function printerFriendlyView()
  {
  document.styleSheets[0].href = "/includes/cssprint.css";
   }
			
   function normalView()
   {
  document.styleSheets[0].href = "/includes/css.css";
   }
// -->
</script>

<span class="showonlyinnormalview">[img]Images/bullet3.gif[/img]Previous Page  </span> 
          <% if printerfriendly = "true" then %>
		<span class="showonlyinprinterfriendlyview">[img]Images/printericon.gif[/img]Print This Page  </span>
		<span class="showonlyinnormalview">[img]Images/printericon.gif[/img]Printer Friendly View  </span>
		<span class="showonlyinprinterfriendlyview">[img]Images/bullet1.gif[/img]Return to Normal View  </span>
		<% end if %>
</textarea>

The above example only works in IE, however there is a Netscape version. I will post both examples and a more detailed How To in the CSS/ASP Forums later.

[Adrian]

CSS font's are easy, just use relative sizes like em or % instead of px.

1em is the same as the normal size of a font, 0.5em is the same as half the size, 2em is twice the size etc...

When using these types of sizes, if someone changes the browser font size, the text will resize along with it. Thats one of the main reasons against using px sizes.

[Adrian]

http://www.alistapart.com/stories/goingtoprint/

Printer Friendly pages in CSS, no need for any javascript or the like or IE Vs NS version, works in all standards compliant browsers.

That example is an okay way to do it, but there are problems with it. First, it only works when you print the page. If you want to show the user the page that will print first, it does not work. The second problem I have seen with that, is people are not likely to print the page if they don't know that it will print in a clean format.

Good info though.

[Adrian]

The idea is that they don't need to see what it will be like as you've already done that for them, and Meyer admits in places that people may be unaware the page is setup to print properly, but a note somewhere saying 'This page is set to print correctly' instead of a 'Printer Friendly' link could be used instead.

As sites start using print stylesheets, people will get used to not needing to check if its set as much. Hopefully, eventually, most websites will use a print stylesheet, thus people will EXPECT it to print fine (even if it does look different to the screen).