HTML Relargement on user side

[Smoky]

On some pages like www.google.co.uk for example you can change the text size by holding Ctrl and scrolling the mouse wheel.

How is this done?

Im guessing its done by having certain names in your CSS and then the browser changes the CSS sizes.

How do i include this?

[Dan]

I really don't know how it works but it really doesn't work on mine because my mousewheel is broken :(. I did find out that if you press cntrl and + on your keypad is zooms in on the site. I don't know anything else however, I'll try to look around and see what I could find.

[shwaza]

Smoky, in most browsers, it will do that automatically, i'm not sure why, (i personally find it very annoying) But you don't have to set anything (i'm pretty sure) and it should work :)

[Silver]

On the clients end, there are zoom options in the View menu. For eg, in Firefox, going to View>>Text Size and increasing/decreasing sizes has the same effect as that of the Ctrl and Scrollwheel.
If I am not mistaken, its not possible to tamper with this settings, though I maybe wrong. Those settings are meant for user preferences. Some users prefer a conventionally larger font size to see the sites, and that applies to all sites. Some ppl prefer seeing all the texts in all the sites smaller. Hence, this option just customises it for them.
And for me, it works on all sites, including HM itself.

[chilipie]

Users can normally only change text-size if they have been set using ems and percentages.


body {
font-size: 1em;
}

p {
font-size: 90%; /* same as 0.9em */
}

div {
font-size: 120%; /* same as 1.2 em */
}


If you don't get what I'm on about, just ask :D .

[choir]

Originally posted by chilipie@Feb 6 2005, 09:07 PM
Users can normally only change text-size if they have been set using ems and percentages.


body {
font-size: 1em;
}

p {
font-size: 90%; /* same as 0.9em */
}

div {
font-size: 120%; /* same as 1.2 em */
}


If you don't get what I'm on about, just ask :D .
26132


Not too sure about this.
Does this mean user can change text from 90% to 120% when accessing the webpage? Or does this mean this webpage have 3 type of text size - one for the body (100%), 1 for the paragraph (90%) and 1 for the block content (120%)?

[chilipie]

Originally posted by choir@Feb 7 2005, 08:48 AM
Not too sure about this.
Does this mean user can change text from 90% to 120% when accessing the webpage? Or does this mean this webpage have 3 type of text size - one for the body (100%), 1 for the paragraph (90%) and 1 for the block content (120%)?
26173

EMs and %s are measurements which adjust with the page - if you built a whole site specifying measurements with EMs and %s and not with pixels, it would resize to fit different sizes and shapes of window. The layout would also adjust to the users choice of font-size - this makes sites extremely accessible.

What the above CSS does is set the overall font size to 1EM. The rest of the font-sizes are set relative to the first font-size - If you wanted to double font sizes to make a version for vision impaired people, all you would have to do is change the 1EM at the top of the style sheet to say 1.5EM. This is in effect what a browser would do when you get it to in/decrease the font-size. Font-sizes set with pixels generally pose a problem to browsers (especially older ones or browsers for people with learning diffulties/special needs), and should generally be avoided. There is an article at A List Apart which may be of interest to you: Power To The People: Relative Font Sizes (http://www.alistapart.com/articles/relafont/).

[Ipsquiggle]

If I'm not mistaken, don't x-small, small, etc. scale as well? I'm pretty sure infact that all font sizes scale except those set as pixel heights.

The flipside of what chilipie is saying is that if a page defines explicit pixel heights for text (and point sizes if I am infact mistaken), it won't scale according to browser preference.

[JackZhou]

On plain text sites, the CTRL + Mouse Scroll works (e.g. Gmail), but on more complex sites like forums, it does not work... (at least not for me)

[DwSoFt]

i think it just depends on your browser and the code the site was made in, and combos of each