Html Lang [WebDev Log 0]

Html Lang [WebDev Log 0]

a simple & dirty cheap trick in yaml

Everyone should be familiar with the good old HTML lang attribute.

<html lang="en">

Now, as you may have noticed, I'm developing my site in a strange mix between English and Italian pages using the amazing 11ty static site generator.

Originally I was considering doing something with i18n libraries, but it didn't seem an idea that suited to my website's purposes.

The problem

The default layout is at the base (surprise!) of all the website's pages, including the post layout (which applies to both English and Italian articles) and was set with lang="eng".

A custom Italian layout ?

For a short while I thought about creating a layout completely dedicated to Italian pages, but it was clearly a bad idea:

imagine having to scour for a problem between two almost identical layouts.

No thanks.

The solution

Rather simple and painless, really:

<html lang="{%- if lang -%}{{ lang }}{%- else -%}en{%- endif -%}">

if the lang attribute is found in the post's yaml, like so:

lang: it-IT

the output will be:

<html lang="it-IT">

else, the default english will apply:

<html lang="en">

Now I can also write post in Japanese (not that I know it, mind you!) by just setting the lang attribute in the yaml!