Hi,
I always thought that "1em" equals one line height. But if I replace
<br><hr><br>
by
<hr style="margin: 1em 0;">
tables above and below the <hr> get closer in IE as well as FF.
This brings me to the question: What's a <br>, expressed in CSS*?
*) with no margins and padding defined elsewhere
Axel
PS: Here's the sample code I've been using to test the effect:
<html>
<body>
<table border=1><tr><t d>a</td></tr></table>
<br><hr><br>
<table border=1><tr><t d>b</td></tr></table>
</body>
</html>
---------------------------------------------
<html>
<body>
<table border=1><tr><t d>a</td></tr></table>
<hr style="margin: 1em 0">
<table border=1><tr><t d>b</td></tr></table>
</body>
</html>
Jul 21 '05
16  8422 
Steve Pugh wrote: "Axel Dahmen" <NO*****@NoOneK nows.invalid> wrote:
I always thought that "1em" equals one line height.
No, it equals the height of the font. The line-height is normally a
little bit larger, typically about 1.15 times larger.
Well it's a fine point, but no 'em' does not equal the 'line-height' of
a font, but the 'width' of the font's capital 'M'. This can vary among
fonts of the same size depending on the font's characteristics . 1em for
a 12pt 'Wide Latin' will be different than a compressed font like 1em of
12pt 'Impact'.
em=width of 'M' character
en=width of 'N' character
px=1 pixel dependent on device resolution
pt=approx 1/72 of an inch, computers use 1/72 I believe***
cm=1 centimeters...
***Unfortunatel y at present I have found different OS's and browsers can
wildly 'disagree' on the size of the same font displayed at the same
resolution when specified in points! We can only hope in time... ;-)
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO http://www.LittleWorksStudio.com
On Thu, 3 Feb 2005, Jonathan N. Little wrote: Well it's a fine point, but no 'em' does not equal the 'line-height' of
a font, but the 'width' of the font's capital 'M'. This can vary among
fonts of the same size depending on the font's characteristics . 1em for
a 12pt 'Wide Latin' will be different than a compressed font like 1em of
12pt 'Impact'.
em=width of 'M' character
en=width of 'N' character
Sorry, but this is nonsense. It's only a *historical* explanation of
the terms "em" and "en". Today, em = font size and en = half font size.
Please refer to <news:comp.font s> .
--
Mars, unlike Earth, has no atmosphere.
The Chicago manual of style, 15th ed., p. 362
"Jonathan N. Little" <lw*****@centra lva.net> wrote: Steve Pugh wrote: "Axel Dahmen" <NO*****@NoOneK nows.invalid> wrote:
I always thought that "1em" equals one line height.
No, it equals the height of the font. The line-height is normally a
little bit larger, typically about 1.15 times larger.
Well it's a fine point, but no 'em' does not equal the 'line-height' of
a font,
I already said that it didn't. It equals the height of the font.
but the 'width' of the font's capital 'M'.
Not any more it doesn't. It originally did 2000 years ago but it
hasn't done so for some time.
This can vary among
fonts of the same size depending on the font's characteristics . 1em for
a 12pt 'Wide Latin' will be different than a compressed font like 1em of
12pt 'Impact'.
No, the em is dependent on the height of the font, not on the width of
any particular character (think of all the fonts that don't contain a
glyph for M).
The CSS definitions for the various length units can be found at
<http://www.w3.org/TR/CSS21/syndata.html#le ngth-units>
For a more general explanation of what the em is in modern typography
see, for example, <http://en.wikipedia.or g/wiki/Em_(typography) >
en=width of 'N' character
No such unit in CSS.
px=1 pixel dependent on device resolution
In CSS the px unit is defined differently but browsers ignore this and
treat 1px as one screen pixel.
pt=approx 1/72 of an inch, computers use 1/72 I believe***
In CSS 1pt is exactly 1/72 of an inch. Computers have different ways
of working out how many pixels 1 inch equals.
***Unfortunate ly at present I have found different OS's and browsers can
wildly 'disagree' on the size of the same font displayed at the same
resolution when specified in points! We can only hope in time... ;-)
Most browsers don't bother to work out what the resolution is and then
to work out how many pixels and inch should be. Instead they assume
that a fixed number of pixels equals one inch. Most modern browsers
say that 96px = 1 inch, so 12pt = 96/72 * 12 = 16 pixels, the default
in most browsers. Some older Mac browsers use 72px = 1 inch. Other
values are also used.
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor
Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>
But if there is no such unit representing line-height then, how can a
paragraph's margin possibly be defined to give a straight layout in a multi
column text like it's used in print media like magazines:
-------------------------------
| asdjfök | ajks öjklö |
| dsf dfs | gaerh sadfas |
| fffd fd | |
| dfas dfr | jkgfh hjjkfg |
| fasf df | fasdfdfasf |
-------------------------------
?
Axel
Axel Dahmen <NO*****@NoOneK nows.invalid> wrote: But if there is no such unit representing line-height then, how can a
paragraph's margin possibly be defined to give a straight layout in a multi
column text like it's used in print media like magazines:
-------------------------------
| asdjfök | ajks öjklö |
| dsf dfs | gaerh sadfas |
| fffd fd | |
| dfas dfr | jkgfh hjjkfg |
| fasf df | fasdfdfasf |
-------------------------------
?
I'm assuming that you want the space between the paragraphs on the right to
match the line-height of the paragraph on the left, so the lines of text on
the left stay aligned with the lines of text on the right.
If you set the line-height to a ratio (e.g., "line-height: 1.25") or to an
em-based value (e.g., "line-height: 1.25em"), then you can use an em-based
value for the margins/padding between the paragraphs (e.g., 1.25em).
--
Darin McGrew, mc****@stanford alumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp. com, http://www.HTMLHelp.com/
"Cheaters never win; they just finish first." - Johhny Hart
Jonathan N. Little wrote: Steve Pugh wrote:
"Axel Dahmen" <NO*****@NoOneK nows.invalid> wrote:
I always thought that "1em" equals one line height.
No, it equals the height of the font. The line-height is normally a
little bit larger, typically about 1.15 times larger.
Well it's a fine point, but no 'em' does not equal the 'line-height' of
a font, but the 'width' of the font's capital 'M'. This can vary among
fonts of the same size depending on the font's characteristics . 1em for
a 12pt 'Wide Latin' will be different than a compressed font like 1em of
12pt 'Impact'.
em=width of 'M' character
en=width of 'N' character
px=1 pixel dependent on device resolution
pt=approx 1/72 of an inch, computers use 1/72 I believe***
cm=1 centimeters...
***Unfortunatel y at present I have found different OS's and browsers can
wildly 'disagree' on the size of the same font displayed at the same
resolution when specified in points! We can only hope in time... ;-)
In general, em is a non-optimal measure for things on a computer screen.
As you correctly point out, different software can interpret and 'em'
very differently.
em was really only designed to be consistent within the same document
(assuming the same font). Useful for print designers.
--RC
On Wed, 16 Feb 2005, Rick Cook wrote:
[after a comprehensive quote, despite not addressing any of the points
raised in the quote.] In general, em is a non-optimal measure for things on a computer
screen.
Nonsense. For text there's nothing better. For images which need to
match text, it's debatable - but only because browser resizing
routines for pixel-based image formats are less than ideal. It would
be great with vector-based images.
As you correctly point out, different software can interpret and
'em' very differently.
Are you talking about the user's choice of text size? Then it's
working as designed.
http://www.w3.org/WAI/GL/css2em.htm
Or are you talking about a particular bug in a particular browser?
em was really only designed to be consistent within the same document
Eh?
(assuming the same font).
Oh yes, you do have a possible point (no pun intended) there.
That's what font-size-adjust was supposed to address, though its
definition was a bit muddled, and it didn't seem to get implemented
anyway, which is kind-of a shame.
Useful for print designers.
I'd say just the opposite. Print designers produce a product that
outputs to a fixed physical size. pt units would be good for that, in
a way that they can't be for computer displays. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: fis |
last post by:
Hi all,
I've problem because there are needed break lines in my texts on the
web site but i can't do it :(
My pipeline looks like: XMS -> I18N -> XSLT -> HTML
I have lot of texts in my "languages" files and these are describes
for things on my website.
Example text looks like this:
|
by: Lasse |
last post by:
I have done this simple function, it seems to work as intended, to
solve a problem i have had for a while. I couldnt find any sample
around that was working for me.
I would like to test it with you and see if there are any improvments
that i should make ;-)
It should be fast and if possible compatible with todays modern
browser-standards. It should be activated by the onload-event.
This is my code, free for all to use:
|
by: red |
last post by:
If I have <span>text</span> <br> and then some text
isn't there sopposed to be a line break between the span and the text ?
Why do browsers ignore the <br> ?
|
by: noor.rahman |
last post by:
I have an XML file that stores data from an HTML form. I use XSL to
display the data in HTML format. The data may have newline characters.
However, XSL is not displaying the newlines properly in the browser.
I even replaced all the newlines with <BR/> tags but eventhough I see
the tags in my source, I don't get a line break in the output document.
Any help would be greatly appreciated.
|
by: meltedown |
last post by:
Earlier, there was a discussion of why not to use <br>s too much. I
mostly don't like using <br>s at all but there is one situation where
its seems better than the alternative.
<h4> this is the paragraph header</h4>
<p> this is the paragraph</p>
If I want no margin between the header and the paragraph, I can use:
<h4 class='no_bottom_margin'> this is the paragraph header</h4>
<p class='no_top_margin'> this is the paragraph</p>
| | |
by: Winshent |
last post by:
I have a multi line text in an admin page on my cms.
I am trying to capture carriage returns as and replace them with
<p></p> bfore the string gets written to the database.
I have tried all the charcontrols option and chr(13) with success.. was
using the following code:
Dim s As String = MyTextbox.Text
|
by: Winshent |
last post by:
I have a multi line text in an admin page on my cms.
I am trying to capture carriage returns as and replace them with
<p></p> bfore the string gets written to the database.
I have tried all the charcontrols option and chr(13) with success.. was
using the following code:
Dim s As String = MyTextbox.Text
|
by: Summercoolness |
last post by:
so i am starting to use more of <br /and <div style="clear: both" /
which is the XHTML style...
now, won't those actually confuse the old browsers? for example,
will the old browser treat the "div" as not closing, and so everything
after the div will be treated as part of that div?
|
by: Nathan Sokalski |
last post by:
Something that I recently noticed in IE6 (I don't know whether it is true
for other browsers or versions of IE) is that it renders <br/and <br></br>
differently. With the <br/version, which is what most people use when they
write static code (some people use <br>, but with xhtml you are required to
close all tags), IE6 simply breaks to the next line like it is supposed to.
However, with <br></br>, which is what is sometimes generated by...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| | |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
