madig/browsers-text-vertical-centering.html

## browsers-text-vertical-centering.html
<!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>
	<!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>