Language-targeted CSS for Bilingual Site 20180207

tips & tricks
1

I’m coding a bilingual site now, and want to have css targeted to the language I switch to, while keeping only one minimized css file for better performance. The {{ .Lang }} variable makes this easily possible.

In css, target your language codes, for example on <body>:

body.ja {
  font-family: 'ryo-text-plusn', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN W3', 'MS PMincho', serif;
  text-align: justify;
  word-wrap: break-word;
  word-break: break-all;
  letter-spacing: 0.01em;
}

body.ja > h1, h2, h3, h4, h5, h6 {
  font-family: 'ryo-display-plusn', 'YuMincho', 'Yu Mincho', '游明朝', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN W3', 'MS PMincho', serif;
  color: DarkOliveGreen;
}

body.en {
  font-family: 'athelas', 'Georgia', serif;
  word-wrap: break-word;
  word-break: break-all;
}

body.en > h1, h2, h3, h4, h5, h6 {
  font-family: 'athelas', 'Georgia', serif;
  color: DarkBlue;
}

N.b. the left-most font names here happen to come from an Adobe TypeKit kit, but you can specify whatever fonts in the normal way in your font stack.

Then, put the language code in your template. Something like:

…
<body class="class1 class2 {{ .Lang }}">
…

Assuming your config.toml is set up for a multilingual site per the docs, the above makes it simple to target whatever languages you specified, so you can have language-specific css.

2 Likes