Why does bold monoface shift vertically on Windows? - html

In Firefox 3.6, IE7 and Opera 10 on Windows, this HTML has an odd behavior:
<html><head></head>
<style>
span {
font-family: monospace; background-color: green;
}
span.b {
font-weight: bold;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>
The bold span in the middle is shifted down by one pixel. That doesn't happen for other fonts.
Why is that? How can I fix it?

Why is that?
Excellent question. Just spent half an hour trying to figure out the why, to no avail. Marcgg's solution doesn't seem to work, either, the offset is still there. Google turns up nothing. This only seems to happen on Windows, not just in the browsers you mention, but also in Opera 9 and IE6. Not in Firefox 2.0 though. Puzzling.
How can I fix it?
The only solution that has worked so far for me is this:
span {
font-family: Courier; background-color: green;
}
span.b {
font-weight: bold;
}
I.e., specifying Courier instead of monospace. This renders consistently in all browsers I tested (IE6, Opera 9, FF 2.0 under Windows 2000; Opera 10, FF 3, and Konqueror under Ubuntu). As to why, I still have no idea.

It's just an optical effect. Grab a screenshot and zoom in: you'll see the text baseline does not change at all.
It should fix itself if you choose a different colour contrast.
Update
alt text http://img690.imageshack.us/img690/421/opticaleffect.png

The problem is the font "Courier New" which is the default font used my most Windows browsers when "monospace" is requested. For the bold variant, the baseline is at a different offset:
<html><head></head>
<style>
span {
font-family: "Courier New"; background-color: green;
}
span.b {
font-weight: bold; vertical-align:top;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>
With this code, you can see that the middle text is shifted up (= different baseline offset) but the background color is now aligned properly.
The solution is to request "Courier" as a font and to avoid "Courier New".

Related

Font positioning differences in a <span> between Mac and Windows

I recently came along a font(-file) that seems to get positioned vastly different inside a span on different operating systems. If someone knowledgeable with fonts knows what exactly is going wrong here and if there is a fix or a workaround for something like this, I'd greatly appreciate it.
I've made a pen here: https://codepen.io/jls_chris/pen/rQmpEE
which should show you the basic setup of the element:
<div class="box">
<div class="wrapper">
<span class="value">24%</span>
</div>
</div>
#font-face {
font-family: 'Impact LT Std';
src: url('https://sorry.font.is.licensed/ImpactLTStd.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
.box {
height: 163px;
width: 259px;
position: relative;
z-index: 10;
// Set by gsap
opacity: 1;
transform: matrix(1, 0, 0, 1, 0, 0);
// For debugging
background-color: lightblue;
.wrapper {
height: calc(163px - 33px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
// For debugging
background-color: lightgreen;
.value {
font-family: 'Impact LT Std', Sans-Serif;
font-size: 95px;
-webkit-font-smoothing: subpixel-antialiased;
// For debugging
text-decoration: underline;
outline: 1px solid red;
}
}
}
As the font license doesn't allow me to share it, here a couple of images:
On Windows (any browser):
On Mac (any browser):
On Windows everything looks correct but on Mac the text is clearly not centered as I would expect it to be.
The span is correctly positioned on both and has the correct dimensions but the it seems like the baseline is positioned completely differently on the two OSes. I tested a couple of other fonts but could not reproduce it.
Does someone know what could be wrong/broken in this font and if there might be a fix?
elveti linked the following post (in a comment, I would accept that comment as the solution if possible): Font Rendering / Line-Height Issue on Mac/PC (outside of element) which outlines the same issue and contained the solution.
Sadly FontSquirrel was not an option as it blocks Adobe fonts. But I edited the font using FontForge as mentioned in the post by Luke: https://stackoverflow.com/a/38508202/1084239
For me none of the checkboxes were checked but the "Win ..." metrics were different than the other metrics. I copied the "Win Ascent" and "Win Descent" values into the corresponding "Typo" and "HHead" fields as my issue was that mac displayed the font incorrectly (and left all the checkboxes unchecked). After exporting the font as ttf using the default settings and ignoring any warnings, it generated a font that finally worked correctly on both mac and windows.

How to achieve consistent line breaks between browsers using web fonts

I am trying to get fonts to render equally across browsers in an application where line breaks must be consistent. Content is user-generated.
Bold makes the letters wider. With the default browser font, the line will then break earlier when text is wrapped in a container.
When using web fonts, the line does not lengthen when bold is applied in Chrome, but it does in Explorer. This leads to inconsistent line breaks across browsers.
UPDATE:
Firefox behaves same as explorer (web-font text lengthens when bold applied). Non-web fonts in chrome behave same as in other browsers. Apparently, chrome (version 47) has an abnormality with the rendering of web fonts, since this is the only case that behaves differently. I opened a bug report that links to this question.
Simplified test case
HTML
<h2>will break in chrome and explorer:</h2>
<div>
hover to make the text bold and break the line!
</div>
<h2>will break in explorer only:</h2>
<div class="web-font">
hover to make the text bold and break the line!
</div>
CSS
#font-face { font-family: 'roboto'; src: local('roboto'), url(https://themes.googleusercontent.com/static/fonts/roboto/v9/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}
div{
width:380px;
height:100px;
border:5px solid gray;
font-size:20px;
margin-bottom:10px;
}
.web-font{
font-family: 'roboto';
font-size:18px;
}
div:hover{
font-weight:bold;
}
I tested both .ttf and .woff formats with equal results.
I tried tweaking CSS properties such as letter and word spacing but of course results will vary depending on the text so this is not a viable solution for variable content.
Maybe a work around?
div:hover{
text-shadow:0 0 1px Black;
}
instead of:
div:hover{
font-weight:bold;
}
http://codepen.io/anon/pen/MKOgYw

Why does changing the font family change the font size?

I have a <textarea> inside the <body>. I have applied the following CSS rules:
body {
font-family: sans-serif;
font-size: 16px;
}
textarea {
font-family: monospace;
/* font-family: "Courier New", monospace; */
}
Here's what it looks like in Firefox 31.0:
You can see the result in this JSFiddle. By inspecting the <textarea> with Firebug we can see it does not inherit the <body>'s font-size, but sets it instead to 13px. (0.8em?)
However, if I uncomment the second font-family declaration, strange things happen.
Now the <textarea> seems to inherit <body>'s font-size, even though I didn't change it manually.
Finally, in both cases, Firebug shows that the font-size: 16px of <body> is overridden, even though I didn't find any browser stylesheets there that override it.
This does not seem to occur in Internet Explorer 11 or Chrome 34.
The problem is easily fixed by setting font-size: 0.8em to all <textarea>s, but the cause bothers me a bit.
What may be the cause of this? A bug in Firefox, possibly?

how do you workaround this inconsistency between IE, Firefox and Chrome

i have a background image on a webpage and i am placing an image in my body to line up over the image:
here is my css:
Background:
body {
font: 12px tahoma, Arial, Helvetica, sans-serif;
line-height: 1.5em;
margin: 0px;
padding: 0px;
color: #241a10;
background:#c9e4ec url(/Content/images/myImage.gif);
}
Image:
#leftSideContainer {
position:relative;
margin-top:-47px;
width:147px;
height:93px;
background:url(/Content/Images/image2.gif);
}
In IE7 and Chrome, it looks perfect and lines up exact:
But in IE8 and Firefox, the image shows a little lower down compared to the background image:
If it was just an old version of IE that was broken i wouldn't care but in this case firefox is broken as well.
i tried playing with the:
margin-top: -47px;
but if i move it higher to get it to line up in firefox, it them obviously looks misaligned for the other browsers.
any suggestions for what might be causing this discrepancy.?
CSS reset is your friend
http://meyerweb.com/eric/tools/css/reset/
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

Windows 7 IE8 Font Size Issue with em

When viewing my application thru Windows7 IE8, I noticed that the Font Size for H1 and H2 Tags are completely off and too large.
This causes the Titles to wrap and wrecking everything below it.
The Font Sizes are set to em and not px, and Im not sure if this is causing the issue.
font-size: 2.7em;
I have XP w/ IE8 and the application looks fine. I also checked this w/ MS Expression Superview, and it checked fine in all of the browsers.
http://www.davincispainting.com
In this ScreenShot the H1 & H2 Titles appear correct. However, if this is viewed with Windows7 IE8 there exists the problem.
Here are the Style Classes for H1 & H2 Tags:
#mid-feature h1 {
color: #FF0000;
font-family: Arial,Helvetica,sans-serif;
font-size: 2.7em;
}
#midlower-feature h2 {
color: #0C2A55;
font-family: Arial,Helvetica,sans-serif;
font-size: 2em;
/*text-align:center;*/
}
You may wish to include a CSS reset page before your CSS. The purpose of a reset is to get the default state of all elements into a consistent state for all browsers, so your particular CSS styling has a better chance of looking the same on each browser.
YUI has a reset you can use.