HTML in i18n Strings - use single quotes 20180206

I’m using i18n strings for a bilingual Japanese and English site, which is working out quite nicely. Japanese is horizontally more compact than English, and for certain strings, I need different conditional media query breaks depending on which language it is.

For example, the following strings mean the same thing but, are different lengths physically:

  1. Ohte University, Graduate School of Medicine, Faculty of Medicine, Cardiovascular Surgery Department
  2. 大手大学大学院医学系研究科外科学講座心臓血管外科学

Given a css class “dn-ns” that displays none, when the screen is not small, I want to add spans to these strings to break them up. But, when you insert HTML into your i18n strings and specify css classes in the conventional way using double quotes, it causes Hugo to crash:

[orgName]
other = "Ohte University, <span class="dn-ns"><br/></span>Graduate School …"

It turns out that you can’t use double quotes here, but single quotes are perfectly valid for specifying css classes. In this case therefore, just change the inner double quotes to single quotes (also tried escaping them and converting to entities without success).

My i18n files en.toml and ja.toml now have:

[orgName]
other = "Ohte University, <span class='dn-ns'><br/></span>Graduate School of Medicine, <br/>Faculty of Medicine, <span class='dn-ns'><br/></span>Cardiovascular Surgery Department"

and

[orgName]
other = "大手大学大学院医学系<span class='dn-ns'><br/></span>研究科外科学講座<br/>心臓血管外科学 内"

This format saves without crashing Hugo. To use it, specify it in your template as needed, piping to safeHTML.

<p class="classa">{{ i18n "orgName" | safeHTML }}</p>

Hugo env:

Hugo Static Site Generator v0.37-DEV-E02EE7D6 darwin/amd64 BuildDate: 2018-02-06T07:16:31+0900
GOOS="darwin"
GOARCH="amd64"
GOVERSION="go1.9.3"
1 Like

For the sake of learning, couldn’t the end result be achieved with the css auto word wrap setting?

Don’t get me wrong, I understand that in some cases we will need to specify the line break precisely. And the difference between Japanese and english is a perfect example.

1 Like

Totally true @brunoamarai and thanks for the reminder. Japanese does not have many spaces and word-wrap: break-word; had been problematic a while back but, I’ll need to test it in some modern browsers to see how it works nowadays.

@brunoamaral closing the loop, this seems to work pretty well for Japanese body text:

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;
}
1 Like