Understanding EMs and REMs
As we know Bootstrap 4 is using em’s and rem’s instead of pixels, so its necessary to understand what these units are, and how they work. Let’s take a look.
There are few things that you should memorise about em’s and rem’s, these points will help you understand these units more easily.
Let’s try to explore these points more closely with help of an example.
I have created 3 DIVs with different IDs,
<html>
<body>
<div class="box" id="box1">Pixels</div>
<div class="box" id="box2">EM's</div>
<div class="box" id="box3">REM's</div>
</body>
</html> Now I have added width and height to all 3 DIVs in CSS, and added a font size on HTML element. Notice that i have used different units on all 3 DIVs, so that we can see the difference between them.
html {
font-size: 16px;
}
.box {
float: left;
margin: 10px;
border: 1px solid #000;
padding: 10px;
}
#box1 {
width: 100px;
height: 100px;
}
#box2 {
width: 6.250em;
height: 6.250em;
}
#box3 {
width: 6.250rem;
height: 6.250rem;
}You might have noticed that on box2 value of width and height is in EMs and on box3 values are in REMs, but if you run this code in browser, all 3 boxes will have same size.
How EM’s and REM’s are calculated?
Before we move ahead, let’s take a look at how EM’s and REM’s are calculated against pixels.
As i have mentioned earlier “Both em and rem units work relatively to a base font size, that is defined in pixels”.
Base font size is always the font size of root element, that is HTML tag in any html document. Default font size set by browsers in 16px, which you can change in your browser’s settings.We can overwrite base font size in our CSS file,
by assigning a font size to HTML element, like we did in our example.
But, what about calculations?
Calculation is actually very simple. In our example we have a 16px base font size, and 100px width and height for boxes. So its value in EM’s and REM’s is 100/16 = 6.25
Desired size in PX / base font size in PX = value in EM or REM
Or you can reverse the calculation 6.25 * 16 = 100
Value in EM or REM * Base font size = Size in PX
You need these calculations to find out what values you need to assign to EM and REM units while using them in your CSS code. Browser will do same calculations for rendering the code.
Changing the value of base font size on HTML element will automatically change the values of EM’s and REM’s everywhere they are used in CSS code.
Try to change values of base font size, and width or height values of boxes and notice how calculations are done.
Because both EM and REM work relatively to base font size, it make them these units flexible and scalable. You can easily change values of these units, just by changing the value of base font size at one place.
Difference between EM and REM
Now we understand how EMs and REMs work, and how they are different from Pixels. But we have not seen what’s the difference between these 2 units, let’s take a look.
REM’s are always relative to base font size, however EM’s are relative to font size of its parent element
Let’s add a font size on body
body {
font-size: 20px;
}If you look at the hierarchy of our HTML code, body tag is the parent of all DIVs we have added. Adding a font-size on body will change the values of EM units on #box2 because EM works relatively with font size of parent element. However this will not have any impact on other 2 DIVs with values of pixels and REMs.
So formula for calculation of EM’s is actually a bit different from previous one
Desired size in PX / element’s font size in PX = value in EM
Wait, element’s font size? i have been saying parent’s font size till now. Let me clarify.
W3C specification defines EM as: “Equal to the computed value of the font-size property of the element on which it is used.”
If you have not defined a value for an element, it will automatically inherit the font-size of its parent or ancestor element that have a font-size property defined.So if you add a font-size on .bo
#box2, that font-size will be used for calculations of EM unit. And if you don’t add a font-size on .box or #box2, they will inherit font-size defined on body or html, whichever have a font-size defined.
Let’s revise all 4 points once again, that i asked you to memorize for better understanding of EM and REM units:
If you have used EM or REM as font-size of element, or on a parent element, Browser will first convert that font-size in pixels, and then use this font-size for all other calculations.
Bootstrap 4 is following the idea presented by Chris Coyier, “px at the Root, rem for Components, em for Text Elements”. You can read more about this in his original article here: https://css-tricks.com/rems-ems/
[…] recap: In the previous part of this post, first, we have created a plugin for our Gutenberg Block. Second, installed and […]
[…] For more details on how this works, please read “Understanding EMs and REMs”. […]
it doesn't work ok on all browsers but the article is great. I'm a webdesigner myself and from time to time I believe we should do awesome designs and projects for a wider public and let the other segment to upgrade their browsers. I still get hits/visits from users who use IE old crappy versions and nope, they are not bots or VM "users" .
I didn't tried this, but you can try adding a condition before return statement, to check if value of $_product->get_stock_quantity() is greater then 0, return "In Stock", else return "Out of Stock".
I didn't tried this, but you can try adding a condition before return statement, to check if value of $_product->get_stock_quantity() is greater then 0, return "In Stock", else return "Out of Stock".
Hello, Is there any way how to make this code show "In Stock" or "Out of Stock" messages instead of the quantity number? I would really appreciate some help on this. Sincrerely, Cannot-code-for-my-life Valle
thank you! very helpful
woooov . i need that , thank for this usefull post . thanks
Excellent Article, great information. Your Blog is good source of learning. Keep it up
thanks for the post sir,it helped a lot.can you please explain how can we keep startHere arrow indication in menu Bar as shown here at shoutmeloud.com ,i have asked mr.harsha aggrawal he replied it came inbuilt in child theme .How can we design it in menubar of other themes . thank you.
Can you provide a pdf file with these instructions? Thanks. Roberto.
It's very easy to find out any topic on net as compared to books, as I found this article at this site.
Hi Alok, greetings from Panama, I made a little modification to make this code can run with ie8 and ie9 very closer like the standard conditional comments but into xhtml code, and sorry for my english. I hope this code could be a help for a lot of developers. //<![CDATA[ var div = document.createElement("div"); div.innerHTML = "<!--[if IE 8]><![endif]-->"; var isIE8 = (div.getElementsByTagName("i").length == 1); div.innerHTML = "<!--[if IE 9]><![endif]-->"; var isIE9 = (div.getElementsByTagName("i").length == 1); if (isIE8) { $('html').addClass('ie').addClass('ie8'); } else if (isIE9) { $('html').addClass('ie').addClass('ie9'); } //]]>
hi partner, very very nice effort but one must point out you would require JS and Jquery in the client and server. Other than that, good.
it was usefull
I love your blog.. very nice colors & theme. Did you create this website yourself or did you hire someone to do it for you? Plz respond as I'm looking to construct my own blog and would like to find out where u got this from. thanks
Hey, thanks for the blog article.Really looking forward to read more. Much obliged. ebkbbdbaacce
Look and Feel of your website is great. Jaspreet Kaur
This arclite keeps it real, no doubt.
Using a solid color to transparent background image is no big deal and can be applied to all browser, that's what I did. Thanks great tut.
Using a solid color to transparent background image is no big deal and can be applied to all browser, that's what I did. Thanks great tut.
This poster is free, we are not selling it.
Could I resell this poster?
"A3 width and A2 height" :D
CSS will never validated correctly unless you specifically design your website for one intended browser. which I'm sure will never be required unless you're creating an in-house CDN for a company where they all use MAC's where they all use Safari, Chrome or Firefox. -o- -webkit- -moz- these browser specific tags undoubtedly cause any CSS code to not be validated by the glorified piece of sh$# that is w3c..
really helpfull! But it works only if I have a color as website background. Thank you.
great
Where do you see the issues with grid? It’s used as a pattern so it can’t be darker at some places. Also I have a printed copy of poster on my wall, and I do not see any issue with colors or readability of the poster.
. Install Inkscape (free) on your system, then import the PDF and scale the image to fit whatever sheet size you like. Inkscape allows one to scale the x and y dimensions independently, so you can make it a little narrower and taller, or whatever. I tried it with Inkscape 0.48 and it works beautifully. After scaling you can even re-export it as a new PDF.
i think their is a typo in glowing and blur text?
very nice tutorial, i like the output of the multiple shadows. thanks
Can I ask for an update for printing? The document seems to have been created in RGB. All of the blacks are rich. If I send this to a professional printer, they will either convert the RGB black to a 98% grey (through pre-press processes) or scream at me to get a new file that not over saturated.
Poster's size is A1, it's bigger then both A3 and A2.
Nice. thanks for all the hard work. To those speaking English elsewhere, the size is 594 x 841 mm. Its big, correct me if i'm wrong, i think that's A3 width and A2 height
Awesome poster ! Very illustrative.
Flipping awesome poster - trouble is can only print it in A4. Great for reference - thanks!
Tried printing it. I only got mad at my printers (one says it lacks tint; another takes ages, can't print marginless and crops printed documents). Quicker'd be to make such a poster myself. And it would be quite a lesson...
Wow, great stuff , shared
Sweet!
Why use Courier New? It hurts my aesthetic sense and eyes as well. Please use Consolas for code instead.
Thank you all for pointing out all errors, i will fix them soon. Let me know if you have any other suggestions to improve the poster.
I am working on CSS 3 poster, i will put this on my website in couple of weeks hopefully.
Nice
@twitter-24367989:disqus Indeed, under the Document sections, they have most likely been using Illustrator or InDesign while creating this and had tried switching to the selection tool a couple of times. (We’re all used to this problem) The word “Heading” has been saved as vveading.
There is a misspelling in section.
CSS will not validate because of browser prefixes and Filter.
Thanks, very useful! ps. New logo for HTML5? I like the actual one.
thanks :)
Very nice. Thanks.
nice :-))
Kudos for not lumping the W3C Geolocation API into your list of HTML5 APIs.
Rick, i confirmed with my printer and he said it's completely possible to print directly from PDF files on any size of paper.
Really slick. Thanks for sharing!
The printer I took it to said they could only print to 11x17 from a PDF. They had to print it from within InDesign to get it to print to their poster printer. Not sure if that's standard MO at print shops or they are doing it wrong. 11x17 is too small to read so I still have a nice blank space on my wall where this poster would look nice.
This file is password protected for editing, so you can not open it in inDesign or any other editing software, you can print directly from PDF.
Does this file have some sort of password protection when trying to blow it up to poster size? I took it to a printer this afternoon and they said they couldn't blow it up because there was a password prompt. He was trying to place it in InDesign first before he sent it over though so I'm not sure he knew what he was doing.
This is a single PDF file, which is gonna serve me for at least next 5 years. Great work. Thanks. I love HTML5.
Awesome! Thanks for sharing! This is an excellent, very handy resource to have while learning the new HTML 5! Great work!
Brilliant poster; succinct and informative
Superb one :)) you could have put a javascript fallback model too like this http://davidwalsh.name/javascrip-reflection
Why not use a jave script to turn the image and flip it,, and then overlay it with a javascript so every browser support?
Thanks for this tip! Wouldn't it be cool if you could add a reflection to the image with pseudo-elements: img:after {content: url(attr(src));transform: rotate(180deg); opacity: 0.35; } Then you could add a CSS3 mask to fade it out! Wishful thinking...
amazing...this is play with transparent & gradient attribute for to be shadow... cool trick ;)
Yes i know, This property is supported by Safari, Chrome and Firefox with following commands: -webkit-box-reflect -moz-box-reflect However it's not yet supported by Opera and IE. Thanks for your comments.
Did you know Safari and Chrome implements -webkit-box-reflect http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Reflections/Reflections.html
Using images for IE is a nice idea, however there are few concerns: 1. you will need to use IE Hack for this 2. it will be difficult to match if you have a complex background 3. If these images are added dynamically by client, he will need to add 2 images, and it's quite possible that client is not technical enough to create the reflection effect for images.
for IE, you can use a background image (png file with gradient inside) for the overlay instead of the gradient effect
I have not implemented this technique but first response after reading is "Thank you for your time and efforts!". Now it's playtime!
Great article! Now I understand what CodeMyConcept did in order to develop my website. Thanks a lot!