Mobileread
Em Vs Percentage
#1  josephjaya 11-27-2019, 05:24 AM
Dear All,

I need some clarification about the value of percentage to em. For example if we declare the value in css 10% it's equal to 3em?

Please let me know the exact value of percentage to em. If any converter available in website.

Kindly check and advice.

Thanks,
Joseph Jayaseelan D.
Reply 

#2  pdurrant 11-27-2019, 07:31 AM
CSS percentages usually reference the width (or height) of the display area.
The em measure is relative to the font size.

There's no relationship between percentage and em at all.
Reply 

#3  Notjohn 11-27-2019, 12:03 PM
In the lead-type days, an em was the width of a capital letter M. That's no longer true, but it's good enough to go by. My style sheet uses ems to designate paragraph indents (1.5 em), blocks of text (1 em), and margin-top and margin-bottom (usually 0.0 em but that can vary).

I use percents to designate font size (200% for the paragraph style for the book title, 150% for chapter heads and the paragraph style for the subtitle, 125% for sub-heads and the paragraph style for author and publisher).

https://notjohnkdp.blogspot.com/2013/07/heres-my-style-sheet.html
Reply 

#4  Turtle91 11-27-2019, 03:59 PM
Here's a short discussion on the differences: CSS Font-Size: em vs. px vs. pt vs. percent

There is some benefit to working in percent, but as long as you set the font size in % in the <body> then ALL other (font-size) references can be made in EM to keep them relative to each other regardless of screen size.

eg:

Code
body {font-size:100%}
p {font-size:1em}
h1 {font-size:1.5em}
h2 {font-size:1.3em}
h3 {font-size:1.2em}
h4 {font-size:1.1em}
Reply 

#5  RbnJrg 11-27-2019, 04:11 PM
Quote Notjohn
I use percents to designate font size (200% for the paragraph style for the book title, 150% for chapter heads and the paragraph style for the subtitle, 125% for sub-heads and the paragraph style for author and publisher).
But to set a font-size in percents is exactly the same as setting it in em. That is, if you has for your -for example- "h1" style the following:

Code
h1 { font-size: 200%;
}
is the same if you write:

Code
h1 { font-size: 2em;
}
A different thing is if you set a margin in percentage or ems; here a percentage means a percentage of the screen size while a margin in "ems" means a margin based on the font-size you are using in the respective style.
Reply 

#6  JSWolf 11-27-2019, 04:23 PM
Quote RbnJrg
But to set a font-size in percents is exactly the same as setting it in em. That is, if you has for your -for example- "h1" style the following:

Code
h1 { font-size: 200%;
}
is the same if you write:

Code
h1 { font-size: 2em;
}
A different thing is if you set a margin in percentage or ems; here a percentage means a percentage of the screen size while a margin in "ems" means a margin based on the font-size you are using in the respective style.
h1 is 2em by default. 200% would be 4em.
Reply 

#7  JSWolf 11-27-2019, 04:29 PM
Quote Turtle91
Here's a short discussion on the differences: CSS Font-Size: em vs. px vs. pt vs. percent

There is some benefit to working in percent, but as long as you set the font size in % in the <body> then ALL other (font-size) references can be made in EM to keep them relative to each other regardless of screen size.

eg:

Code
body {font-size:100%}
p {font-size:1em}
h1 {font-size:1.5em}
h2 {font-size:1.3em}
h3 {font-size:1.2em}
h4 {font-size:1.1em}
um...

Code
p {font-size: 1em}
h1 {font-size: 2em}
h2 {font-size: 1.5em}
h3 {font-size: 1.17em}
h4 {font-size: 1em}
h5 {font-size: .83em}
h6 {font-size: .67em}
Reply 

#8  pdurrant 11-27-2019, 04:40 PM
Quote pdurrant
CSS percentages usually reference the width (or height) of the display area.
The em measure is relative to the font size.

There's no relationship between percentage and em at all.
Oh! Unless you use percentage for the font size, of course!

In which case 1em = 100%, 0.5em = 50%, etc.
Reply 

#9  RbnJrg 11-28-2019, 07:11 AM
Quote JSWolf
h1 is 2em by default. 200% would be 4em.
Not at all. I see you didn't test what I wrote; do the try and you'll see that your statement is wrong. A font-size of 200% for h1 is exactly the same as a font-size of 2em.

EDIT: Here you have an epub so your tests will be easier. And here you can also watch an screenshot:

show attachment »

with

Code
.percent { font-size: 400%;
}
.ems { font-size: 4em;
}
and

Code
<h1 class="percent">TITLE in %</h1>
<h1 class="ems">TITLE in ems</h1>
[epub] Percentages and ems.epub (2.0 KB, 63 views)
Reply 

#10  Turtle91 11-28-2019, 09:57 AM
Quote JSWolf
um...

Code
p {font-size: 1em}
h1 {font-size: 2em}
h2 {font-size: 1.5em}
h3 {font-size: 1.17em}
h4 {font-size: 1em}
h5 {font-size: .83em}
h6 {font-size: .67em}
I do believe you are pushing your preferences (again), and perhaps don't understand what "eg" means. It means "for example"...(and for my Latin Teacher wife: It is short for the Latin exempli gratia, “for the sake of example.”) I was giving an example of how to set CSS using relative sizes in EMs, not telling people how they should style their books.

Quote JSWolf
h1 is 2em by default. 200% would be 4em.
As RbnJrg mentioned, is not correct. h1 might have a 2em default value, but when you specify a value in css then it over-rules any default value - it does not multiply the default value.
Reply 

  Next »  Last »  (1/2)
Today's Posts | Search this Thread | Login | Register