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.

A16eb159db895e3b01d3dc95767ad595?s=128

Jon Yablonski

July 11, 2022
Tweet

More Decks by Jon Yablonski

Other Decks in Programming

Transcript

  1. Hugo Conf 22 Demystifying I18n with Hugo Jonyablonski.com • @jonyablonski

  2. Hugo Conf 22 Designer. Developer. Creator of Laws of UX.

    That’s me
  3. Hugo Conf 22 Lawsofux.com

  4. Hugo Conf 22 +

  5. Hugo Conf 22 How do I get started with internationalizing

    my website?
  6. Hugo Conf 22 Photo by mishal ibrahim

  7. Hugo Conf 22 ( Basic2  Conten  Redirect2 '

    Fine-Tuning WHAT WE‘LL COVER
  8. Hugo Conf 22 Basics

  9. Hugo Conf 22 Let’s start with configuration

  10. Hugo Conf 22 config.toml

  11. Hugo Conf 22 Next, let’s add the right HTML tags

  12. Hugo Conf 22 Baseof.html

  13. Hugo Conf 22 That’s the basics!

  14. Hugo Conf 22 Content

  15. Hugo Conf 22 Now let’s get organized

  16. Hugo Conf 22 content directory with language-specific files

  17. Hugo Conf 22 content directory output

  18. Hugo Conf 22 Now let’s add that translated content

  19. Hugo Conf 22 General translated content

  20. Hugo Conf 22 What about text that’s global (e.g. nav

    links)?
  21. Hugo Conf 22 i18n translation configuration files

  22. Hugo Conf 22 i18n string reference

  23. Hugo Conf 22 Let’s move on to redirects

  24. Hugo Conf 22 Redirects

  25. Hugo Conf 22 Let’s direct folks to the right place

  26. Hugo Conf 22 netlify.toml

  27. Hugo Conf 22 netlify.toml

  28. Hugo Conf 22 netlify.toml

  29. Hugo Conf 22 We’re almost done!

  30. Hugo Conf 22 Fine-Tuning

  31. Hugo Conf 22 ️ How do I make CSS adjustments

    between languages?
  32. Hugo Conf 22 Logical Properties

  33. Hugo Conf 22 English banners

  34. Hugo Conf 22 Arabic banners

  35. 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); }
  36. Hugo Conf 22 .banner__container { height: 100%; display: flex; align-items:

    center; }
  37. Hugo Conf 22 .banner__graphic { padding: calc(var(--base-spacing) * 2); max-width:

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

    * 2); }
  39. 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
  40. Hugo Conf 22 Less code. Easier maintenance. Better performance.

  41. Hugo Conf 22 developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties

  42. Hugo Conf 22 Logical property support on Caniuse.com

  43. Hugo Conf 22 Logical property support on Caniuse.com 92.71% Global

    Support (unprefixed)
  44. Hugo Conf 22 How do I get CSS Logical Properties

    prefixed?
  45. Hugo Conf 22 + PostCSS Autoprefixer

  46. Hugo Conf 22 $ npm i postcss-cli && autoprefixer "browserlists":

    ["last 3 versions"] package.json
  47. Hugo Conf 22 $ npm i postcss-cli && autoprefixer "browserlists":

    ["last 3 versions"] package.json
  48. Hugo Conf 22 $ npm i postcss-cli && autoprefixer "browserlists":

    ["last 3 versions"] package.json Determines which prefixes get applied
  49. Hugo Conf 22 module.exports = { plugins: [ require('autoprefixer')() ]

    }; postcss.config.js
  50. 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
  51. 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
  52. 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
  53. Hugo Conf 22 Pick fonts that are specific to the

    language * Pro tip
  54. Hugo Conf 22 IBM Plex Arabic

  55. 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; }
  56. Hugo Conf 22 :root:lang(en) { --base-font-family: 'IBM Plex Sans', Sans-Serif;

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

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

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

    Sans-Serif; --secondary-font-family: 'IBM Plex Mono', monospace; }
  60. Hugo Conf 22 What about giving users the ability to

    manually switch languages?
  61. Hugo Conf 22 Laws of Ux Language switcher

  62. 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>
  63. 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>
  64. 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>
  65. 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>
  66. Hugo Conf 22 Arabic Edition of Lawsofux.com

  67. Hugo Conf 22 Thank you