davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="en">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Hardest Problem in Computer Science: Centering Things (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://tonsky.me/blog/centering/">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>Hardest Problem in Computer Science: Centering Things</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://tonsky.me/blog/centering/" title="Lien vers le contenu original">Source originale</a>
      <br>
      Mis en cache le 2024-04-18
    </p>
  </nav>
  <hr>
  <p>This is my claim: we, as a civilization, forgot how to center things.</p>
<p>I mean, we know <em>how</em> to do it. It has never been simpler:</p>
<pre><code>display: flex;
justify-content: center; /* Horizontal centering */
align-items: center; /* Vertical centering */</code></pre>
<p>(don’t ask why you need to remember four words instead of just horizontal/vertical, <em>it’s still better than before</em>)</p>
<p>Or you can use grids if you want:</p>
<pre><code>display: grid;
justify-items: center; /* Horizontal centering */
align-items: center; /* Vertical centering */</code></pre>
<p>(also don’t ask why <code>justify-content</code> became <code>justify-items</code>)</p>
<p>If you feel like school today, we can deduce it from the first principles:</p>
<figure>
<img src="https://tonsky.me/blog/centering/formula@2x.png?t=1713455735">        </figure>
<p>Hey, even ChatGPT knows how to center things:</p>
<figure>
<img src="https://tonsky.me/blog/centering/chatgpt@2x.png?t=1713455735">        </figure>
<p>Okay, maybe not right away, but eventually it gets there.</p>
<p>What I’m saying is: everybody knows how to center things. It’s trivial. And if you are lost, the knowledge is right there.</p>
<p>Yet, when we look at actual applications, we see that these methods are not used. We see this:</p>
<figure>
<img src="https://tonsky.me/blog/centering/telegram_date@2x.webp?t=1713455735">        </figure>
<p>or this:</p>
<figure>
<img src="https://tonsky.me/blog/centering/google_maps_cross@2x.webp?t=1713455735">        </figure>
<p>or even this:</p>
<figure>
<img src="https://tonsky.me/blog/centering/feedly_beta@2x.webp?t=1713455735">        </figure>
<p>So something is clearly getting lost between know-how and applying that knowledge.</p>
<figure>
<img src="https://tonsky.me/blog/centering/something.png?t=1713455735">        </figure>
<p>In theory, there’s no difference between theory and practice. Unfortunately, we live in practice.</p>
<p>So what’s happening? Let’s find out.</p>
<h1 id="fonts">Fonts</h1>
<p>Fonts are one of the biggest offenders. You can see poorly aligned text everywhere. Let me showcase.</p>
<p>Apple can’t do it:</p>
<figure>
<img src="https://tonsky.me/blog/centering/apple_buttons_big_sur@2x.png?t=1713455735">        </figure>
<p>Microsoft can’t do it:</p>
<figure>
<img src="https://tonsky.me/blog/centering/windows@2x.webp?t=1713455735">        </figure>
<p>GitHub can’t do it:</p>
<figure>
<img src="https://tonsky.me/blog/centering/github@2x.webp?t=1713455735">        </figure>
<p>Valve can’t do it:</p>
<figure>
<img src="https://tonsky.me/blog/centering/steam@2x.webp?t=1713455735">        </figure>
<p>Slack can’t do it:</p>
<figure>
<img src="https://tonsky.me/blog/centering/slack_button@2x.webp?t=1713455735">        </figure>
<p>Telegram can’t do it:</p>
<figure>
<img src="https://tonsky.me/blog/centering/telegram@2x.webp?t=1713455735">        </figure>
<p>Google Maps can’t do it:</p>
<figure>
<img src="https://tonsky.me/blog/centering/google_maps@2x.webp?t=1713455735">        </figure>
<p>Honestly, I can provide an endless supply of poorly-aligned buttons without even having to look for them:</p>
<figure>
<img src="https://tonsky.me/blog/centering/buttons@2x.png?t=1713455735">        </figure>
<p>I think you get the idea. Myriad companies big and small, native or web, and none are safe from text-centering problems.</p>
<h1 id="line-height">Line height</h1>
<p>If font metrics are not enough, the next problem on our way to perfect centering is line-height.</p>
<p>Line height is... complicated. A canonical article to learn about it is Vincent De Oliveira’s <a href="https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align" target="_blank">Deep dive CSS: font metrics, line-height and vertical-align</a>.</p>
<p>This is how it looks applied in practice. Slack:</p>
<figure>
<img src="https://tonsky.me/blog/centering/slack@2x.webp?t=1713455735">        </figure>
<p>Notion:</p>
<figure>
<img src="https://tonsky.me/blog/centering/notion@2x.webp?t=1713455735">        </figure>
<p>Airbnb:</p>
<figure>
<img src="https://tonsky.me/blog/centering/airbnb@2x.webp?t=1713455735">        </figure>
<p>YouTube:</p>
<figure>
<img src="https://tonsky.me/blog/centering/youtube@2x.webp?t=1713455735">        </figure>
<p>Aligning two things in different containers is almost impossible:</p>
<figure>
<img src="https://tonsky.me/blog/centering/name@2x.webp?t=1713455735">        </figure>
<p>Although many have tried:</p>
<figure>
<img src="https://tonsky.me/blog/centering/american_airlines@2x.webp?t=1713455735">        </figure>
<p>Not many have succeeded:</p>
<figure>
<img src="https://tonsky.me/blog/centering/addons@2x.webp?t=1713455735">        </figure>
<p>CSS might get in the way (different controls having different defaults which you have to undo before even starting trying to align):</p>
<figure>
<img src="https://tonsky.me/blog/centering/controls@2x.webp?t=1713455735">        </figure>
<p>No easy solution here, just roll up your sleeves and delve into specifications.</p>
<h1 id="icons">Icons</h1>
<p>Icons are like small rectangles put in line with text. Therefore all problems caused by text AND line height apply here. Aligning icons next to text is a notoriously hard task.</p>
<p>Atom:</p>
<figure>
<img src="https://tonsky.me/blog/centering/atom@2x.webp?t=1713455735">        </figure>
<p>Platform formerly known as Twitter:</p>
<figure>
<img src="https://tonsky.me/blog/centering/twitter@2x.webp?t=1713455735">        </figure>
<p>iOS:</p>
<figure>
<img src="https://tonsky.me/blog/centering/ios@2x.webp?t=1713455735">        </figure>
<p>Mozilla:</p>
<figure>
<img src="https://tonsky.me/blog/centering/mozilla@2x.webp?t=1713455735">        </figure>
<p>YouTube:</p>
<figure>
<img src="https://tonsky.me/blog/centering/youtube_likes@2x.webp?t=1713455735">        </figure>
<p>Sometimes icon wins over text:</p>
<figure>
<img src="https://tonsky.me/blog/centering/meet@2x.webp?t=1713455735">        </figure>
<p>Sometimes text wins over icon:</p>
<figure>
<img src="https://tonsky.me/blog/centering/ical@2x.webp?t=1713455735">        </figure>
<p>Sometimes both lose:</p>
<figure>
<img src="https://tonsky.me/blog/centering/name_button@2x.webp?t=1713455735">        </figure>
<p>Some icons are just plain old HTML form controls:</p>
<figure>
<img src="https://tonsky.me/blog/centering/git_butler@2x.webp?t=1713455735">        </figure>
<p>Some are stylized:</p>
<figure>
<img src="https://tonsky.me/blog/centering/by_bee@2x.webp?t=1713455735"><figcaption>Thanks @bee for the picture</figcaption>        </figure>
<p>Sometimes people will get creative to achieve perfect alignment:</p>
<figure>
<img src="https://tonsky.me/blog/centering/github_close@2x.webp?t=1713455735">        </figure>
<p>But overall it’s a pretty hopeless game:</p>
<figure>
<img src="https://tonsky.me/blog/centering/apple_id@2x.webp?t=1713455735">        </figure>
<p>The problem is, CSS doesn’t help us either. There are 13 possible values for the <code>vertical-align</code> property, but none would align the icon in a meaningful way:</p>
<figure>
<img src="https://tonsky.me/blog/centering/text_align@2x.png?t=1713455735">        </figure>
<p><code>text-align: middle</code> comes closest, but it aligns by x-height, not cap-height, which still looks unbalanced:</p>
<figure>
<img src="https://tonsky.me/blog/centering/middle@2x.webp?t=1713455735">        </figure>
<p>That’s exactly why people love web programming so much. There’s always a challenge.</p>
<h1 id="icon-fonts">Icon fonts</h1>
<p>Aligning rectangles is relatively easy. Aligning text is hard. Icons are rectangles. So what if we put icons into a font file?</p>
<p>Now we can’t align anything:</p>
<figure>
<img src="https://tonsky.me/blog/centering/icon_fonts@2x.webp?t=1713455735">        </figure>
<p>Neither can we set icon size! In the example above, all icons were set to the same font size and line height. As you can see, all of them come out different sizes, with different paddings, and none were properly aligned.</p>
<p>Despite many shortcomings and almost no upsides, companies rushed to add icon fonts everywhere. The result is this:</p>
<figure>
<img src="https://tonsky.me/blog/centering/calculators@2x.png?t=1713455735"><figcaption>macOS 10.14 → macOS 10.15</figcaption>        </figure>
<p>Notice how operators are not vertically aligned anymore and are also blurry. All because of switching to icon font.</p>
<p>Apple was so committed to icon fonts they even ruined the QuickTime record button:</p>
<figure>
<img src="https://tonsky.me/blog/centering/quicktime@2x.webp?t=1713455735">        </figure>
<p>Just look at it:</p>
<figure>
<img src="https://tonsky.me/blog/centering/quicktime_button@2x.webp?t=1713455735">        </figure>
<p>Yes, it actually looks like this to this day. As does the calculator.</p>
<p>But they are far from being the only ones. One:</p>
<figure>
<img src="https://tonsky.me/blog/centering/icon_1@2x.webp?t=1713455735">        </figure>
<p>Two:</p>
<figure>
<img src="https://tonsky.me/blog/centering/icon_3@2x.webp?t=1713455735">        </figure>
<p>Three:</p>
<figure>
<img src="https://tonsky.me/blog/centering/icon_4@2x.webp?t=1713455735">        </figure>
<p>Four:</p>
<figure>
<img src="https://tonsky.me/blog/centering/icon_5@2x.webp?t=1713455735">        </figure>
<p>Five:</p>
<figure>
<img src="https://tonsky.me/blog/centering/icon_6@2x.webp?t=1713455735">        </figure>
<p>Six:</p>
<figure>
<img src="https://tonsky.me/blog/centering/icon_7@2x.webp?t=1713455735">        </figure>
<p>Seven:</p>
<figure>
<img src="https://tonsky.me/blog/centering/icon_8@2x.webp?t=1713455735">        </figure>
<p>Same as with text alignment, there’s an endless supply of poorly aligned icons.</p>
<h1 id="skill-issue">Skill issue</h1>
<p>Not only programmers fail to center things. Designers do it, too:</p>
<figure>
<img src="https://tonsky.me/blog/centering/things@2x.webp?t=1713455735"><figcaption><a href="https://culturedcode.com/things/blog/2024/02/things-for-apple-vision-pro/" target="_blank">Current version</a> / my fix</figcaption>        </figure>
<p>The problem with icons is that sometimes you have to take their shape into account for things to look good:</p>
<figure>
<img src="https://tonsky.me/blog/centering/apple_logo@2x.webp?t=1713455735"><figcaption>Bad centering / good centering</figcaption>        </figure>
<p>Triangle is notably tricky:</p>
<figure>
<img src="https://tonsky.me/blog/centering/triangle@2x.webp?t=1713455735">        </figure>
<p>Sometimes it is too far to the left:</p>
<figure>
<img src="https://tonsky.me/blog/centering/triangle_left@2x.webp?t=1713455735">        </figure>
<p>Sometimes it’s too far to the right:</p>
<figure>
<img src="https://tonsky.me/blog/centering/triangle_right@2x.webp?t=1713455735">        </figure>
<p>It can even be too high up (line-height strikes again):</p>
<figure>
<img src="https://tonsky.me/blog/centering/triangle_up@2x.webp?t=1713455735">        </figure>
<h1 id="horizontal-centering">Horizontal centering</h1>
<p>You might think that only centering things vertically is hard. Not only! Horizontal might be hard, too:</p>
<figure>
<img src="https://tonsky.me/blog/centering/apple_sign_in_business@2x.webp?t=1713455735">        </figure>
<p>I don’t think there’s a deep reason for these, except for people just being sloppy:</p>
<figure>
<img src="https://tonsky.me/blog/centering/twitter_horizontal@2x.webp?t=1713455735">        </figure>
<p>Just, come on!</p>
<figure>
<img src="https://tonsky.me/blog/centering/android@2x.webp?t=1713455735">        </figure>
<p>Can this be a deliberate decision?</p>
<figure>
<img src="https://tonsky.me/blog/centering/teams@2x.png?t=1713455735">        </figure>
<p>I don’t know. Icons can suffer from it, too:</p>
<figure>
<img src="https://tonsky.me/blog/centering/drive@2x.webp?t=1713455735">        </figure>
<p>As can text:</p>
<figure>
<img src="https://tonsky.me/blog/centering/steam_horizontal@2x.webp?t=1713455735">        </figure>
<h1 id="what-can-be-done-designers">What can be done: designers</h1>
<p>So what <em>is</em> the problem?</p>
<p>It all starts with the font. Right now, the bounding box of a text block looks like this:</p>
<figure>
<img src="https://tonsky.me/blog/centering/text_bounding_box@2x.png?t=1713455735">        </figure>
<p>The problem is, it can also look like this:</p>
<figure>
<img src="https://tonsky.me/blog/centering/text_bounding_box_2@2x.png?t=1713455735">        </figure>
<p>or this:</p>
<figure>
<img src="https://tonsky.me/blog/centering/text_bounding_box_3@2x.png?t=1713455735">        </figure>
<p>Now, what will happen if you try to center text by centering its bounding box?</p>
<figure>
<img src="https://tonsky.me/blog/centering/text_bounding_box_4.png?t=1713455735">        </figure>
<p>The text will be off! Even though rectangles are perfectly centered.</p>
<p>But even if font <em>can</em> have its metrics unbalanced, it doesn’t mean it does. What happens in reality?</p>
<p>In reality, <em>most</em> of the popular fonts have metrics slightly off. Many have it <em>significantly</em> off:</p>
<figure>
<img src="https://tonsky.me/blog/centering/metrics@2x.png?t=1713455735"><figcaption>Percentages are of cap-height</figcaption>        </figure>
<p>10% is not a small number. It’s a whole pixel in font size 13! Two, if you have 2× scaling! It’s easily noticeable.</p>
<p>Basically, Segoe UI is the reason why Github on Windows looks like this:</p>
<figure>
<img src="https://tonsky.me/blog/centering/github@2x.webp?t=1713455735">        </figure>
<p>The solution is simple: make tight bounding boxes and centering will become trivial:</p>
<figure>
<img src="https://tonsky.me/blog/centering/text_bounding_box_5.png?t=1713455735">        </figure>
<p>If you use Figma, it already can do this (although it’s not the default):</p>
<figure>
<img src="https://tonsky.me/blog/centering/figma_vertical_trim@2x.png?t=1713455735">        </figure>
<h1 id="what-can-be-done-font-designers">What can be done: font designers</h1>
<p>If you are a font designer, make life easier for everybody by setting your metrics so that <code>ascender − cap-height = descender</code>:</p>
<figure>
<img src="https://tonsky.me/blog/centering/font_metrics_numbers@2x.png?t=1713455735">        </figure>
<p>Or the same idea, visually:</p>
<figure>
<img src="https://tonsky.me/blog/centering/font_metrics@2x.png?t=1713455735">        </figure>
<p>Important! You don’t have to <em>actually</em> extend your ascenders/descenders to these boundaries. As you can see in the picture, my ascender space, for example, is way underutilized. Just make the numbers match.</p>
<p>For both web and native, to avoid headaches, choose a font that already follows this rule. SF Pro Text, Inter, and Martian Mono seem to do this already, so they will center perfectly with no extra effort.</p>
<p>See <a href="https://tonsky.me/blog/font-size/">Font size is useless; let’s fix it</a> for more information.</p>
<h1 id="what-can-be-done-web-developers">What can be done: web developers</h1>
<p>From the developer side, it’s a bit more tricky.</p>
<p>The first thing to understand, you need to know which font you’ll be using. Unfortunately, this doesn’t work if you plan to substitute fonts.</p>
<p>We’ll use IBM Plex Sans, a font used on this very page. IBM Plex Sans has the following metrics:</p>
<figure>
<img src="https://tonsky.me/blog/centering/ibm_plex_sans@2x.png?t=1713455735">        </figure>
<p>When you set <code>font-size</code>, what you set is UPM (this will also be equal to <code>1em</code>). However, the actual space occupied by the text block is the space between the ascender and descender.</p>
<figure>
<img src="https://tonsky.me/blog/centering/ibm_plex_sans_notes@2x.png?t=1713455735">        </figure>
<p>With a few simple calculations, we get that extra <code>padding-bottom: 0.052em</code> should do the trick:</p>
<figure>
<img src="https://tonsky.me/blog/centering/numi@2x.webp?t=1713455735">        </figure>
<p>Should work like this:</p>
<figure>
<img src="https://tonsky.me/blog/centering/ibm_plex_sans_padding@2x.png?t=1713455735">        </figure>
<p>Or in actual CSS (select text to see default text bounding box):</p>
<p>
<span>Andy</span>
</p>
<pre><code>
</code></pre>
<p>You can get the required font metrics for your font from <a href="https://opentype.js.org/font-inspector.html" target="_blank">opentype.js.org/font-inspector.html</a> (ascender, descender, sCapHeight).</p>
<p>Now that we have that sorted, aligning icons is not that hard too. You set <code>vertical-align: baseline</code> and then move them down by <code>(iconHeight - capHeight) / 2</code>:</p>
<figure>
<img src="https://tonsky.me/blog/centering/ibm_plex_sans_icon@2x.png?t=1713455735">        </figure>
<p>This, unfortunately, requires you to know both font metrics and icon size. But hey, at least it works:</p>
<p>
<span>
<span></span>
Andy
</span>
</p>
<pre><code>
</code></pre>
<p>Again, select the text above to see how different the browser’s bounding box is from the correct position.</p>
<h1 id="what-can-be-done-icons-fonts">What can be done: icons fonts</h1>
<p>STOP.</p>
<p>USING.</p>
<p>FONTS.</p>
<p>FOR.</p>
<p>ICONS.</p>
<p>Use normal image format. The one with dimensions, you know? Width and height?</p>
<p>Here, I drew a diagram for you, to help you make a decision:</p>
<figure>
<img src="https://tonsky.me/blog/centering/diagram@2x.png?t=1713455735">        </figure>
<p>Just look at how hard Apple tries to put the checkmark inside the rectangle, and the rectangle next to the text label:</p>
<figure>
<img src="https://tonsky.me/blog/centering/apple_sign_in@2x.webp?t=1713455735">        </figure>
<p>And they still fail!</p>
<p>Nothing is easier than aligning two rectangles. Nothing is harder than trying to align text that has an arbitrary amount of empty space around it.</p>
<p>This is a game that can’t be won.</p>
<h1 id="what-can-be-done-optical-compensations">What can be done: optical compensations</h1>
<p>We, developers, can only mathematically align perfect rectangles. So for anything that requires manual compensation, please wrap it in a big enough rectangle and visually balance your icon inside:</p>
<figure>
<img src="https://tonsky.me/blog/centering/icons_baked@2x.png?t=1713455735">        </figure>
<h1 id="what-can-be-done-everyone">What can be done: everyone</h1>
<p>Please pay attention. Please care. Bad centering can ruin otherwise decent UI:</p>
<figure>
<img src="https://tonsky.me/blog/centering/win@2x.webp?t=1713455735">        </figure>
<p>But a properly aligned text can make your UI sing:</p>
<figure>
<img src="https://tonsky.me/blog/centering/win_fix@2x.webp?t=1713455735">        </figure>
<p>Even if it’s hard. Even if tools make it inconvenient. Even if you have to search for solutions. Together, I trust, we can find our way back to putting one rectangle inside another rectangle without messing it up.</p>
<p>I, for one, want to live in a world of beautiful well-balanced UIs. I trust that you do, too. </p>
<p>It’s all worth it in the end.</p>
<h1 id="honorable-mention">Honorable mention</h1>
<p>Our article would be incomplete without this guy:</p>
<figure>
<video autoplay="" muted="" loop="" preload="auto" playsinline="" controls="">
<source src="https://tonsky.me/blog/centering/spinner.mp4?t=1713455735" type="video/mp4">
</source></video>
</figure>
<p>Take care!</p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>