'em' - relative

J

Jan Faerber

213.47.90.101 - - [17/Nov/2004:18:32:52 +0100] "SEARCH
/\x90\x02\xb1\x02\xb1\x02\xb1\x02\xb1\x02\xb1\x02\xb1\x02\xb1\x02\xb1_etc...
that is my best visitor!

To change that... a little question to improve my knowledge:

'em' is the recommended messure with css.
To use this a kind of stylesheet rail
should be provided:

Windows.css
p { font-size: 1em; }
h1 { font-size: 2em; }

Mac.css
p { font-size: 1.3em; }
h1 { font-size: 2.66em; }

<!--#if expr="(${ HTTP_USER_AGENT} = /Win/)" -->
<link rel="stylesheet" href="win_styles.css">
<!--#else -->
<link rel="stylesheet" href=" mac_styles.css ">

Does anybody prefer this solution (with php),
are there other rails aswell
or is it better to get 'smarty' on
http://smarty.php.net/ - ?

At the moment I can not provid any URI
I am just asking.
 
S

Steve Pugh

'em' is the recommended messure with css.

Yes, for some properties.
To use this a kind of stylesheet rail
should be provided:

Windows.css
p { font-size: 1em; }
h1 { font-size: 2em; }

Due to bugs in Win IE % are better than em for font-size, but em are still
good for margins and padding.
Mac.css
p { font-size: 1.3em; }
h1 { font-size: 2.66em; }

Huh? So Mac users need text set at 130% of their chosen default size? Why?

You are aware that only old Mac browsers have a factory default font size
of 12px? Modern Mac browsers use either 16px (same as most (all?) Windows
browsers) or 14px.
<!--#if expr="(${ HTTP_USER_AGENT} = /Win/)" -->
<link rel="stylesheet" href="win_styles.css">
<!--#else -->
<link rel="stylesheet" href=" mac_styles.css ">

Firstly, assuming that all browsers on a given OS are the same is stupid.
Secondly, assuming that users need text in ordinary paragraphs set larger
than 1em is stupid.

Steve
 
A

Adrienne

Gazing into my crystal ball I observed Jan Faerber
213.47.90.101 - - [17/Nov/2004:18:32:52 +0100] "SEARCH
/\x90\x02\xb1\x02\xb1\x02\xb1\x02\xb1\x02\xb1\x02\xb1\x02\xb1\x02\xb1_et
c... that is my best visitor!

To change that... a little question to improve my knowledge:

'em' is the recommended messure with css.
To use this a kind of stylesheet rail
should be provided:

Windows.css
p { font-size: 1em; }
h1 { font-size: 2em; }

Mac.css
p { font-size: 1.3em; }
h1 { font-size: 2.66em; }

<!--#if expr="(${ HTTP_USER_AGENT} = /Win/)" -->
<link rel="stylesheet" href="win_styles.css">
<!--#else -->
<link rel="stylesheet" href=" mac_styles.css ">

Does anybody prefer this solution (with php),
are there other rails aswell
or is it better to get 'smarty' on
http://smarty.php.net/ - ?

At the moment I can not provid any URI
I am just asking.

I don't use em for font size, I use percentages, and then only for
headings/copyright statements:
h1 {font-size:140%;} #copyright {font-size:90%}
That way, the user is seeing the font at a percentage of their choosen or
default font size.

No need to do any browser sniffing either, maybe just sniff for cookies.
 
T

The Bicycling Guitarist

Jan Faerber said:
213.47.90.101 - - [17/Nov/2004:18:32:52 +0100] "SEARCH
/\x90\x02\xb1\x02\xb1\x02\xb1\x02\xb1\x02\xb1\x02\xb1\x02\xb1\x02\xb1_etc...
that is my best visitor!

'em'-relative
Everyone's heard of Auntie Em from the Wizard of Oz.
 
J

Jan Faerber

Steve said:
Yes, for some properties.

aha, yes I read about that.
Due to bugs in Win IE % are better than em for font-size, but em are still
good for margins and padding.

aha, did they found those bugs after the recommendation
of the W3C? (Anyway - it is nearly the same with %.)
Huh? So Mac users need text set at 130% of their chosen default size? Why?

[I will try to translate it:]
Because different platforms have different screen resolutions.
Win has 96 'dpi' (dots per inch) but Mac and Linux come with 72 dpi.
If the formatting is given in pt win will display the font larger than mac.

In practice this has fatal consequences: For the font-size is given
very often in pt, this leads to a 96/72 or about 1.33 (~133%) bigger
display on win than on Mac.
'Round the other way the formatting in pt on Mac will be
displayed only 72/96=0.75 (or only about 75 percent as big alike
the according windows presentation).

The solution would be only to use px because the font-size in
px will be displayed the same on any platform.
Problem: The visitor of the page can not alter the font-size on
his own (e.g. IE: View(?) -> Font-Size) if you use px.
That would be a restriction for partially sighted people.

Therefore you use relative font-size and measures in 'em' or '%' which is
much more effective and visitor friendly. Formatting by css using units
in 'em' or the specification in percent can quite be senseful whereas
the W3C recommends the use of em. This has the advantage that
the specifications are relative and the font-size is alterable
to a cerain degree. 1 em is the standard font-size of the UA.
If desired that the font will displayed bigger than the standard
font-size a designated value bigger than 1 is selected
if a smaller one shall be displayed a value smaller than 1 will be set.

The specification in percent acts similar (bigger than standard:
bigger than 100% - smaller size: smaller than 100%).
In pracitce two extern css files are created: The one optimised
for win the one optimised for Mac respectively for Linux. The formatting in
the css file for Mac has to be 33 percent bigger than in the css file for
win.
You are aware that only old Mac browsers have a factory default font size
of 12px? Modern Mac browsers use either 16px (same as most (all?) Windows
browsers) or 14px.

And what is with Linux platforms?
But it reminds me of a java example of David Flanagan:
http://html.janfaerber.com/files/HardcopyWriter.java

.... Here you have a workaround for Windows - a bug:

<quote>
pagesize = job.getPageDimension(); // query the page size
pagedpi = job.getPageResolution(); // query the page resolution

// Bug Workaround:
// On windows, getPageDimension() and getPageResolution don't work, so
// we've got to fake them.
if (System.getProperty("os.name").regionMatches(true,0,"windows",0,7))
{
// Use screen dpi, which is what the PrintJob tries to emulate
pagedpi = toolkit.getScreenResolution();
// Assume a 8.5" x 11" page size. A4 paper users must change this.
pagesize = new Dimension((int)(8.5 * pagedpi), 11*pagedpi);
// We also have to adjust the fontsize. It is specified in points,
// (1 point = 1/72 of an inch) but Windows measures it in pixels.
fontsize = fontsize * pagedpi / 72;
}
</quote>
It is a little bit OT but here the same:
Everybody says - 'Java is platform independent!' But you have to
be aware of such bugs or differences between different platforms.
If you say that we have now three different font sizes:
12, 14 and 16 px we even need a third css file!
Firstly, assuming that all browsers on a given OS are the same is stupid.
Secondly, assuming that users need text in ordinary paragraphs set larger
than 1em is stupid.

Then you have to get the default font size of the browser AND the screen
resolution of the OS together to decide on further actions.
 
J

Jan Faerber

Adrienne said:
Gazing into my crystal ball I observed Jan Faerber
I don't use em for font size, I use percentages, and then only for
headings/copyright statements:
h1 {font-size:140%;} #copyright {font-size:90%}

lol - yes, that is nearly the same.
 
S

Steve Pugh

aha, yes I read about that.


aha, did they found those bugs after the recommendation
of the W3C? (Anyway - it is nearly the same with %.)

Look at http://steve.pugh.net/test/test47.html to see the problem.
Huh? So Mac users need text set at 130% of their chosen default size? Why?

[I will try to translate it:]
Because different platforms have different screen resolutions.
Win has 96 'dpi' (dots per inch) but Mac and Linux come with 72 dpi.
If the formatting is given in pt win will display the font larger than mac.

"If the formatting is given in pt"

Not the formatting is not given in pt. So this is irrelevant. And as I
hinted modern Mac browsers use 96dpi same as Windows browsers.
In practice this has fatal consequences: For the font-size is given
very often in pt, this leads to a 96/72 or about 1.33 (~133%) bigger
display on win than on Mac.
'Round the other way the formatting in pt on Mac will be
displayed only 72/96=0.75 (or only about 75 percent as big alike
the according windows presentation).

But using pt for font sizes is a bad idea anyway.

If you want to assume that all browsers have a factory default of 12pt
then old Mac browsers do use 72dpi and so the default is 12px. But
modern Mac browsers (IE5+, Gecko based browsers) use 96dpi and so the
default is 16px - exactly the same as Windows.
In pracitce two extern css files are created: The one optimised
for win the one optimised for Mac respectively for Linux. The formatting in
the css file for Mac has to be 33 percent bigger than in the css file for
win.

So Mac users get sizes 33% larger than they need. Stupid.
Then you have to get the default font size of the browser

No you don't.
You know that the user can read the default font size in their browser
and that's all you need to know.
AND the screen resolution of the OS together to decide on further actions.

Totally irrelevant.

The 'font resolution' only comes into play if you size the text in
physcal units like pt or cm - which you shouldn't do.

And the screen resolution is totally irrelevant and can vary vastly on
the same computer - my graphic card supports resolutions from 800x600
to 2048x1536 - that's a two and half times factor of difference in
resolution if I use those two settings on the same sized display.

Steve
 
J

Jan Faerber

Steve said:

I don't have IE - can I install it on Linux with wine?

Can there a screenshot be added?
[I will try to translate it:]
Because different platforms have different screen resolutions.
Win has 96 'dpi' (dots per inch) but Mac and Linux come with 72 dpi.
If the formatting is given in pt win will display the font larger than
mac.

"If the formatting is given in pt"

Not the formatting is not given in pt. So this is irrelevant. And as I
hinted modern Mac browsers use 96dpi same as Windows browsers.

I just tried to translate this:
http://www.exine.de/webdesign/win_mac.htm
But using pt for font sizes is a bad idea anyway.

If you want to assume that all browsers have a factory default of 12pt
then old Mac browsers do use 72dpi and so the default is 12px. But
modern Mac browsers (IE5+, Gecko based browsers) use 96dpi and so the
default is 16px - exactly the same as Windows.

"default is 12px" ... px is not pt ... px is the same with 72 and 96dpi.
If you use px the font size is the same.
I can not find a date here of this article.
But it seems as if "using pt for font sizes is a bad idea anyway"
has something to do with this problem that the font is getting
very small on Mac and Linux for instance.
So Mac users get sizes 33% larger than they need. Stupid.

Was it stupid with old macs aswell?

No you don't.
You know that the user can read the default font size in their browser
and that's all you need to know.

.... and in some browsers this will be too small.
But thank you for the hint that mac is now coming with 96dpi!
I did not know that - thank you again!
Totally irrelevant.

The 'font resolution' only comes into play if you size the text in
physcal units like pt or cm - which you shouldn't do.

So you have now em and percent and everything starts from the beginning.
And the screen resolution is totally irrelevant and can vary vastly on
the same computer - my graphic card supports resolutions from 800x600
to 2048x1536 - that's a two and half times factor of difference in
resolution if I use those two settings on the same sized display.

To get the screen resolution can be useful:

www.ba-ca.com/js/common_lib.js
<quote>
//--- get screen resolution ---
if(nBrowser >= 4)
{
nScreenWidth = screen.width;
nScreenHeight = screen.height;

//--- center on screen if higher than 800x600 ---
if(nScreenWidth > 820)
nLeft = (nScreenWidth - nWidth) / 2;

if(nScreenHeight > 620)
nTop = (nScreenHeight - nHeight) / 2;
}
</quote>

Why not using it in this context aswell?
 
S

Steve Pugh

Steve Pugh wrote:

"default is 12px" ... px is not pt

Bingo. But everything displayed on a screen is displayed in pixels. So if
the font size is specified in pt then it will be converted to pixels at
some point. The original Macs were designed with desktop publishing in
mind and so 72dpi was a sensible choice at that time.

All the early graphical browsers had a default font size of 12pt, this was
a hangover from DTP and word processing software that the browser
manufacturers thought that the users would be familiar with, even if it
made very little sense for screen display.

Back then, on Macs 12pt = 12px and on Windows 12pt = 16px (or 20px of
Large Fonts are selected in Windows).
... px is the same with 72 and 96dpi.
If you use px the font size is the same.

Yes, but that's got nothing to do with sizing the text in pt or em.
But it seems as if "using pt for font sizes is a bad idea anyway"
has something to do with this problem that the font is getting
very small on Mac and Linux for instance.

Can you give an example of an actual site that's causing this problem and
tell us which versions of which browsers are displaying the problem?
Was it stupid with old macs aswell?

Yes.

Even if the factory default was smaller in pixel terms (it might have been
larger in real terms depending on the screen resolution) the user could
change the default if it was too small for them to read. Assuming that the
user has browser default that is too small for them to read is very
foolish - how many users would keep using a browser where they can't read
the default text size, especially when so many sites try to force text to
be smaller than the default.
... and in some browsers this will be too small.

Some browsers have a default font size for their users to read?
How many users would continue to use a browser where they couldn't read
the defaukt text size? They would change the default or change the browser.

Steve
 
T

Toby Inkster

Jan said:
Win has 96 'dpi' (dots per inch) but Mac and Linux come with 72 dpi.

I've never seen a Linux distro that defaults to 72dpi. Most default to
75dpi, some default to 100dpi.
 
L

Lauri Raittila

That is just default, and has nothing to do with reality.

Most likely that was 10 years or some ago, and after that there has been
something that makes sence... IIRC, when I installed X year ago, it asked
me correct dpi someway...
hm - I am having a look now in (or is it at[?]) my info centre
of fedora core ...
http://html.janfaerber.com/my_dpi_resolution.php

I have 81 x 81 dpi

That is most likely correct, if you have 17" monitor running 1024*768

Hm. I have now 13.7" LCD (same as 15" CRT) with 1024*768 and 19" with
1600*1200. Both set to 96dpi. First is about right, and second isn't...
So dpi has something to do

[ ] with software
[x] with hardware
[ ] with soft- and hardware

But, software that defaults incorrect value like 72dpi (good for 800*600
on 15") or 96dpi, make things unpredictable, if you try to use cm, mm, pt
or inch in screen to measure something. And real difference in dpi makes
impossible to use px as unit... So em and ex are about only units that
make sence. (percentage on fonts, as it is practically same as em there)
 
J

Jan Faerber

Sybren said:
Jan Faerber enlightened us with:

Yep, but not with plain wine, but with Crossover Office.

Sybren

Thank you - you posted it already a second time now.
I have OpenOffice.
Is there an integrated IE similar browser in Crossover Office?
What is the name of that Office Application?
 
S

Sybren Stuvel

Jan Faerber enlightened us with:
Thank you - you posted it already a second time now.

I have? My server must have had a hickups.
I have OpenOffice. Is there an integrated IE similar browser in
Crossover Office?

Crossover Office is a fork of Wine, especially tweaked to run MS
Office, MS Internet Explorer and other Windows applications. It is
*not* an office suite.

Sybren
 
T

Toby Inkster

Jan said:
So dpi has something to do

[ ] with software
[ ] with hardware
[ ] with soft- and hardware

There are two "dpi"s to consider:

1. Your real dpi. This is dependent on your physical screen size and the
pixel size of your desktop. e.g. say your desktop is 800x600 and your
screen is 15" (measured diagonally), then your dpi is:

square_root(800^2 + 600^2) / 15 =~ 66.7.

2. Your configured dpi. This is the dpi your browser/operating
system/whatever *believes* to be your real dpi. This is usually set in
some "Advanced" tab of some settings screen, so is normally wrong.

When you specify any sizes in physical sizes like inches, centimetres,
points or whatever, your computer uses the configured dpi to "translate"
the measurement into pixels so that it can display them on the screen.

For example, my screen is 17" (16" viewable), 1280x1024 so has a real dpi
of about 102.4. I have configured my dpi as 102.

So for a font size of 12pt, the browser thinks 12pt is 1/6 of an inch (a
point is defined as 1/72 of an inch), which is exactly 17 pixels at 102
dpi. So a 12pt font is drawn as 17px on my screen.
 
M

Michael Fesser

.oO(Jan Faerber)
To get the screen resolution can be useful:

Why? There's absolutely no relationship between the screen resolution
and the available space (viewport) in the browser window.
www.ba-ca.com/js/common_lib.js
<quote>
//--- get screen resolution ---
[...]

I run a dual-head system: One screen is currently on 1600x1200px, the
other on 1152x864px. What do you think the above function will return
for screen width and height?

Micha
 
S

Sam Hughes

.oO(Jan Faerber)


Why? There's absolutely no relationship between the screen resolution
and the available space (viewport) in the browser window.

Well, usually one is less than the other.

If you knew that the screen resolution was say, 1400 px wide, you could use
a background image that was 1400 px wide and be confident it wouldn't
repeat horizontally.

Not that trying to do that would be a good idea -- but a relationship does
exist.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top