CSS Fonts: Detect Font DPI use specific CSS

[David Jubinville]

Hi All,

I've run into a bit of an interesting problem with CSS and font DPI and
would certainly welcome help.

Problem:
Page layout defined in CSS has font size issues (overlapping frames, text
overflowing out of popup window, etc) on a windows systems using 120dpi
fonts (large fonts), but everything looks perfect in 96dpi small fonts.

My question is this, is there a way to detect system font size and select an
appropriate CSS style for each case? The deployment is a "slideshow" like
courseware solution that is displayed in a popup window - overflow is not an
option as the window can not scroll.

Fonts sized at 8.5pt display perfectly in 96dpi but are much too large in
120dpi. The reason for using absolute a.o.2 relative type size is that
..bodycopy defines core type site-wide. If it is set to relative, type gets
insanely small in some cases.

If anyone knows of a solution or a possible method of detecting system font
dpi - not resolution - I would be very grateful.

Thanks in advance!

David

[Brian]

Re: CSS Fonts: Detect Font DPI use specific CSS

David Jubinville wrote:
[color=blue]
> is there a way to detect system font size[/color]

No. But you can still work with that font size via the magical 1em.

font-size: 100%; /* this sets font size to 1em or exactly what the user
has configured on his or her system */

max-width: 10em; /* this sets the maximum width to 10 times the the
user's chosen font size */


--
Brian (remove "invalid" to email me)

[C A Upsdell]

Re: CSS Fonts: Detect Font DPI use specific CSS

"David Jubinville" <djubinville@ro gers.nospam.com > wrote in message
news:t9ednTEeLI haJQvcRVn-tw@rogers.com.. .[color=blue]
> Hi All,[/color]
[color=blue]
> Fonts sized at 8.5pt display perfectly in 96dpi but are much too large in
> 120dpi. The reason for using absolute a.o.2 relative type size is that
> .bodycopy defines core type site-wide. If it is set to relative, type gets
> insanely small in some cases.
>
> If anyone knows of a solution or a possible method of detecting system
> font
> dpi - not resolution - I would be very grateful.[/color]

I solved this problem (type gets insanely small) some time ago, using this
technique: instead of specifying font sizes using px or pt (which is bad
for reasons I should not have to repeat), and instead of specifying font
sizes using % or em (which is generally recommended, but which can result in
the type too small problem), I instead use the standard CSS font sizes
xx-small, x-small, small, medium, large, x-large, and xx-large. The default
font size is medium (except for IE, for which it is small, but which can be
circumvented using CSS trickery), and smaller sizes can be produced by
dropping down to small, x-small, etc.

In my standard CSS file I typically do:

@import url(style_std.c ss);

and in the imported CSS file I have code of this form to set the font sizes:

big { font-size:small; voice-family: "\"}\"";
voice-family:inherit; font-size:medium; }
html, p, li { font-size:x-small; voice-family: "\"}\"";
voice-family:inherit; font-size:small; }
small, code { font-size:xx-small; voice-family: "\"}\"";
voice-family:inherit; font-size:x-small; }

Antique browsers never see this (because of the @import); the first size
specified after the '{' is for IE; the last size specified before the '}' is
for standards-compliant browsers, with the voice-family trick to ensure that
IE doesn't see it.

[Christoph Paeper]

Re: CSS Fonts: Detect Font DPI use specific CSS

*C A Upsdell* <cupsdell0311XX X@-@-@XXXrogers.com> :[color=blue]
>
> big { font-size:small; voice-family: "\"}\"";
> voice-family:inherit; font-size:medium; }[/color]

In a geeky way, that's almost sig-worthy stupid.

--
"Show me a sane man and I will cure him." -- C.G. Jung

[Brian]

Re: CSS Fonts: Detect Font DPI use specific CSS

C A Upsdell wrote:
[color=blue]
> I solved this problem (type gets insanely small) some time ago,[/color]

There was no problem until you created one by specifying font size in
the first place.
[color=blue]
> I instead use the standard CSS font sizes xx-small, x-small, small,
> medium, large, x-large, and xx-large. The default font size is medium
> (except for IE, for which it is small, but which can be circumvented
> using CSS trickery),[/color]

There is no need for such trickery. This is one part of css that is
pretty easy to nail. The only bug to worry about is margins, widths,
etc. specified in em units, and that only affects MSIE/Win. The solution
is to explicitly declare the correct font size for body:

body { font-size: 100% }
[color=blue]
> and smaller sizes can be produced by dropping down to small, x-small,
> etc.[/color]

There is little need for any font size less than 100%, except perhaps
for legalese. And for that, you need not try to figure out css keywords.

..legalese { font-size: 90% }

--
Brian (remove "invalid" to email me)

[C A Upsdell]

Re: CSS Fonts: Detect Font DPI use specific CSS

"Brian" <usenet3@juliet remblay.com.inv alid> wrote in message
news:3x8md.9110 38$Gx4.375633@b gtnsc04-news.ops.worldn et.att.net...[color=blue]
>C A Upsdell wrote:
>[color=green]
>> I solved this problem (type gets insanely small) some time ago,[/color]
>
> There was no problem until you created one by specifying font size in
> the first place.
>[color=green]
>> I instead use the standard CSS font sizes xx-small, x-small, small,
>> medium, large, x-large, and xx-large. The default font size is medium
>> (except for IE, for which it is small, but which can be circumvented
>> using CSS trickery),[/color]
>
> There is no need for such trickery. This is one part of css that is
> pretty easy to nail. The only bug to worry about is margins, widths,
> etc. specified in em units, and that only affects MSIE/Win. The solution
> is to explicitly declare the correct font size for body:
>
> body { font-size: 100% }[/color]
[color=blue]
> There is little need for any font size less than 100%, except perhaps
> for legalese. And for that, you need not try to figure out css keywords.[/color]

Wrong. There can be many valid reasons to use a font size other than 100%.
Legalese might be one of these reasons. Other good reasons could be:
superscripts, subscripts, small caps text, text to stand out by being
larger, footnotes, sidenotes, sidebars, menus, captions, advertising, dense
tables, etc., etc., etc.
[color=blue]
> .legalese { font-size: 90% }[/color]

Which can result in the 'type gets insanely small' problem; whereas my
equivalent suggestion -- .legalese { font-size:small; } -- does not.

IMO the important things are to (a) have font sizes that are scaled to the
user's default font size, and (b) have font sizes that are readable.

[brucie]

Re: CSS Fonts: Detect Font DPI use specific CSS

In comp.infosystem s.www.authoring.stylesheets C A Upsdell said:
[color=blue][color=green]
>> .legalese { font-size: 90% }[/color][/color]

whats wrong with 100% and the other text 110%. why do people insist on
making text smaller than what the visitor prefers. could it be because
people are more concerned with how it looks rather than how readable it
is.

--
the facts and opinions expressed by brucies
l i t t l e v o i c e s
are not necessarily the same as those held by brucie.

[Beauregard T. Shagnasty]

Re: CSS Fonts: Detect Font DPI use specific CSS

C A Upsdell wrote:
[color=blue][color=green]
>>.legalese { font-size: 90% }[/color]
>
> Which can result in the 'type gets insanely small' problem; whereas my
> equivalent suggestion -- .legalese { font-size:small; } -- does not.[/color]

Sure does on my pages. 90%, that is.

If it fails for you, you may not have body set at 100%.
[color=blue]
> IMO the important things are to (a) have font sizes that are scaled to the
> user's default font size, and (b) have font sizes that are readable.[/color]

...which is why we use percentages. A hundred of them. <g>

--
-bts
-This space intentionally left blank.

[Christoph Paeper]

Re: CSS Fonts: Detect Font DPI use specific CSS

*brucie* <shit@usenetshi t.info>:[color=blue]
>[color=green][color=darkred]
>>> .legalese { font-size: 90% }[/color][/color]
>
> whats wrong with 100% and the other text 110%.[/color]

The preferred font size set in the browser (100%) is for main text, that's
what matters. I don't like bigger than necessary (main) text either.
[color=blue]
> why do people insist on making text smaller
> than what the visitor prefers.[/color]

My feeling is you set your preferred font size too low, maybe to your
minimal comfortable reading size. That would be your fault.
[color=blue]
> could it be because people are more concerned with how it looks
> rather than how readable it is.[/color]

That's the people using 'font-size' with pixel values or 'body', 'p' etc.
below 100%/1em/medium. You are once again over-sensitive.

Btw.: Using all lowercase and not the appropriate punctuation marks (for
questions) doesn't enhance readability as well.

--
"Try to learn something about everything and everything about something."
Thomas H. Huxley

[brucie]

Re: CSS Fonts: Detect Font DPI use specific CSS

In comp.infosystem s.www.authoring.stylesheets Christoph Paeper said:
[color=blue][color=green]
>> why do people insist on making text smaller
>> than what the visitor prefers.[/color][/color]
[color=blue]
> My feeling is you set your preferred font size too low,[/color]

theres nothing wrong with my font size. whats wrong is authors telling
me should really be 10% smaller. if i wanted it 10% smaller i would make
it 10% smaller.
[color=blue]
> maybe to your minimal comfortable reading size. That would be your
> fault.[/color]

its the authors fault specifying 10% smaller than what i prefer, i know
what i prefer and its not 10% smaller than what i have. stop trying to
blame me.
[color=blue]
> You are once again over-sensitive.[/color]

i don't like authors telling me what my font size should be (or how long
the lines of text should be). stop trying to control me.
[color=blue]
> Btw.: Using all lowercase and not the appropriate punctuation marks (for
> questions) doesn't enhance readability as well.[/color]

you have a killfile, use it. usenet was much better once i killfiled
myself.

--
the facts and opinions expressed by brucies
l i t t l e v o i c e s
are not necessarily the same as those held by brucie.

[kchayka]

Re: CSS Fonts: Detect Font DPI use specific CSS

C A Upsdell wrote:[color=blue]
> "Brian" <usenet3@juliet remblay.com.inv alid> wrote in message
>[color=green]
>> .legalese { font-size: 90% }[/color]
>
> Which can result in the 'type gets insanely small' problem; whereas my
> equivalent suggestion -- .legalese { font-size:small; } -- does not.[/color]

You are mistaken. % units do not trigger the "insanely small" text size
problem in WinIE. Only em units do.

Keyword sizes are a worse alternative, because of the inconsistent
rendering across browsers. Tis also a waste of time and effort to try to
work around these differences with hacks. % units work so nicely without
any special effort - they are the only sane solution.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[C A Upsdell]

Re: CSS Fonts: Detect Font DPI use specific CSS

"Beauregard T. Shagnasty" <a.nony.mous@ex ample.invalid> wrote in message
news:az9md.9647 $zk7.8184@twist er.nyroc.rr.com ...[color=blue]
>C A Upsdell wrote:
>[color=green][color=darkred]
>>>.legalese { font-size: 90% }[/color]
>>
>> Which can result in the 'type gets insanely small' problem; whereas my
>> equivalent suggestion -- .legalese { font-size:small; } -- does not.[/color]
>
> Sure does on my pages. 90%, that is.[/color]

Not if it is nested, which what the OP was concerned with. 90% of 90% of
90% ... can quickly become too small to read, whereas font-size:small
font-size:small font-size:small ... does not.

[C A Upsdell]

Re: CSS Fonts: Detect Font DPI use specific CSS

"kchayka" <usenet@c-net.us> wrote in message
news:2vstebF2og gguU1@uni-berlin.de...[color=blue]
>C A Upsdell wrote:[color=green]
>> "Brian" <usenet3@juliet remblay.com.inv alid> wrote in message
>>[color=darkred]
>>> .legalese { font-size: 90% }[/color]
>>
>> Which can result in the 'type gets insanely small' problem; whereas my
>> equivalent suggestion -- .legalese { font-size:small; } -- does not.[/color]
>
> You are mistaken. % units do not trigger the "insanely small" text size
> problem in WinIE. Only em units do.[/color]

Wrong. Once upon a time, I did use % units, and I did have endless
shrinking text size problems (at least with some browsers), and switching to
small, x-small, etc. stopped this problem for good.
[color=blue]
> Keyword sizes are a worse alternative, because of the inconsistent
> rendering across browsers. Tis also a waste of time and effort to try to
> work around these differences with hacks.[/color]

The inconsistency is in IE, easily overcome. And the CSS trickery which
overcomes this inconsistency can be copied and pasted from site to site,
changing only the selectors, as needed.

[kchayka]

Re: CSS Fonts: Detect Font DPI use specific CSS

C A Upsdell wrote:[color=blue]
> "kchayka" <usenet@c-net.us> wrote in message
> news:2vstebF2og gguU1@uni-berlin.de...[color=green]
>>
>> % units do not trigger the "insanely small" text size
>> problem in WinIE. Only em units do.[/color]
>
> Wrong. Once upon a time, I did use % units, and I did have endless
> shrinking text size problems[/color]

Caused by using a body text size smaller than 100%?

Doctor, it hurts when I do this...

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[brucie]

Re: CSS Fonts: Detect Font DPI use specific CSS

In comp.infosystem s.www.authoring.stylesheets C A Upsdell said:
[color=blue][color=green]
>> You are mistaken. % units do not trigger the "insanely small" text size
>> problem in WinIE. Only em units do.[/color][/color]
[color=blue]
> Wrong.[/color]

i disagree. i'm always coming across sites with the IE em bug. set your
font size to 'smallest' and you'll see it for yourself. using the same
size specified with % and theres no problems.
[color=blue]
> Once upon a time, I did use % units, and I did have endless
> shrinking text size problems (at least with some browsers),[/color]

sounds like an inheritance issue with your css. i've never had any
problems using %.
[color=blue]
> and switching to small, x-small, etc. stopped this problem for good.[/color]

the problem with keywords is that browsers don't use the same base size.
just as kchayka said.
[color=blue]
> The inconsistency is in IE, easily overcome. And the CSS trickery which
> overcomes this inconsistency can be copied and pasted from site to site,
> changing only the selectors, as needed.[/color]

or you could just use % and not fart around with unneeded hacks.

--
the facts and opinions expressed by brucies
l i t t l e v o i c e s
are not necessarily the same as those held by brucie.