homepage Welcome to WebmasterWorld Guest from 50.19.33.5
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
pixel question
scorpion




msg:1199807
 6:18 pm on Mar 21, 2003 (gmt 0)

If you have a point specified as 8pt this means it will look the same under all resolutions? Which measure to use if you want a design that the text looks the same "relative" size at 1024x768, 800x600, 1280x1024 and the user cannot change it?

 

DrDoc




msg:1199808
 8:44 pm on Mar 21, 2003 (gmt 0)

First, the answer to your question is "no"... You will get different results depending on OS, browser, and system settings.

The only way to make it look exactly (or 99%) the same is using pixels. You can always use a JavaScript to change the default font size if they have a higher resolution.

Nick_W




msg:1199809
 9:08 pm on Mar 21, 2003 (gmt 0)

I'm sorry, I just can't help it:

The Web is Not a Print Medium!

Seriously, worrying about this stuff causes nothing buy pain and dissapointment. Not only for the designer but, more importantly for the user.

Pixel perfect design is fast becoming a thing of net history. It just can't be done reliably. A fluid medium like the internet where the possible combos of Browser/OS/Prefs/Device/etc requires a fluid design.

CSS is a mindset, if you stop thinking about rules and start thinking about suggestions you and your users will benefit enormously...

Okay, I'll stop frothing at the mouth now ;) - It's probably time I had a lie down...

<added>nothing personal intended scorpion, just venting ;)</added>

Nick

DLadybug




msg:1199810
 10:57 pm on Mar 21, 2003 (gmt 0)

This is clearly one of Nicks "core issues"..Now that he's had a chance to have a lie down, let's get the real scoop on ems vs px.

I was a user of px, until I started seeing things about how ems make the font size relative to the users size prefs and relative to the container.

I'll need more details on how it works though.

But if it's true that:
1em= "readers fav size"
2em= "twice readers fav size"
.5em= "half readers fav size"
ANd the container expands or contract to maintain margin, etc, why wouldn't everyone use this instead of px at all times?

I mean, this should give a presentation that looks relativly the same across browsers and users pre-sets, yes?

I think I'm seeing em use as equiv to percentage sizes for divs. Anyone clarify?

Dian :)
Grasshopper on CSS quest

scorpion




msg:1199811
 3:04 am on Mar 22, 2003 (gmt 0)

if you have a graphic design embedded with html elements, how can em be a good thing? If this graphic section is in a container 750x500 pixels, how can the expanding of the text container be a good thing - it would destroy it completely, causing misalignments along the slice guides, etc...I mean, all this is theoretically true for a text design, but graphics, unlike html are not scaleable, you cut it up and it is one fixed dimension...

DrDoc




msg:1199812
 1:02 pm on Mar 22, 2003 (gmt 0)

That is very true, scorpion... Images can't be resized without distortion and other issues. However, it is possible to create a graphics heavy site and still maintain "the liquids"...

Now, there are times when a controlled environment is necessary, depending on audience etc. The only thing I can suggest is what I already suggested: Convert to pixels, use JavaScript to change.

For example, say that you have the font size set to 13px in your basic style sheet (this file should be optimized for 800x600 - let higher resolution change it).

Give your body tag an ID ("body" for example) and add this script after the body tag:

<script type="text/javascript">
winWidth=document.all?document.body. clientWidth:window.innerWidth;
winHeight=document.all?document.body. clientHeight:window.innerHeight;

Mod Note: There is no break or space between 'body.' and 'client' in the above lines.

if(winWidth>1000) {
document.getElementById('body').style.fontSize = "16px";
}
else if(winWidth>1200) {
document.getElementById('body').style.fontSize = "19px";
}
</script>

...should work fine

[edited by: Nick_W at 3:03 pm (utc) on Mar. 22, 2003]
[edit reason] Fixed Scrollism - See quoted 'mod note' [/edit]

SuzyUK




msg:1199813
 2:47 pm on Mar 22, 2003 (gmt 0)

scorpion there are ways to do what you want either add the "text" into your graphic or use Doc's solution.

However I'd like to address this, not only in answer to your question below, but to address the wider issue it raises...
how can em be a good thing?

EM's and %'s are a great thing as far as accessibility is concerned, and if that's not your priority then you are in the minority which is why you're now "fighting" the system, whether its CSS capabilities, Differing Screen Resolutions, Viewer prefs, and don't forget the Web Accesibility Initiative [w3.org]:

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
-- Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Text has to be scalable for this purpose. What we've been trying to say in previous answers to your question, is that we as "accessibility fiends" or "sight challenged people" etc.. don't want to be restricted to viewing your fixed design, for a variety of reasons, but if that's what you want it is of course your choice, we've always got the "back button"

Follows some examples of the powers "fixed designers" are actually coming up against.

A solicitors guidelines [adlexsolicitors.co.uk].

A quote from The DDA, Disability Discrimination Act, under their "Provision of Goods and Services" Section. This will probably make it possible for Website owners to be prosecuted just like everyone else, if it can be proved they're deliberately making their service (because that's what a website is) unavailable or not providing an alternative.

1.5. From 1 October 2004 service providers will have additional duties in respect of physical features that make it impossible or unreasonably difficult for disabled people to use their service. They may have to overcome the difficulty caused by the feature by taking reasonable steps to:
a)remove it (s21(2)(a); or
b)alter it (s21(2)(b); or
c)provide a reasonable means of avoiding it (s21(2)(c)): or
d)provide a reasonable alternative method of making the service available to disabled persons.

Provisions a) - c) above will come into force from 1 October 2004, while provision d) has been in force since 1 October 1999.

So we could argue the point about whether "em's are a good thing or not", the point is they are there for a reason and if you want to fight it you're going to come up against some pretty powerful aspects and also something that is probably going to become a lawful requirement in order to make the internet as accessible as possible to the Disabled..

<note>scorpion, This is not directed at you personally, but is intended to point out some of the things that all "fixed designers" will come up against unless they provide an alternative</note>

Suzy

DrDoc




msg:1199814
 2:58 pm on Mar 22, 2003 (gmt 0)

Nice post Suzy!

But, what about text verification images? They can hardly be made accessible to all without lowering security...

scorpion




msg:1199815
 4:41 pm on Mar 22, 2003 (gmt 0)

from everything I read, seems the best mix is to use px and em. px for some tricky nonscaleable graphic work and em for the rest, especially for large sections of text which you expect the user to actually read :)

piskie




msg:1199816
 7:06 pm on Mar 22, 2003 (gmt 0)

I have spent many hours permutating EVERYTHING involved in displaying and printing from the same HTML file.

What I now do is format the HTML page and .CSS file to ensure that it displays as near perfect on a screen with all the permutations of Operating System, Browser and Resolution combinations that are important.

I accept that the first view will be as a displayed HTML file which may be required to print.
This is important.

Then I produce a second .CSS file that will print the page on all practical permutations with printers and preferences thrown in as further variables.

Using @import, I can ensure that this second .CSS file will print as near to intention as possible.

This second .CSS file designed purely for printing is not easy to arrive at because of the endless permutations of:
Printers
Page sizes
Computer platforms
Operating systems
Preference settings
etc.

Perseverance and testing although long and laborious will eventually produce two .CSS files that serve both purposes.

There is no easy fix but remember:
Display = Pixels
Print = Point

scorpion




msg:1199817
 7:57 pm on Mar 22, 2003 (gmt 0)

What is difference between percentage (%) and EM? What does it mean? e.g.

80% vs 0.8em?

securecat




msg:1199818
 8:05 pm on Mar 22, 2003 (gmt 0)

IE3 does not interpret `em` but treats it as `px`. However, `%` interprets. Considering backward compatibility, the `%` may be better than `em`.

DrDoc




msg:1199819
 8:07 pm on Mar 22, 2003 (gmt 0)

Technically % and em are the same (as far as font sizes goes). However, in reality you will get different results on certain platforms/browsers, depending on the support for these units.

Supposedly, you can also assign relative font sizes using percent, like "-50%" or "+63%".

securecat




msg:1199820
 8:12 pm on Mar 22, 2003 (gmt 0)

The `em` unit is equal to the computed value of the `font-size` property of the element on which it is used.

Percentage values are always relative to another value, for example a length.

See [w3.org...]

DrDoc




msg:1199821
 8:45 pm on Mar 22, 2003 (gmt 0)

...which means that if you have the following style sheet:

body {
font-size: 10px;
}
p {
font-size: 120%;
}
div {
font-size: 1.2em;
}

...both <p> and <div> will have the same value. Hence, they both generate a computed value of 12px.

The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element.
...
When a percentage value is set for a property of the root element and the percentage is defined as referring to the inherited value of some property, the resultant value is the percentage times the initial value of that property

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved