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.
Related
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>
I recently purchased a couple of fonts for a website project and I've found that one in particular is not at all fun to work with. It's called Goodlife Sans and the problem I'm having results from a large amount of white space included above the font's characters i.e. the font takes up more vertical space than the glyphs themselves.
It's difficult to set vertical margins as I have to account for the extra space taken up by the font. Setting line-height: 1em helps a little, but the line height is measured from the very top of the font, meaning that if the text is set in a block element with overlow: hidden the bottoms of the letters are cropped off.
The following images show the height of the font by itself, and with the line-height hack. The background of the block element is coloured red for clarity.
http://i.stack.imgur.com/VAjKz.png
http://i.stack.imgur.com/ffL9l.png
Edit: Here's the code
#import url("//hello.myfonts.net/count/2e978a");
#font-face {
font-family: "GoodlifeSans";
src: url("fonts/2E978A_0_0.eot");
src: url("fonts/2E978A_0_0.eot?#iefix") format("embedded-opentype"),
url("fonts/2E978A_0_0.woff2") format("woff2"),
url("fonts/2E978A_0_0.woff") format("woff"),
url("fonts/2E978A_0_0.ttf") format("truetype");
}
p {
font-family: "Goodlifesans";
font-size: 344%;
background: red;
text-align: center;
/*line-height: 1em;*/
margin: 0;
padding: 0;
}
body {
margin: 10px;
font-size: 80%;
}
<body>
<p>This is the test title text</p>
</body>
Short of actually modifying the font itself (which I believe licencing prevents me from doing anyway) is there a elegant solution to this problem? I really don't want to have to include a parent element with negative margin every time I use this font.
In the end the guys at HDV Fonts sent me their copies of the font files which fixed the issue. The files from myfonts.com apparently contain strange vertical metrics, which explains what I was seeing.
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 */
}
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/
The page layout is fine in all browsers but IE9.
We use a block-style layout on the page and a width of 660px, centered.
In keeping with the 660px max width, I set a width for h2 of 660px
which is fine in all browers except (surprise surprise) on IE9 the h2 font is HUGE and runs off the right
of the 660px layout by a huge amount.
Can I change the verbiage in the h2 to alleviate this (shorten the text)?
Nope. The verbiage on the page is not my purview -- someone else's job ('UE' gal).
This is my CSS:
h2 {
width: 660px;
}
That width of 660px is used in other divs on the page and provides a visually appealing 'block layout' on the page.
But on the landing page, the text inside of one of the h2 tags -- the h2 text is massively larger on IE9 so the 660px width is exceeded by the large IE9's h2 font size.
Here is an example of an offending line:
<h2 class="grayDecorative">Make your Relics visible on our site now! -- OurSite!</h2>
Here is the 'grayDecorative' style:
.grayDecorative
{
font-family: Arial, sans-serif;
background-image: url('images/chromishbg.gif');
background-repeat: repeat-x;
}
This style fills in the h2 with a visually appealing gradient background behind the text.
I'm thinking to solve this by having a 'conditional-for-IE9' that uses, say -- an h3 tag instead of the h2 tag -- but only on IE9.
How can I make the html conditional to use an h3 for IE?
I want to post the discovery I made that led to a solution.
I and others thought that using the following style should make the font size the same for the h2 tag's text on IE and FF et al:
h2
{
width: 660px;
font-size: 20px;
}
Setting the same font-size for the h2 tag should have done the trick. BUT IT DIDN'T.
For the same font-size: 20px above in the h2 tag, the IE text font was much bigger.
Well I got lucky when I noticed -- other text elements on the same page were the exact same size on FF and IE9.
But these tags were not h2 -- they were anchors mostly and a couple label tags.
The following text style generated text in the exact same size on IE9 and Firefox -- but note that
the tag below is not the h2 tags which is the one I was having text-sizing problems with:
.pageTopRowTextStyle
{
color:RGB(255,255,255);
text-decoration:none;
font-family: Arial, sans-serif;
font-size: 15px;
}
<a class="pageTopRowTextStyle" href="oursite.com">
This text size was the same in IE9 and FF</a>
Here's what I discovered. Mind you this is what we found with IE9.
You cannot reliable reconcile cross-browser text-size difference if the h2 tag is involved.
I didn't check the other header tags (h1, h3, h4, etc).
I'm assuming the same issue.
While using the font-size: 20px; setting for a style on h2 DOES make a difference -- say, if you increase to 25px or down to 15px -- you can see the font size changing on both IE9 and FF ---
-- the h2 tag is not responding in the same way to the font-size ??px across FF and IE9.
With the h2 tag -- a font-size:16px on IE9 is bigger the same font-size:16px for an h2 on Firefox.
That's not true with other tags though -- label and anchor tags render the same size on both browsers.
So we just shitcanned the h2 tag and we are now using a label tag in place of the h2 tag and now the font sizes on FF and IE9 are identical:
.h2XtraStyle
{
/*width: 660px; LABEL doesn't recognize 'width' so we used padding */
font-size: 20px;
}
Here is a cross-browser h2 tag -- looks the same on IE9 and FF
<br />
<label class="h2XtraStyle">Make your Relics visible on our site now! -- OurSite!
</i></label>
<br />
I don't really know why the h2 tag's font sizing is handled differently in IE9 but the workaround is not to use it at all.
Our solution is not very elegant but it did the job.