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.

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