CODEWITHSUNDEEP
htmlvertical-alignmentcsscss-tables
rebz
rebz

Reputation: 2113

Font Rendering / Line-Height Issue on Mac/PC (outside of element)

The Design

The info widgets content should be vertically aligned in the middle as such:

Original PSD Design

The Coded Design

Windows: Chrome 20 / FF 14 / IE 9

Windows Coded Design

Mac (Lion / Mt. Lion): Chrome / FF

Mac Coded Design

The Code

HTML

<div class="info">
    <div class="weather display clearfix">
        <div class="icon"><img src="imgs/icons/thunderstorms.png" align="Thunderstorms" /></div>

        <div class="fl">
            <p class="temperature">82&deg; / 89&deg;</p>
            <p class="conditions">Thunderstorms</p>
        </div>
    </div>
    <div class="time display">
        <p>11:59 <span>AM</span></p>
    </div>
    <div class="date display clearfix">
        <p class="number fl">23</p>
        <p class="month-day fl">Jun <br />Sat</p>
    </div>
</div><!-- //.info -->

CSS

.info {
    display:table;
    border-spacing:20px 0;
    margin-right:-20px;
    padding:6px 0 0;
}
    .display {
        background-color:rgba(255, 255, 255, .2);
        border-radius:10px;
        -ms-border-radius:10px;
        color:#fff;
        font-family:"Cutive", Arial, sans-serif;
        display:table-cell;
        height:70px;
        vertical-align:middle;
        padding:3px 15px 0;
    }
        .display p {padding:0;line-height:1em;}
        .time, .date {padding-top:5px;}
            .time p, .date .number {font-size:35px;}
            .time span, .display .month-day, .conditions {
                font-size:14px;
                text-transform:uppercase;
                font-family:"Maven Pro", Arial, sans-serif;
                line-height:1.15em;
                font-weight:500;
            }
            .display .month-day {padding-left:5px;}
            .icon {float:left;padding:0 12px 0 0}
            .display .temperature {font-size:24px;padding:4px 0 0;}
            .display .conditions {text-transform:none;padding:2px 0 0;}
    .lt-ie9 .display { /* IE rgba Fallback */
        background:transparent;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff);
        zoom:1;
    }

The Issue

Looking at the above images of the coded design you can see how the appears to throw off the alignment. Upon further viewing, the text is being rendered outside of the element on the mac.

Windows

Windows Coded Design Alignment

Mac

Mac Coded Design Alignment

Note

I am embedding the fonts through a Google Web Fonts stylesheet.

Tested

I have tried the following:

It seems that no matter what I try, the content will never center align perfectly across mac and pc.

My Question(s)

It is possible to achieve what I'm trying to do in a simplistic manner?

Should I forgo the display:table-cell; route and set specific heights/paddings on each element and child? I will still run into padding/spacing issues between the two OS's.

What should I categorize this issue under? Line-height? Table-cells? OS? etc...

Thanks in advance!

Upvotes: 78

Views: 45717

Answers (12)

Ellis
Ellis

Reputation: 429

I have tested the problem with:

  1. Windows desktop, Firefox
  2. iphone, Safari
  3. iphone, Firefox

Text elevation: (2) = (3) ≠ 1.

So it looks like, the problem is between the OS, and not between the browsers.

Upvotes: 0

Jordan Brown
Jordan Brown

Reputation: 11

Part of the problem may be in the way Windows/Mac OSX renders fonts. Specifically those that are brought in via @font-face. Try switching out which font formats are being used.

Upvotes: 1

nim
nim

Reputation: 2449

It's caused by font format history and Windows/Mac wars, there are different ways to compute line height and if they are not synced in the font you use things will go wrong on some systems

You need to fix your font (if the licensing allows it) or switch to one without this problem

Better, not to make your design depend on an exact value here

Upvotes: 0

Ahmad Abu Saa
Ahmad Abu Saa

Reputation: 818

I think using this website https://transfonter.org/ will save your time instead of downloading FontForg program, upload your fonts and toggle "Fix vertical metrics" then click convert, it will give you a downloadable zip folder with all types you selected enter image description here

Upvotes: 12

colin moock
colin moock

Reputation: 1198

For those who can't use Font Squirrel, I can confirm that this problem could be fixed in Font Forge for the font I was working with. Based on the answer provided by Luke, here are the steps I followed (no new information here, just providing easy-to-follow instructions):

1) Install FontForge (free) Download from: https://fontforge.github.io/

2) Open the problematic font in FontForge

3) Choose Element > Font Info enter image description here

4) On the left panel, click OS/2, then click the Metrics tab

5) Change Win Ascent to the same number as HHead Ascent, and Win Descent to the POSITIVE value of HHead Descent (i.e., remove minus sign), then click OK. (If those numbers don't address the problem, try adjusting them until you find numbers that fix the issue for your specific font.) enter image description here

6) Click File > Generate Fonts. Choose the font type for your font. If the font is an .otf font, choose OpenType (CFF). Uncheck "Validate Before Saving". Set a name for your new font file. Click Generate. enter image description here

Thanks to everyone who contributed answers to this question!

Upvotes: 9

benandunt
benandunt

Reputation: 21

I also came across this issue. Luke's answer helped me. I had to adjust the fonts with FontForge using this settings:

FontForge Settings

Uncheck all "Is offset" checkboxes and also the "Really use Typo metrics" checkbox. I had most problems with Firefox and IE. Playing around with the value of "Win Descent" fixed it for those two browsers.

Upvotes: 2

Luke
Luke

Reputation: 809

I came across this problem with a custom font that had been created for a client's brand. I opened the TTF font in Font Forge. The way I created uniformity with rendering was to adjust the values in Element->Font Info->OS/2->Metrics.

Win Ascent/Descent values appear to work differently to the other values. I had the following values:

Win Ascent: 1000

Win Descent: 0

Typo Ascent: 750

Typo Descent: -250

HHead Ascent: 750

HHead Descent: -250

I changed the Win Ascent and Descent values to:

Win Ascent: 750

Win Descent: 250 (notice the positive value)

It appears you need to match the values except in my case I needed to invert the value of Win Descent to a positive one.

I have very limited knowledge about fonts but this did fix my problem. I generated the font as TTF and then ran it through a web font generator. The fonts now render identically on Mac/Windows 7/Android/iOS.

Hope this helps someone.

Upvotes: 10

Martin Christov
Martin Christov

Reputation: 155

My solution to this (very annoying problem):

  • Set all elements to float:left;

  • Set explicit line-heights;

Enjoy a victory over cross-browser/platform css ridiculousness.

Upvotes: 5

Justin
Justin

Reputation: 27331

Since you said in your comment to Jordan Brown that using Arial makes the alignment perfect, this is a font issue. It is likely that whoever created your font did not set the Ascent value properly.

If you have the TTF, upload it to FontSquirrel, select the "Expert" option and then keeping all default options. The one that fixes it I believe is "Fix Vertical Metrics." but I had issues when changing the defaults so I recommend keeping them as-is.

Now the font line height renders the same on MAC and PC (it worked for me).

Upvotes: 1

Will Hancock
Will Hancock

Reputation: 1240

I witnessed the same issue, with a custom font (Trade Gothic) served by FastFonts.

Windows did what it should have. But all other browsers on Linux based machines, Mac, iOS, Android suffered the problem.

My only solution was to match on the user agent, and namespace the body tag with .not-win

Then my styles could override the line-height specific to non-windows devices.

Upvotes: 1

Henrik
Henrik

Reputation: 4044

If it is resolved by using a different font (Arial) then the issue is with the font, not with the CSS. As you have noticed font rendering differs between browsers.

One possible solution could be to download the Cutive font (I see it has a SIL license) and then run it through the Font Squirrel font-face generator. In "Expert" mode there is an option to "Fix Vertical Metrics" which might be what you are looking for.

Upvotes: 43

Torsten Walter
Torsten Walter

Reputation: 5802

The Mac correctly displays the lengths below the baseline as belonging to line height. It seems that OS X counts bottom up whereas Windows calculates from the Top.

Since 1em is the width of the capital M of the used font it is usually smaller than the font's overall height.

Have you tried setting the line-height to be the same as the element height? This usually helps solve these kind of problems.

Upvotes: -1

Related Questions