since em length scale is relative to the current font size, this problem arose.
I want the border-width of many elements to be one eighth of my normal font width. By normal I mean when the html document has the least necessary parts and just a text written in my font. My font is mono.
You can see how it looks:
When I just write border-width: 0.125em;, borders will not have the same width.
I don't want to use px because I want to produce the same width on very compact displays.
What should I do?
You can use calc(1rem / 8) to get 1/8th of 1rem or use 0.125rem. Using rem will reference the document's base font size instead of whatever em is throughout the document.
div {
font-family: monospace;
border: 0.125rem solid black;
}
<div>foo</div>
Related
On our website we have the following phenomenon: When rendering the website on a desktop browser (Firefox, IE, Chrome), all fonts, in particular those embedded in <td> tags, are rendered in the same size.
However, when rendering the website on a mobile device, the font size of the texts within the <td> tags shrinks. See below. We tried to set
html {
-webkit-text-size-adjust: none;
}
but this only helps with the problem on the mobile safari and opera browser. Using the tips from this website, we added
#media (max-width: 960px) {
td {
font-size: 20pt;
}
}
to the css, but this now miraculously only works for one of our phones held tilted sideways, not in portrait.
How do we prevent the font-size within the table cells to be scaled down?
What Olli and JStephen said, but I also had to add text-size-adjust: none;
html,body {
text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
}
You were most likely looking for this:
Include the following <meta> tag in the document's <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">
It helped me with the same problem.
Maybe if you also add body to the css like this:
html,body { -webkit-text-size-adjust:none; }
Resource: iPhone/iPod - prevent font-size-changing
I know this is an old post, but I came across it and found the answer that worked for me is just an extension to Olli's. There are more css styles you have to add to support other browsers:
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
I had originally put everything in table cells which worked on my nexus, but my samsung phone was still randomly deciding which text to scale and which to keep the set size. I set 13px to everything on the page and it was the only font size styling I did. This was the only way I was able to fix it on all the devices I have.
First of all, font-size should be set relative to a default-value that is defined by the html selector, in case of repsonsive formatting.
For example:
html {
font-size: 100%;
}
h1 {
font-size: 2em;
}
td {
font-size: 1.25em;
}
The reason for this is that different platforms use different default values for 100%. E.g. desktops use 16px but mobile browsers often use 24px.
If you define the font-size of one of your elements to an absolute value, it will not scale with the rest of the items that have been assigned no value or a relative value; thus resulting in this behaviour.
The best solution to this problem: use relative font-sizes with em, rem or even % as the unit, istead of the absolute font-sizes with pt or px as the unit.
Edit for more background on the different default font-size on different platforms:
Because each platform has its own use-case, its own average screen size, average reader-to-screen distance, average DPI-value for its screen and (most important of all) a different viewport width, font-sizes aren't equally legible on each of those platforms if set to a fixed size. That's why the browsers define the default size to something different, as to optimise the experience for the user on that specific platform.
Sure, you could ignore this and keep setting all your font-sizes to something fixed, but that's going against the flow and breaking the user experience. Instead, try to make peace with this fact and be sure that it all scales properly.
Edit2: To warn you about the usage of em vs rem: using em will inherit the parent value and multiply it by the value of the font-size you define in your current element, while using rem will always be based on the value that is set in the root element instead of the parent element. So the following code will result in the following absolute values:
HTML:
<html>
<...>
<body>
<div>
<p>..</p>
</div>
</body>
</html>
CSS:
html {
font-size: 100%; /* we agree on 16px for this example */
}
div {
font-size: 1.25em; /* add a quarter of 16, so 20px is the actual value */
}
p {
font-size: 0.8em; /* subtract a fifth of the value of the parent element: 20 * 0.8 = 16 again */
font-size: 0.8rem; /* subtract a fifth of the value of the root element: 16 * 0.8 = 13.8 (will be rounded by browser to 14) pixels */
}
How do I set my default text size so that i can transfer my text sizes for px's to em's?
On This thread, it was explained that em's work as a scale and therefore my text will be an appropriate size on mobile, but how do I set my default text size so that I can set my em sizes?
How do I set the measurement that I'm scaling by using em's?
You can set default text size for the document on the body element.
body {
font-size: 100%;
}
This will set the base font size to 100% - approximately 16px in most browsers. You can then assign font-sizes in relation to this.
For example:
h1 {
font-size: 2em; // This will render at 200% of the base font so around 32px
}
small {
font-size: .5em // This will render at 50% of the base font size
}
Remember though that these are relevant to their parent though, so putting a <small> element within a <h1> will mean that the small element will render at 50% of that of its parent - in this case back to the base font size... confusing right?
To counteract this I would use rem rather than em (there's also nothign wrong with using pixels for fonts). rem units always refer to the parent element - so .5rem will always be 50% of the base font size, regardless of the parent size.
Hope that helps.
set your body in percent and the rest in ems:
body { font-size:62.5%}; // this means 10 px
div { font-size:2em} // this will be 20px
p { font-size:1em} // this will be 10px
and so on...
Generally I set the body size to a fixed pixelage and then em the rest:
body {
font-size: 14px;
}
p {
font-size: 1em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
This gives a p size of 14px, h1 of 28px, h2 of 25px.
Equally if you want to use whatever size the browser uses just use:
body {
font-size: 1em;
}
Set Font Size With Em
h1 {font-size:2.5em;} // 40px/16=2.5em
h2 {font-size:1.875em;} // 30px/16=1.875em
p {font-size:0.875em;} // 14px/16=0.875em
I'm using em units in my site's CSS. When I load a page of the site in Chrome, all the text will load in a very large font size. If I resize the browser window or load the developer console, the font size will then revert back to the 'correct' size. Sometimes if I flick through pages on the site, it will do the same or behave erratically (starting off large, sometimes starting off normal size).
I cannot replicate this in Safari or Firefox, so thinking it must be an issue in the way Chrome is interpreting my CSS or my em units.
Any ideas on why this is happening? If I remove all the em units and use px then it works fine (which perhaps is a solution but doesn't help me understand em).
(Using: Chrome 32, Macbook Air, OS 10.8.5, a custom Wordpress theme).
Some CSS:
body {
margin: 0 auto;
color: #404040;
font-family: sans-serif;
font-size: 1.6rem;
line-height: 1.5;
padding: 1em; }
(if I use font-size:16px here it will work fine, but then what's the point of em / rem)
I had the same problem as you actually. I recently started using rem instead of em and it is much better since you don't have to worry about nested elements, such as list items, multiplying the value. However, I noticed that the font was loading too large and then resizing.
In my CSS, I originally had reset the font using this:
html {
font-size: 62.5%;
}
You're probably already aware why, but this just means that 1em would equal 10px. I then had font-size: 1.4rem in the body to set the base font size to 14px.
To fix the issue you mentioned:
Try setting your html font-size to 10px, not a percentage value, and then use rem from then on. Seems to be working for me anyway.
CSS3 introduces a few new units, including the rem unit, which stands
for "root em".
The em unit is relative to the font-size of the parent, which causes
the compounding issue. The rem unit is relative to the root—or the
html—element. That means that we can define a single font size on the
html element and define all rem units to be a percentage of that.
You can try font-size: 1.6em; /* EM not REM */ but anyway it might not works as far as 1em is equal to the current font size.
You might use px instead or set px in body and use em after.
Needs more info. A live URL would be appreciated.
Can not reproduce using just this code:
body {
margin: 0 auto;
color: #404040;
font-family: sans-serif;
font-size: 1.6rem;
line-height: 1.5;
padding: 1em; }
http://jsfiddle.net/wZD4n/
In the following example, it's a navigation bar. Its elements are variable in width, the sum of their width is the width of their container, ul element.
The issue is, each element has the same width on all windows browsers, the sum of their width is 379px. But on mac each browser seems to render the font slightly different, causing the width to either increase or decrease, thus the last element wrap to the second line.
<html>
<head>
<style>
body {margin:0;padding: 0;}
ul {margin:0;padding:0;list-style-type: none;}
.nav {
width:379px;
}
.nav li {
float: left;
margin: 5px;
padding: 20px;
background-color: #0099ff;
color: white;
font-family: Arial;
font-size: 16px;
}
</style>
</head>
<body>
<ul class="nav">
<li>asdf</li>
<li>qwer</li>
<li>test 1</li>
<li>testing test</li>
</ul>
</body>
</html>
The question is, how to guarantee each element's width on all browsers by just specifying the font size.
Setting a fixed-width div plus padding size is tricky when working with text. It's unlikely you'll be able to get a string to render exactly the same size on all major browsers and platforms. Though you can get pretty close; here are some suggestions.
Specify px values rather than pt or em. Such text will render at the same size regardless of device resolution, and will still scale properly when zooming in and out
Use a very common font, or a web font. You can use Font Squirrel to strip down a version of a specific font you'd like to use
Explicitly set the font-smoothing method
Use a computed CSS property to offset the letter-spacing by a fraction based on the amount the resulting div width differs from the target. This will be accurate, but also complex and less compatible
Use JavaScript to do the above calculation instead, resulting in more compatible code
Render some PNGs beforehand, or server-side at runtime
Here's some sample code illustrating one way to get a more consistent cross-platform Arial text render.
html, body {
font-family: Arial, sans-serif;
font-size: 13px;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
First of all, validate your HTML. You have some issues there, like a missing DOCTYPE. I also recommend HTML5BOILERPLATE to get a lot of normalization done.
Next: why do you make the width dependant on the font size? Wouldn't it be better to make the font size static and set a certain static width to your elements?
If you are scared that this behaviour will lead to reading problems on small sceens (mobile devices), you should read about responsive layouts. They make use of media queries to use alternative CSS based on certain rules.
If you can't get it work, it would be fairly simple to load a .png of the text with a transparent background.
I have a simple
text-shadow: 0.05em 0.05em 0.05em black;
I open in Google Chrome and there is no shadow at all!
I change it to
text-shadow: 1px 1px 1px black;
and it works!
What is the matter?
0.05em is too small value and your shadow falls behind the text. Try to increase it a little - http://jsfiddle.net/zd4qF/
UPDATE
Your code with .05em will actually work in FF, but not Chrome. That's because of rounding logic in the browsers - FF rounds anything smaller than 1px to 1px, Chrome floors it to 0
If you check the link bellow you can see the conversion rates between em and pixels
Since you asked for 0.05em that is way smaller than 1px :)
http://pxtoem.com/
For eg.
1px should be around 0.063em which makes 0.05 em less than 1px thus less than anything you can display.
It's not visible because the value is too low. em is proportional to the font-size. The smaller the font, the smaller everything that's declared depending on the font using em.
Here's an example with different font-sizes. In this example 0.5em can be seen when the font size is 48pt, but not when it'2 12 pt. See http://jsfiddle.net/JwNbj/1/
EM is a relative attribute and depends on your font size defined in the body element or when you defined it also relative, then it depends on the options defined in the user's browser options.
when your font size is 20px, then 1px will be 0,05em. greets.