Skip to content

Instantly share code, notes, and snippets.

@madig
Created November 19, 2019 14:09
Show Gist options
  • Save madig/62b1792ee775ff2b5217344ee4543d0d to your computer and use it in GitHub Desktop.
Save madig/62b1792ee775ff2b5217344ee4543d0d to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:bold&display=swap');
p {
max-width: 40em;
}
</style>
</head>
<body>
<p>
First we reproduce the problem of the baseline
of Noto Sans being interpreted differently by Chrome and Firefox.
</p>
<style type="text/css">
.red-button {
font-family: "Noto Sans";
font-weight: bold;
font-size: 14px;
line-height: 16px;
border: 1px solid red;
}
</style>
<div class="red-button">
Button Typography Noto Sans
</div>
<br />
<div class="red-button" style="font-family: segoe ui;">
Button Typography Segoe UI
</div>
<br />
<div class="red-button" style="font-family: arial;">
Button Typography Arial
</div>
<br />
<p>
One trick/hack uniformizes rendering
between browsers. It also uniformises text height across fonts.
</p>
<div>
<a
href="http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/">http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/</a>
</div>
<p>
Below are a line of buttons of increasing heights, and then a line
of 3 buttons using different fonts, which demonstrates how the trick/hack gives
the same result on Firefox and Chrome.
</p>
<style>
.button {
/* General button appearance */
font-family: "Noto Sans";
font-weight: bold;
border: 1px black solid;
font-size: 14px;
padding: 4px 5px;
box-sizing: content-box;
display: inline-block;
/*
Trick part 1: make the text have a height of 0
so that the text isn't taken into account for height computations
*/
line-height: 0px;
}
/*
Trick part 2: create a pseudo-element within the button that will be
used as a "strut" to influence the height computation.
The text will align its baseline to the bottom of that strut in the
same way across browsers.
*/
.button::before {
content: "";
display: inline-block;
/* Set this to the height of the part of the text that you want to center */
height: 10px;
/* Uncomment below to visualize the strut */
/* width: 2px;
background-color: red; */
}
</style>
<div>
<span class="button" style="padding: 1px 5px;">Text</span>
<span class="button" style="padding: 2px 5px;">Text</span>
<span class="button" style="padding: 3px 5px;">Text</span>
<span class="button" style="padding: 4px 5px;">Text</span>
<span class="button" style="padding: 5px 5px;">Text</span>
<span class="button" style="padding: 6px 5px;">Text</span>
<span class="button" style="padding: 7px 5px;">Text</span>
<span class="button" style="padding: 8px 5px;">Text</span>
<span class="button" style="padding: 9px 5px;">Text</span>
<span class="button" style="padding: 10px 5px;">Text</span>
<span class="button" style="padding: 11px 5px;">Text</span>
<span class="button" style="padding: 12px 5px;">Text</span>
<span class="button" style="padding: 13px 5px;">Text</span>
<span class="button" style="padding: 14px 5px;">Text</span>
<span class="button" style="padding: 15px 5px;">Text</span>
</div>
<div>
<span class="button" style="">Noto Sans</span>
<span class="button" style="font-family: 'Segoe UI';">Segoe UI</span>
<span class="button" style="font-family: Arial;">Arial</span>
</div>
<p>
Warning: the trick above doesn't work when the button has more than 1 line
of text.
</p>
<div style="display: flex;">
<div style="width: 200px; margin-right: 30px;">
Without the trick
<div class="red-button">
Button with a very long text that needs two lines
</div>
</div>
<div style="width: 200px;">
With the trick
<span class="button">
Button with a very long text that needs two lines
</span>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment