Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Demystifying i18n with Hugo

Demystifying i18n with Hugo

Preparing a website for an international audience comes with lots of technical complexities. How do you manage multiple languages flexibly and efficiently using Hugo? How do you make the appropriate design adjustments for each language in a way that doesn’t result in duplicative CSS? In this talk, we’ll answer these questions while walking through the technical details behind the new Arabic edition of Laws of UX (https://lawsofux.com/) and exploring Hugo’s Multilingual Mode, how to translate content based on i18n configuration, and CSS logical properties.

Jon Yablonski

July 11, 2022
Tweet

More Decks by Jon Yablonski

Other Decks in Programming

Transcript

  1. Hugo Conf 22 ( Basic2  Conten  Redirect2 '

    Fine-Tuning WHAT WE‘LL COVER
  2. Hugo Conf 22 .banner__container { height: 100%; display: flex; align-items:

    center; } .banner__graphic { padding: calc(var(--base-spacing) * 2); max-width: 24rem; margin-left: calc(var(--base-spacing) * 2); } :dir(rtl) .banner__graphic { margin-left: 0; margin-right: calc(var(--base-spacing) * 2); }
  3. Hugo Conf 22 .banner__graphic { padding: calc(var(--base-spacing) * 2); max-width:

    24rem; margin-left: calc(var(--base-spacing) * 2); }
  4. Hugo Conf 22 .banner__container { height: 100%; display: flex; align-items:

    center; } .banner__graphic { padding: calc(var(--base-spacing) * 2); max-width: 24rem; margin-inline: calc(var(--base-spacing) * 2); } Directionally-aware left/right margin
  5. Hugo Conf 22 $ npm i postcss-cli && autoprefixer "browserlists":

    ["last 3 versions"] package.json Determines which prefixes get applied
  6. Hugo Conf 22 {{ $styles := resources.Get "css/app.css" | toCSS

    | postCSS (dict "config" "postcss.config.js") | minify }} <link type="text/css" rel="stylesheet" href="{{ $styles.Permalink }}"/> postcss.config.js
  7. Hugo Conf 22 {{ $styles := resources.Get "css/app.css" | toCSS

    | postCSS (dict "config" "postcss.config.js") | minify }} <link type="text/css" rel="stylesheet" href="{{ $styles.Permalink }}"/> layouts/partials/styles.html
  8. Hugo Conf 22 -webkit-margin-inline: calc(var(--base-spacing) * 2); -moz-margin-inline: calc(var(--base-spacing) *

    2); -ms-margin-inline: calc(var(--base-spacing) * 2); -o-margin-inline: calc(var(--base-spacing) * 2); margin-inline: calc(var(--base-spacing) * 2); Prefixed logical properties
  9. Hugo Conf 22 :root:lang(en) { --base-font-family: 'IBM Plex Sans', Sans-Serif;

    --secondary-font-family: 'IBM Plex Mono', monospace; } :root:lang(ar) { --base-font-family: 'IBM Plex Sans Arabic', Sans-Serif; --secondary-font-family: 'IBM Plex Mono', monospace; }
  10. Hugo Conf 22 :root:lang(en) { --base-font-family: 'IBM Plex Sans', Sans-Serif;

    --secondary-font-family: 'IBM Plex Mono', monospace; } Default (english)
  11. Hugo Conf 22 :root:lang(en) { --base-font-family: 'IBM Plex Sans', Sans-Serif;

    --secondary-font-family: 'IBM Plex Mono', monospace; }
  12. Hugo Conf 22 :root:lang(ar) { --base-font-family: 'IBM Plex Sans Arabic',

    Sans-Serif; --secondary-font-family: 'IBM Plex Mono', monospace; } Arabic
  13. Hugo Conf 22 :root:lang(ar) { --base-font-family: 'IBM Plex Sans Arabic',

    Sans-Serif; --secondary-font-family: 'IBM Plex Mono', monospace; }
  14. Hugo Conf 22 <ul class="lang-switcher__list"> {{ range .AllTranslations }} <li

    class="lang-switcher__list-item"> <a href="{{ .Permalink }}"> {{ .Language.LanguageName }} </a> </li> {{ end }} </ul>
  15. Hugo Conf 22 <ul class="lang-switcher__list"> {{ range .AllTranslations }} <li

    class="lang-switcher__list-item"> <a href="{{ .Permalink }}"> {{ .Language.LanguageName }} </a> </li> {{ end }} </ul>
  16. Hugo Conf 22 <ul class="lang-switcher__list"> {{ range .AllTranslations }} <li

    class="lang-switcher__list-item"> <a href="{{ .Permalink }}"> {{ .Language.LanguageName }} </a> </li> {{ end }} </ul>
  17. Hugo Conf 22 <ul class="lang-switcher__list"> {{ range .AllTranslations }} <li

    class="lang-switcher__list-item"> <a href="{{ .Permalink }}"> {{ .Language.LanguageName }} </a> </li> {{ end }} </ul>