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
    Demystifying

    I18n with Hugo
    Jonyablonski.com • @jonyablonski

    View full-size slide

  2. Hugo Conf 22
    Designer. Developer.

    Creator of Laws of UX.
    That’s me

    View full-size slide

  3. Hugo Conf 22
    Lawsofux.com

    View full-size slide

  4. Hugo Conf 22
    +

    View full-size slide

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

    View full-size slide

  6. Hugo Conf 22
    Photo by mishal ibrahim

    View full-size slide

  7. Hugo Conf 22
    ( Basic2
    Conten
    Redirect2
    ' Fine-Tuning
    WHAT WE‘LL COVER

    View full-size slide

  8. Hugo Conf 22
    Basics

    View full-size slide

  9. Hugo Conf 22
    Let’s start with
    configuration

    View full-size slide

  10. Hugo Conf 22
    config.toml

    View full-size slide

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

    View full-size slide

  12. Hugo Conf 22
    Baseof.html

    View full-size slide

  13. Hugo Conf 22
    That’s the basics!

    View full-size slide

  14. Hugo Conf 22
    Content

    View full-size slide

  15. Hugo Conf 22
    Now let’s get organized

    View full-size slide

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

    View full-size slide

  17. Hugo Conf 22
    content directory output

    View full-size slide

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

    View full-size slide

  19. Hugo Conf 22
    General translated content

    View full-size slide

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

    View full-size slide

  21. Hugo Conf 22
    i18n translation configuration files

    View full-size slide

  22. Hugo Conf 22
    i18n string reference

    View full-size slide

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

    View full-size slide

  24. Hugo Conf 22
    Redirects

    View full-size slide

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

    View full-size slide

  26. Hugo Conf 22
    netlify.toml

    View full-size slide

  27. Hugo Conf 22
    netlify.toml

    View full-size slide

  28. Hugo Conf 22
    netlify.toml

    View full-size slide

  29. Hugo Conf 22
    We’re almost done!

    View full-size slide

  30. Hugo Conf 22
    Fine-Tuning

    View full-size slide

  31. Hugo Conf 22

    How do I make CSS
    adjustments between
    languages?

    View full-size slide

  32. Hugo Conf 22
    Logical Properties

    View full-size slide

  33. Hugo Conf 22
    English banners

    View full-size slide

  34. Hugo Conf 22
    Arabic banners

    View full-size slide

  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);

    }

    View full-size slide

  36. Hugo Conf 22
    .banner__container {

    height: 100%;

    display: flex;

    align-items: center;

    }

    View full-size slide

  37. Hugo Conf 22
    .banner__graphic {

    padding: calc(var(--base-spacing) * 2);

    max-width: 24rem;

    margin-left: calc(var(--base-spacing) * 2);

    }

    View full-size slide

  38. Hugo Conf 22
    :dir(rtl) .banner__graphic {

    margin-left: 0;

    margin-right: calc(var(--base-spacing) * 2);

    }

    View full-size slide

  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

    View full-size slide

  40. Hugo Conf 22
    Less code.

    Easier maintenance.

    Better performance.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. Hugo Conf 22
    Logical property support on Caniuse.com
    92.71% Global Support (unprefixed)

    View full-size slide

  44. Hugo Conf 22
    How do I get CSS
    Logical Properties
    prefixed?

    View full-size slide

  45. Hugo Conf 22
    +
    PostCSS Autoprefixer

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. Hugo Conf 22
    module.exports = {

    plugins: [

    require('autoprefixer')()

    ]

    };
    postcss.config.js

    View full-size slide

  50. Hugo Conf 22
    {{ $styles := resources.Get "css/app.css" | toCSS |
    postCSS (dict "config" "postcss.config.js") | minify }}



    postcss.config.js

    View full-size slide

  51. Hugo Conf 22
    {{ $styles := resources.Get "css/app.css" | toCSS |
    postCSS (dict "config" "postcss.config.js") | minify }}



    layouts/partials/styles.html

    View full-size slide

  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

    View full-size slide

  53. Hugo Conf 22
    Pick fonts that are
    specific to the
    language
    * Pro tip

    View full-size slide

  54. Hugo Conf 22
    IBM Plex Arabic

    View full-size slide

  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;

    }

    View full-size slide

  56. Hugo Conf 22
    :root:lang(en) {

    --base-font-family: 'IBM Plex Sans', Sans-Serif;

    --secondary-font-family: 'IBM Plex Mono', monospace;

    }
    Default (english)

    View full-size slide

  57. Hugo Conf 22
    :root:lang(en) {

    --base-font-family: 'IBM Plex Sans', Sans-Serif;

    --secondary-font-family: 'IBM Plex Mono', monospace;

    }

    View full-size slide

  58. Hugo Conf 22
    :root:lang(ar) {

    --base-font-family: 'IBM Plex Sans Arabic', Sans-Serif;

    --secondary-font-family: 'IBM Plex Mono', monospace;

    }
    Arabic

    View full-size slide

  59. Hugo Conf 22
    :root:lang(ar) {

    --base-font-family: 'IBM Plex Sans Arabic', Sans-Serif;

    --secondary-font-family: 'IBM Plex Mono', monospace;

    }

    View full-size slide

  60. Hugo Conf 22
    What about giving
    users the ability to
    manually switch
    languages?

    View full-size slide

  61. Hugo Conf 22
    Laws of Ux Language switcher

    View full-size slide

  62. Hugo Conf 22


    {{ range .AllTranslations }}





    {{ .Language.LanguageName }}





    {{ end }}


    View full-size slide

  63. Hugo Conf 22


    {{ range .AllTranslations }}





    {{ .Language.LanguageName }}





    {{ end }}


    View full-size slide

  64. Hugo Conf 22


    {{ range .AllTranslations }}





    {{ .Language.LanguageName }}





    {{ end }}


    View full-size slide

  65. Hugo Conf 22


    {{ range .AllTranslations }}





    {{ .Language.LanguageName }}





    {{ end }}


    View full-size slide

  66. Hugo Conf 22
    Arabic Edition of Lawsofux.com

    View full-size slide

  67. Hugo Conf 22
    Thank you

    View full-size slide