There is a code for "em" that allows the size of drop caps and graphics to be changed by the "view, text size" command in browsers..but IE uses "em" units as default..so the code has to translate the graphics dimensions to "em." I don't put a font-size in the "body" of the CSS code...letting the page default..then I use % values for font size throughout the page...I have never worked with "em" ..I have always used "px."
The question is...should px..em..pt be mixed in a page? How do I convert a px value of a graphic to em? If I use em for text and px for margins, etc..does it make any difference?
I am certain this has been discussed here so if someone can post some references, I would appreciate it.
1) pt should not be used for screen - it's a print u/m
2) px cannot be converted to em. a pixel is a pixel, whereas the size of 1 em is determined by the size of the letter M in the font being used, and by the default browser settings.
3) no idea what you're actually talking about in the first part of your post.
4) em for text, px for margins is fine. I would generally use em for both, however, as the proportions will then stay the same as the text size is increased/decreased.
quote:pt should not be used for screen - it's a print u/m
Your advice may be sound in terms of how browsers currently treat pt's, but allow me to argue against that in principle.
A pt is a real-world unit of measure. You could (probably can) make a ruler that measures pt's. Web pages are displayed on monitors which are physical objects in the real world. If the DPI of a monitor is known, then there's no reason that pt's can't be used to measure lengths or text sizes.
In fact, if that were done, it would be a really good thing. Why? Consider this: my parents recently bought an incredible 21-inch 1600x1200 LCD monitor. Running an LCD monitor in a non-native resolution is a bad idea because it blurs things. So why do you think they wanted to use it in 1024x768? Because everything in their operating system and on every web page is measured in terms of pixels, and they couldn't stand the small text. I had to change the font size in Windows and get them using Firefox with text zoom simply so that they would be willing to use the monitor's native resolution. Even now, things look pretty ugly in a lot of situations because the graphics around text weren't designed to be viewed at different pixel sizes.
If we measured things in real-world units like pt's, then this sort of thing wouldn't be a problem. No matter what resolution or size your monitor was, 12pt font would be 12pt font and would be perfectly readable. Larger monitors would unconditionally mean you could have more on your screen, and higher resolution would mean more detail, like it does in virtually every other use of the word. Of course, one could artificially increase their dpi if they wanted to fit more on the screen and they had a high enough resolution to make out smaller details.
So, my point is, this belief that real-world units of measure are harmful when used on screens is flawed, as it limits the user's ability or desire to use better hardware for viewing such things. The usage of relative units of measure such as em is great, as it reflects a desire to let the user decide how *they* want to view web pages. But it needs to be taken a step farther. If everything were measured in real-world units, then both designers and users would get what they want: designers could predict exactly how their pages would look ("this image is 3 times the text height no matter what"), and users could view them at whatever size is comfortable (by setting their dpi).
Anyway, sorry about the rant. In response to the original question: mixing em's with pixels *is* a good idea (since images have to be measured in pixels (for now) and em's let the user specify their font size), but it also can be difficult to do well. The goal is to let the text size be changed in such a way that it doesn't ruin the layout surrounding it.
Actually, Cascading Style Sheets, allows to mix various units. The % and em are some relative units, while px and pt are absolute. Mixing the units is often useful.
For some scripts I even set the font-size of a container to 1px, and the size of all the children were in em. That way it's possible to scale the effect/game/script/whatever via Ctrl+Plus and Ctrl+Minus.
As I said above, to precisely "convert" a graphic resolution in em, nest it in an element with the font-size set with an absolute unit.
The first part of the question...If a dropcap is used at the beginning of paragraph text..does the graphic resize when the user in the "View" "Text Size" in IE?
There is a code...(I hesitate to post third party links here) that resizes the image when the text is resized in the browser by the user ..It is handy with inline graphic caps..
Now..is there a standard code for changing that?
The web page asserts that IE uses "em" as the default...so the graphic in the img src command has to be resized in the CSS code (between <head .../head) to "em"
The code works fine in all browsers off line..I have let my web site go down because I am inactive for long periods of time..but I can post the link to the tutorial for the resize if it is a policy to post links to third party sites or send the link to slime or DL if they like so they can better understand the question.
How do I convert px graphics to em? I have been eyeballing but I am not happy with eyeball solutions.
OK..I am not being clear..
The question is
1) When a user resizes the Text in the Browser ..under View in IE...the graphics can be resized using a "img" code.
Does anyone know that code?
2) The code I have seen uses a command in the CSS script (head/head) section to change the image size to "em" because IE uses "em" as the default on resize for text..(Therefore if a graphic uses that "text size" browser command..the graphic size must be changed to "em")
How do you convert px to em for graphic size?
Is there anyway to find the size in px for the M cap in a font?
Yeah, that's the sad thing. I wish this sort of thinking were more prevalent.
quote:When a user resizes the Text in the Browser ..under View in IE...the graphics can be resized using a "img" code.
Does anyone know that code?
It would be possible, in theory, to write some JavaScript which detected the size of all images on the page and added CSS to set their width/height in em's - provided that you can tell how many pixels there are per em. Then they would resize with the text. But I don't know how to get the conversion factor.
quote:It would be possible, in theory, to write some JavaScript which detected the size of all images on the page and added CSS to set their width/height in em's - provided that you can tell how many pixels there are per em. Then they would resize with the text. But I don't know how to get the conversion factor.
I just gave the method in my previous post Alas it requires to nest the IMG in a tag, so the purists of semantic XHTML markup may not like that solution.
Oh, I didn't understand that the first time through. That's smart. You could do that with the body tag (or maybe even the html tag) and then specify *everything* in em's, and have your web page perfectly scalable. Cool.
Of course, resized images look pretty bad in most browsers. =(
The ideal solution would be to not use a graphic for your dropcap - just use text and CSS.
Hard to make it quite as pretty, but there are still plenty of ways to make it attractive...
Alternatively you could use em to set the width and height of the image - but as slime said, resizing the image in the browser is bound to make it ugly.
.
BTW - post whatever links you want, barring hardcore porn and the like...
Thanks DL-44
I noticed a problem with fixed width bordered divs in Firebird and Nav...
If you type in the div, and put your browser rez to 800..then keep increasing the text size under View...
The text increases outside the box..really messy..
By changing the absolute dimensions of the div using 1em=10px..then the box increased in size with the text.
Here is the link to the tutorial..(you may have to put an "l" on the end...it is truncated I think but it worked this way for me)
I resized a div box ...width: 42 px ....to....width: 4.2em ..then typed inside it..
And Firebird and Nav could both resize the box with the text..and the typing in the box stayed in the box when I resized larger and larger at 800 res
The rule of thumb is 0.8 em = 11 px so 1em=?
Now I used 10 px to resize that box but does 1em=13.75?
Also..if there is a div box with a identical size Background Image...how can the background image be resized?
If anyone figures out that code..which isn't covered in the tutorial..
Please let me know.
Now..it states that the resize feature can be "turned off" by a designer if the designer uses px in all the text dimension..I tried putting px value rather than default in the "body" command.. and it still resized all my text..because IE uses em to resize..
It must convert it
Does anyone have a short file to test that "set to px" part on? Set all fonts to px and see if IE resizes it? How about Nav? Mozilla? Test? Test? Test?
(I only have long files and I use percent for all text size..with no size set in the "body" command. The CSS text or web page default must be in em..
Appreciate any imput here..such as the command to reset the background graphic..
And why..if the font is default size (none specified) and percent..IE ..Mozilla, Nav all resize the font...the default must be in em..
quote:I noticed a problem with fixed width bordered divs in Firebird and Nav...
If you type in the div, and put your browser rez to 800..then keep increasing the text size under View...
The text increases outside the box..really messy..
First of all, I would not call this a "problem".
If you set the size of a box in absolute units, it will stay that size.
If the text increases, it will have no effect on the size of the box, because a pixel is always a pixel.
This also has nothing at all to do with what screen resolution you have or how big your browser window is.
As a couple of us said above, if you use em to set the size of an object, it will change in size as you increase/decrease the text size because the em is set to the size of the letter m - if the letter m is bigger, so will everything set to be that size.
quote:By changing the absolute dimensions of the div using 1em=10px..
This makes no sense on any level at all.
An em cannot be globally measured, as it depends on a great many things (the font being used, the default browser settings, and any custom user settings for the browser, for starters).
quote:Now I used 10 px to resize that box but does 1em=13.75?
No. An em is not any particular number of pixels.
I'm certain there are circumstances where that could be the case. I beleive that IE uses 16px as a default base for 1em. But that doesn't mean anything. An em is an em....and it's all relative and not directly covnertable.
quote:and it still resized all my text..because IE uses em to resize..
Can't even begin to understand this statement...
I don't know where IE is at with this, but Mozilla, Firefox, and Opera will all allow a user to resize text no matter what u/m is used.
quote:I use percent for all text size..with no size set in the "body" command. The CSS text or web page default must be in em..
Again I'm at a bit of a loss...
for one - there is no "body command" . Are you talking about the HTML body tag, or the CSS body selector? You should be specifying a default size in your CSS for the body selector.
Again, each browser has it's own default settings for how it displays a web page. Most allow users to customize these defaults. So you cannot leave things unspecified in hope that the default will display it properly.
quote:nd why..if the font is default size (none specified) and percent..IE ..Mozilla, Nav all resize the font...the default must be in em..
Again - each browser defines it's own default - there is not some "internet default" that controls how browsers display. Each browser has its own default, and most allow the user to alter the defaults.
Also, Most browsers will allow the user to change text size no matter what u/m is used. IE, as far as I know, does not - but that may have changed with some of the patches/service packs, etc.
You also need to understand that you are asking repeatedly for "the code" to do something. Most of these things can be accomplished many ways, and there is not simpyl some specific code to automatically do what you want here...
What you need to do is learn how properly code (X)HTML and CSS, and figure out what the best way to achieve your specific goal is. It's not as black and white as you seem to wish it was...
Ok DL-44
coding correctly..
Open a file..any file that has a bordered absolute box in mozilla and increase text size under View (it is easier to see at 800 rez)
..Does the text increase beyond the box?
If the text increases outside the box ..then reset the box to em..using a 1=10 or 12 convert ration and see if the box resizes with the text
DL-44 "As a couple of us said above, if you use em to set the size of an object, it will change in size as you increase/decrease the text size because the em is set to the size of the letter m - if the letter m is bigger, so will everything set to be that size."
All right...that is why the box is resizing when it is set to em..along with the text..
But how can a background image be resized..while the text and the box are being resized..
Img command? Where would that be inserted in the "background: url ("sss.gif") Where would that be resized?
The body would be CSS body selector..
I suppose there is an image tag that would set the size of the background image to em?
And even if you don't set the text to em..if the text is set to px..the browser still resizes it..so the browser is using em for Text..that is in the tutorial
no, it's not. The browser resizes a differnet unit depending on what you specify in the stylesheet. Ability to resize text != uses em as text unit. If you set your text in pt it resizes by x pt per resize command. If you set it in px it resizes by x px per resize command.
Thanks Skaarjj!!
However..the box will resize if the box is sized in em but not in px..Right?
Does anyone have any solutions to the text bleeding over the content of adjoining boxes when the text is made larger in View?
I have a web page, 3Col/header/footer, that doesn't bleed type at 300% User Resize in Nav..
but when the window is narrowed the bordered side boxes do overlap at that text size (just a bit)..and some of the text is obscured..otherwise the page works in all browsers
Just this one little point..
Anyone have any solutions to this?
I want complete accessibility at all User settings in all browsers..
I think you misunderstand something. An em is the size of an M in the current font. That means that the current font size changes the size of an em, so there is no straightforward conversion factor like that, unless you're assuming a certain font size.
quote:However..the box will resize if the box is sized in em but not in px..Right?
Listen carefully:
an em is a unit that is equal to the size of the letter M in whatever font is being used.
Therefore, if you use the unit of measure (u/m) em to specify something's size, the object will resize with the text - because the size of the letter M changes!.
This is pretty straightforward stuff.
quote:Does anyone have any solutions to the text bleeding over the content of adjoining boxes when the text is made larger in View?
This is the way the gecko engine (used in Netscape, Mozilla, and Firefox) deals with the issue of text larger than it's parent element. IE resizes the parent element to fit.
Simply two ways browsers deal with a problem, and no fix available to my knowledge.
quote:DL-44 stated
1em=16
No, I most certainly did not. I said that I *think* IE uses 16px as its default base for 1em.
The two statements, as I have explained many times so far in this thread, are not the same.
THERE IS NO DIRECT WAY TO CONVERT EM >> PX.
It's not possible.
Period.
And that's the whole point for em existing in the first place.
Thank you DL-44
I understand..but it doesn't help convert a 100px/100px graphic to "em"...
There seem to be many solutions to this but the best I have found so far:
I uploaded a page without setting the "font-size."
I specified font: Georgia, serif,
With the Calipers I measured each font at default medium view in all the browsers.
On my machine, at my resolution, the measurement was
Letter M=10px
That was identical for mozilla, navigator and IE.
That is MY MACHINE..MY RESOLUTION but it seems to be a good "rule of thumb."
I will try to upload the page and check it on other computers.
I like some of the suggestions Poi and others had..but for a quick, down and dirty way to do this on My Machine...1em=10px
Poi's solution is intriguing ..but too specific ..
Slimes solution is already being done by Opera
There is a "Default" conversion factor..or I wouldn't be able to measure identical values of "medium" or "100%" on all browsers...and pages would not load properly when "font size" is not specified.
IE does not resize all elements. The amount of zoom or resize is limited..so the text bleeds..but..not much.
I looked at about 30 different pages..there aren't any absolute solutions at 300+ zoom but there are many pages that look good or the problem is minimized when they are resized. I am studying those pages that look good for techniques that will give greater accessibility..
Thank you...Dl-44 for your patience and your answers!
(now, just a little question about light and shading on a button? )
Ok..
The purpose of M is to allow proportional scaling of 24 letters...So if the size of M is changed..the rest of the alphabet is resized in proportion.
Zoom..as Poi pointed out..is a proportional concept....so zoom and proportion can be done with scaling..
So..in order to zoom, scale and proportion an object other than text, the size value of the object must be set in "em"..and that means all objects on the page are scaled/zoomed in proportion to the specified value of "M" in a font..either user selected or browser default.
So...that means if I want all objects to *ZooooM* ...I have to set all objects as "em"...proportional to the size of "M" in the user selected or default font
2) The code for making a background image resize when the User resizes using the Text Size under View
Add...under the background: url (x.gif)
background-position: 100%;
Also, when "margin-left: auto" "margin-right: auto" is added to this command from the tutorial listed above, the image will center in all major browsers.
In the Tutorial:
Correction:
The background-position command will not work correctly..unless certain values are forced which makes the page hard to fix or change when the original unique forcing method is forgotten
Anyone know how set a background to resize without repeat?
So, is it that you just don't beleive me...or what?
As you can see from that "conversion" page, there simply is no conversion.
Period.
quote:Also, when "margin-left: auto" "margin-right: auto" is added to this command from the tutorial listed above, the image will center in all major browsers.
As stated above, using margin:auto; is the standard way to center a block level element.
The "text-align:center;" in the above example does nothing.
quote:Anyone know how set a background to resize without repeat?
repeat:no-repeat; will stop it from repeating.
Not aware of any way to resize the image with CSS/HTML. Possibly a javascript solution...
There is a ratio of 1em=10 px
Therefore it is possible to convert a graphic that is 500px to 50em
The size should remain the same IF the font if one of the ones listed on that page.
"Hobo" font is 1em=12px
So...it is possible to "convert" the numbers of pixels to em units
Or are you saying something else DL-44?
Also..
When I write "li" as a list of ..width: 4.2em;font-size: text-align: ;margin: ;
And I place an image <li><imgsrc..your.gif</li>
Opera reads that as block level element and won't center the image if the only command is text-align: center in the img..and img is the only element in the <li></li>
For some reason...adding both to that command makes the command global
So it centers in all browsers..
I am afeared resizing the background image is beyond my scope...I can do a work-around with an inline image that works as good or better than the bg..
Thanks again for your help..DL-44
'preciate it!
I submit this only for the informational first bit. This is not a plug for Opera - one cute hack does not make up for tons of horrible bugs (stupid ads aside, even).
skyetyger I reccommend taht you read thesetwo articles from A List Apart, they seem to go through many of the issues you've been having and asking about, they certainly helped me when I was building sites with Em measurements instead of px.
1) Replace the "M" in <div class..Pxbox> with any image ( <img src="ur.gif">
2) Write the PX size dimensions of the "img" in .Pxbox{width: ; height: ;}
3) Multiply the PX dimensions by 16..put those numbers in the .Embox {width: ; height: ; }
This has worked for every image I have tried..100% accuracy.
However:
1) The font em is set to font family: ; font-size: ;
2) The Elements are set to the default font....
Experiment with adding different font-family and font-size to the body selector and to .Embox.
The ration is 1em=16 if the font-size is 100%, 1em, or not set.
I think this works..
Anyone want to play with it and tell me if I am wrong?
I have been wrong before
WHERE IT SAYS 3) MULTIPLY...
IT SHOULD BE DIVIDE
DIVIDE THE PX BY 16 = EM
OR
IF 16 DOESN"T WORK
resize the .embox{ width: ; height: ; } until the boxes match
(This is a very confusing subject but I think I have it figured out..Using the code posted above)
quote:The ration is 1em=16 if the font-size is 100%, 1em, or not set.
I think this works..
/!\ It probably works ... but ONLY for the font family and font size used here. In you example it uses the default font-family/size, which is quite problematic as the users can change it and it'll not result in the same scale ratio.
You should/must use a generic font-family ( to make sure the font is available on various platforms ) for such conversions, and use the method I suggested above, that is to nest the images sets in em within an element with a generic font-family and a fixed size.
IF
font-family: ;
font-size: em ; (any number "em" rather than 100%)
is set in the {body},
The <div class="Embox"> image< will still stay sized at a ratio of 16px=1em.
That is because the font is sized to the page makers specs but the elements remain at default.
If you change the font-family / font-size in .Embox...then the ratio will reset to the family/size value set in Embox.
But your solution is the best..
I will use yours and stop playing with this..
posted 03-26-2005 21:33
