Forum Moderators: not2easy
That’s the easy part but how to mostly respecting page layout?
Thanks
The code basically writes the <link tag in to your html head. Tested between Opera, IE, Gecko, and Safari late 1.X. You will need to use serverside code to detect Opera 6 and prior to manually write in the link to the stylesheet as they do not support this method of javascript. I have this working live on my personal site and it works great!
1.) Create a Javascript that sets a cookie when the user makes a choice to increase the text. You will have to figure this part out ... I currently have the framesets of my site simply make the cookie upon visit via PHP though it doesn't matter how you set it as long as you do.
2.) Make sure you modify your cookie name and the name of the cookie as well as the stylesheet references to all match. There is a working example on my site but here is the actual code.
3.) To add additional text sizes just replicate the last chunk of code (else-if line)!
<head>
<script src="scripts/script-style.js" type="text/javascript"></script>
script-style.js
<!--
var $theme = getCookie("theme"); function getCookie(Name) { var search = Name + "="; var CookieString = document.cookie; var result = null;
if (CookieString.length > 0) { offset = CookieString.indexOf(search); if (offset!= -1) { offset += search.length; end = CookieString.indexOf(";", offset)
if (end == -1) {end = CookieString.length}; result = unescape(CookieString.substring(offset, end))}}return result;}
if ($theme == null){document.writeln(' <link href="text-12.css" media="screen" rel="stylesheet" title="classicdu" type="text/css" />');}
else if ($theme == "classicdu"){document.writeln(' <link href="text-14.css" media="screen" rel="stylesheet" title="classicdu" type="text/css" />');}
-->
I might do the same with creating a session for the duration of the visit.
however it goes further; the real concern is the overlook of the new page after injecting new fonts size.
So I guess the only solution is tying a new set of templates to the font choice.
Which in return leads to simply creating a second set of templates to include the redesign based on font size choice.
Not such a big deal, asides adding more script!
regards
Henry
While some sort of javascript style-sheet switcher will do what you ask:
some previous threads..
Adjust text - CSS [webmasterworld.com]
Javascript Stylesheet Switcher [webmasterworld.com]
Essentially the thread you refer to [webmasterworld.com] (great thread btw!) revolves around page usability.
To me your question and this issue go hand in hand, you want to offer the flexibility to help your sites audience but retain the layout that works for you. This is where the design and usability conflict usually start, and is where CSS comes into it's own. While it's a nice thing to be able to offer an on page button to do things like change color schemes or enlarge fonts that's a design thing, it can be done but involves some other scripting to maintain the actual change.
The thing is that browsers and or user stylesheets can already enlarge text for the users but they all do it differently. While it can be argued that most people can't or don't want to have to muck around with their browser settings ~ an on page option is just a nicety as I also agree that we can no more go around using 16px font size any more than I think 10px font size is cool, there is really no way of keeping all of our users and designers happy at any one time ;)
Back to topic (hopefully)
In that thread there is a link to Units of Measure [w3.org] with this quote:
* Use the "em" unit to set font sizes.
* Use relative length units and percentages....
* Only use absolute length units when the physical characteristics of the output medium are known, such as bitmap images.
One answer is in there ;) and in fact as I read through some of the threads about stylesheet switchers I came across it often.
The easiest answer is to use em's or percentages for everything. size your fonts with them and also size your divs, columns, with them.
This then keeps your whole page relative to the *users* desired font-size. That is if they have set a larger default your design should still hold true
You might like to search for elastic layouts, the concept is there and while it has taken a while for designers to let go of there "pixel perfect" control notions these type layouts should theoretically give a good compromise between designer control and users needs/wants.
In a recent thread Fluid em-width designs [webmasterworld.com] it was asked ~ Are we ready for them yet? to me your question, and the thread which instigated it, answers this - as a Yes we are ready :)
Of course you can still offer the stylesheet switcher options then as a visual nicety to show you care enough to give the option, but because the behind the scenes CSS is already promoting usability, you will also then be taking care of the people who have their personal defaults set larger or smaller for whatever reasons too!
Suzy
so my next step is:
redo my fluid design
to allow for "no table"
which task I was trying to avoid :)
Although since again I made my templates fluid
I will first look at how it reacts as is
Again thanks
regards
Henry
redo my fluid design
to allow for "no table"
maybe not, I don't see any reason that you have to replace your tables just yet (unless you really want to ;)) the most basic thing that CSS can do is help you control your fonts: family, size, color etc..
and as far as I know but again is off the top of my head.. you could just size your table using em's? which might be an easy way to learn the concept of them and could then actually mean you learn the CSS + P (positioning) side (usually required for layouts) of things from an easier/different angle than some of the rest of us have.. CSS layout doesn't necessarily mean no tables, in fact CSS applies to tables too :o
If you can "get" the concept of elastic layouts using tables easier than a complete makeover/change then go for it!
Font-sizing has always been a tricky area to deal with, tempers can get heated, but I wonder now if this whole "issue" wouldn't have come up even if everyone were still using tables for layout, it's a usability issue not a design control one.
hopefully some others will come and have their say too, but do let us know how you get on
Suzy
So my approach will be different than in pure HTML for I will introduce a bunch of new variables.
However dynamic or not the end result will be the same.
In my templates I might add a var for the chosen percentage per col or .... let's think about it!
