Need a good article that explains ems
Hi,
I am writing this in a state of extreme agitation. Over the past months I have been slowly learning about accessibility, however there is one point that keeps coming back to haunt me and this is the fixed width/ liquid / elastic thing. I have tried using ems to size my div's but when the text is sized below a certain level, images that are sliced over two or more divs break up and the whole thing falls to bits. I am certain that I am missing something. I have had a look through a number of posts in this forum but the ones I have read simply say that you should not use fixed width layout and that you should use ems or %.
Do I take it from this that I am not allowed to slice images anymore, or is there a way around this, I just don't know!
Firstly, I don't understand why columns can't be a fixed width, I can definitely understand text, but in trying to understand this I have experimented with different resolutions and fixed width columns and the text (when specified in ems) doesn't become unreadable by any means.
Secondly, I can't seem to find a decent article that clearly explains the logic behind the em. I know it is typographic jargon for the size of an 'm', but I really don't get the logic behind the workings in the context of the web.
Before I get anyone's back up, I should just clarify at this point that I'm not disputing that fixed width is wrong, I'm just trying to understand why.
Many thanks in anticipation.
Share: 
| avinalaff wrote: |
| Do I take it from this that I am not allowed to slice images anymore, or is there a way around this, I just don't know! |
You're allowed to do whatever you want, just make sure that it's accessible.
Seriously, though, images cause problems in liquid or elastic layouts, since their sizes are inherently pixel-based.
| avinalaff wrote: |
| Firstly, I don't understand why columns can't be a fixed width, I can definitely understand text, but in trying to understand this I have experimented with different resolutions and fixed width columns and the text (when specified in ems) doesn't become unreadable by any means. |
If a column is X pixels wide, and the user makes the font size larger, the text will leak out of the column sooner or later. It may not be too much of a problem in English, where you have mostly short words, but in languages like Swedish, Finnish or German, such a solution falls apart very rapidly.
If you set your column widths in ems, the columns will grow and shrink with the font size, so they'll always have room for the same number of characters. The text doesn't have to be re-flowed when the font size is changed. As you've found out, images will cause problems though.
| avinalaff wrote: |
| Secondly, I can't seem to find a decent article that clearly explains the logic behind the em. I know it is typographic jargon for the size of an 'm', but I really don't get the logic behind the workings in the context of the web. |
The typographer's em (sometimes called an em square) is the width of an uppercase 'M' in the current font. It's the width of the widest glyph in that font. If you need to guarantee space for five letters, you could use five em squares, because no letter would be wider than one em.
In CSS, an em is defined a little differently. It's equal to the current font size. So if the font size is 12px, one em is 12px. If the font size is 80%, one em is 80% (of some other size). If the user changes the font size through his or her browser controls, the size of the em changes as well, which is the beauty of it.
Now, things with a fixed physical size (like images) become a problem in a liquid or elastic layout. An image that barely fits in a 20em column will no longer fit if the user makes the text smaller. An image that barely fits in to a 25% column will no longer fit if the user makes the window narrower.
One solution is to avoid embedding images in a liquid or elastic column, but that's not a good way to deal with it of course.
What you need to do is to specify the size of the image in a relative unit as well. As you probably know, browsers don't scale images very well, especially when enlarging them. The trick is to set a relative width, and then set a fixed max-width in pixels. Something like this:
| Code: |
| img.my-size {
width:17em; max-width:150px; height:auto; } |
Now the image will always fit into your 17em column. If the font size is large enough, the image won't grow beyond its natural size (assumed here to be 150px). The height:auto ensures that the aspect ratio of the image is always preserved.
So what's the downside to this? You guessed it: Internet Explorer doesn't support max-width, and it doesn't handle height:auto along with a specified width. So this technique can only be used with standards-compliant browsers. If you need to pamper IE users, you'll probably have to resort to J(ava)Script.
Does anyone have a better solution that works cross-browser?
_________________
Tommy has left the building
Share:
| Quote: |
| So what's the downside to this? You guessed it: Internet Explorer doesn't support max-width, and it doesn't handle height:auto along with a specified width. So this technique can only be used with standards-compliant browsers. If you need to pamper IE users, you'll probably have to resort to J(ava)Script.
Does anyone have a better solution that works cross-browser? |
I have been in awe of your expertise for some time now and offer a comment in some trepidation. But, if I may make so bold, would the technique in the following link fit the bill? I've used it for a while and it works for me cross browser, providing the original image is of good quality.
http://www.wats.ca/...
Lorraine
Share:
Lorraine, Tommy, thanks alot for these suggestions, I wasn't aware that you could apply relational sizing to images. In response...
Lorraine Wrote:
| Quote: |
| I have been in awe of your expertise for some time now |
Me too...seriously.
Tommy Wrote:
| Quote: |
| It may not be too much of a problem in English |
So does this mean that I can get away with fixed sized borders if I promise to only write in English?
Seriously though, if this is the case and we're dealing in practicality over defined rules, if I use pixels for my layout and the site uses English content, is it still accessible or not? (I'm really not concerned with pda etc. at this stage.
Tommy Wrote:
| Quote: |
| In CSS, an em is defined a little differently. It's equal to the current font size. So if the font size is 12px, one em is 12px |
Tommy, this suggests to me that the current font size should be specified in the first place. Can I do this or do i have to leave it to the user? It seems a little strange that I am allowed no control what-so-ever over the size of the fonts in my design. If I can specify the base font size how do I do it and remain accessible?
Tommy Wrote:
| Quote: |
| What you need to do is to specify the size of the image in a relative unit as well |
On the surface, this seems like the perfect solution. In the article that Lorraine points to it even gives you a conversion from pixels to ems (/16)! However, it would also seem that you have to specify the image size in the css. I have been led to believe that images load faster if you specify the size in the <img> tag. Attempts to use the em in the <img> tag are fruitless. Is this a case of "please stop moaning, you can't have it all ways" or is there an answer to this.
Many thanks again for all your support.
Share:
Sorry, just 1 further point. I notice that many of the sites up for nomination for Novembers GAWDS awards use fixed width layout. I would appreciate some explaination of how they can do this and still call their site accessible.
Share:
Why should fixed width be unaccessible? The info is still available. As long as the design is done carefully so the text can be made larger or smaller with no problem it is still accessible.
It has nothing to do with accessibility. If you can make your site stretch and look good fine...... but some sites cannot be stretched due to Banners etc., so they are usually fixed width and centered so they look good.
Accessibility requires only that the info be available.... but does not require a liquid design. It may be prefferable but not always possible. So a fixed width design is completely accessible when done smartly.
_________________
Kyle J. Lamson
Analyst/Programmer III, State of Alaska
--
LSW-WebDesign.com & DarkShadow-Designs.com
Share:
Hi Kyle,
I think Tommy answered this one with:-
| Quote: |
| If a column is X pixels wide, and the user makes the font size larger, the text will leak out of the column sooner or later. |
Or did I misunderstand?
Share:
avinalaff:
| Quote: |
| However, it would also seem that you have to specify the image size in the css. I have been led to believe that images load faster if you specify the size in the <img> tag. Attempts to use the em in the <img> tag are fruitless. |
You can specify relative image sizes in the css. Works well if all or most of the images on a site are the same size. If you have many different sizes, it could get quite complicated using <img .(selector) />.
You can also specify sizes in inline styles such as:
<img src="/images/starwars.jpg" style="height: 10.75em; width: 15.63em;" title="image - relative sizing" alt="image - relative sizing" /> - look at the source code on the wats.ca site. The danger is bloating your source code if there are too many images and negating the 'benefits' of faster loading.
| Quote: |
| I notice that many of the sites up for nomination for Novembers GAWDS awards use fixed width layout. I would appreciate some explaination of how they can do this and still call their site accessible. |
Ah but - the level of accessibility is the issue. The moving goal posts of how nominated sites are judged is up for debate, however, as evidenced on the GAWDS members' only forum and to a degree on: http://www.accessifyforum.com/...
Originally nominated sites were meant to be AAA. Recently the criteria seem to have slipped considerably. There are many posts in this forum about whether true AAA is even attainable. Even Tommy does not (or, rather, refuses to) claim AAA: http://www.autisticcuckoo.net/...
| Quote: |
| Is this a case of "please stop moaning, you can't have it all ways" or is there an answer to this. |
There is usually an answer and more often than not you'll find it or a very acceptable compromise on this forum. Don't give up. If your visual design demands fixed width, you can still use a combination of fixed/flexible techniques.
BTW autisticcuckoo 'appears' to be fixed width when first opened and 'seems' to be constrained by fixed width header graphics. Go on - resize it and watch the top graphics.
All the best
Lorraine
Share:
| Quote: |
| You can specify relative image sizes in the css. Works well if all or most of the images on a site are the same size. If you have many different sizes, it could get quite complicated using <img .(selector) />. |
Maybe I should also have said that, using the wats.ca method, the css would look something like this:
| Code: |
| img
{ border: none; width: 5em; height: 5em; } img .bigger { border: none; width: 10em; height: 10em; } img .huge { border: none; width: 15em; height:15em; } |
Share:
| avinalaff wrote: |
| So does this mean that I can get away with fixed sized borders if I promise to only write in English? |
No, sorry.
Even short words will eventually outgrow a fixed-width container. And English does have long words, such as antidisestablishmentarianism.
| avinalaff wrote: |
| Seriously though, if this is the case and we're dealing in practicality over defined rules, if I use pixels for my layout and the site uses English content, is it still accessible or not? (I'm really not concerned with pda etc. at this stage. |
Accessibility does involve PDAs and other small screen devices, just as it involves older browsers, non-keyboard devices, users with disabilities, etc.
Anyay, using fixed pixel widths for columns prevents AA compliance. A user with a small screen or a user who needs large text would need to disable style sheets in order to read such a page, as large text would cause columns to overlap. Even though the content is theoretically accessible (they could read the source code if everything else fails, right?
) it puts too much onus on the user.
Using relative measures isn't all that hard, once you get used to that way of thinking. There are solutions to the image problem, as I outlined, and as Lorraine linked to. The WATS.ca solution will work for IE, but has the downside of not establishing a max-width, so images could end up pixellated by being enlarged. An em-sized dimension might be the answer to the IE problem, though: use my idea for compliant browsers and use ems for IE. IE users will get a somewhat lesser experience, but aren't they anyway?
| avinalaff wrote: |
| Tommy, this suggests to me that the current font size should be specified in the first place. Can I do this or do i have to leave it to the user? It seems a little strange that I am allowed no control what-so-ever over the size of the fonts in my design. If I can specify the base font size how do I do it and remain accessible? |
Specify the base font size in a relative unit. I recommend percents, because IE has some bugs relating to ems for base font sizes.
Remember that font specifications (including font family) in CSS are nothing but hints. You have no guarantee that it will look as you intended, because there's no guarantee that every user has the font you specified. And if they don't, your chosen font size may not work for them either.
The base font size is relative to the browser defaults. Most Windows browsers now use 16px as the default size, but I think Macs use a smaller default. As long as the size is relative, allowing the user to resize it, it's accessible.
| avinalaff wrote: |
| In the article that Lorraine points to it even gives you a conversion from pixels to ems (/16)! |
That will only work in modern Windows browsers, and providing that the user hasn't changed the default. It's a rule-of-thumb, but it's not a bullet-proof conversion formula.
| avinalaff wrote: |
| However, it would also seem that you have to specify the image size in the css. I have been led to believe that images load faster if you specify the size in the <img> tag. Attempts to use the em in the <img> tag are fruitless. |
The width and height attributes in HTML specify dimensions in pixels (or, optionally, %). So yes, you need to specify the size in CSS. You could still set the original pixel dimensions in the HTML, because the CSS size will override it.
An image with a specified dimension may not load faster, but it will allow the browser to allocate space for it even before the image is loaded. Thus you don't get the annoying "jumping text" when the text has to be re-flown once the browser knows the dimension of the image.
Besides, some old browsers could only load a few images in parallell without knowing the dimensions.
As Lorraine said, my blog looks like the traditional fixed-width blog, but it's actually quite dynamic. It adapts to the screen up to a certain size, after which it stays centred. I've even used the method I described in the first post to keep images from ruining the layout.
For IE, I use a cruder (non-compliant) method, and I don't bother with the relative images.
_________________
Tommy has left the building
Share:
Tommy, thanks for the tip above. Would have saved me a lot of time and heart ache if I'd have known that a few months ago! Rock on Tommy!
++TOOLman->rep;
Share:
That'll be two lessons here then:
1. Keep visiting Tommy's blog;
2. Remember 'antidisestablishmentarianism' if you ever build a site about Oliver Cromwell or Henry Vlll.
Share:
@ Avinalaaf
| Quote: |
|
Hi Kyle, I think Tommy answered this one with:- Quote: If a column is X pixels wide, and the user makes the font size larger, the text will leak out of the column sooner or later. Or did I misunderstand? Confused |
My point is that the fixed width of a web site is perfectly fine and accessible when smartly done as I had said.
Tommy is speaking of the actual elements inside the web site.
You make a web site and place it in a 800 px width box. This is centered in the widow for all further resolutions. This is perfectly accessible when the internal elements of that design... say columns.... are done fexibly as Tommy says so the text does not cross over it.
Tommy is speaking elements in the box and I am speaking of the box itself.
_________________
Kyle J. Lamson
Analyst/Programmer III, State of Alaska
--
LSW-WebDesign.com & DarkShadow-Designs.com
Share:
Kyle, I don't agree 100% with you on this. A main container specified as width:800px will cause a lot of scrolling on small screens, which may be more of a usability issue than one of accessibility. However, it's quite possible that such a container will not fit onto the page when printed. You can't scroll a piece of paper (not yet anyway ), which means part of the content is inaccessible.
A site built with accessibility in mind would not use pixels for container widths, IMHO.
_________________
Tommy has left the building
Share:
True enough, however that is also when the Print CSS comes in for printing the info.
There are simply some designs that cannot be done in a luquid envirement. usually due to banners limiting their size. In this case some luiquid site will meet the same problems on a small screen as images too will cause problems with a smaller screen.
That of course brings us back to this resizing of images spoken of here which I to did not know about.
All said and done..... I agree that a Elastic and Luquid design is always prefferable and usually my target but not always possible with the customers wishes.
We all know 100% accessibility is not possible.... any situation will always be a problem for some design. I feel that a smartly done fixed width container is not inheritently unaccessible automatically. A poorly done one however usually is .
_________________
Kyle J. Lamson
Analyst/Programmer III, State of Alaska
--
LSW-WebDesign.com & DarkShadow-Designs.com
Share:
All times are GMT
You cannot post new topics in this forumYou cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum