Jekyll2018-06-08T16:16:46+02:00https://petergrassberger.com/Peter GrassbergerWrite an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.Style Links By hreflang2014-06-27T17:11:08+02:002018-01-07T19:27:00+01:00https://petergrassberger.com/blog/style-links-by-hreflang.en<p><b>or how to mark links with a different language.</b></p>
<p>
I've been using the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-hreflang"><code>hreflang</code></a> tag for some time now to mark links that point to websites with content in different languages. It's nice to have this kind of semantic information, but no browser displays links any different based on it. I like the way <a href="https://www.wikipedia.org/">Wikipedia</a> marks its external links with an icon and I wanted something similar for my <a href="https://petergrassberger.com/">petergrassberger.com</a> and <a href="https://petergrassberger.at/" hreflang="de">petergrassberger.at</a> sites. I found something on <a href="https://lachy.id.au/log/2005/04/handy-css#language">Lachy's Log: Handy CSS</a> that was almost what i wanted, take a look at the final version below or as a <a href="https://gist.github.com/PeterTheOne/22057c1ec51029e2576c">gist</a>.
</p>
index.html:
<pre><code class="html"><!doctype html>
<html lang="en"><!-- or "de" -->
<head>
<meta charset="utf-8" />
<title>Style links by hreflang</title>
</head>
<body>
<!-- this link will have "de" appended -->
<a href="https://petergrassberger.at/" hreflang="de">German Site</a>
<!-- this link will stay the same because the site lang is "en" -->
<a href="https://petergrassberger.com/" hreflang="en">English Site</a>
</body>
</html>
</code></pre>
style.css:
<pre><code class="css">/* shows hreflang that are not "en" after links on a lang="en" site */
html[lang="en"] :link[hreflang]:not([hreflang="en"])::after {
content: " "attr(hreflang);
font-size: xx-small;
}
/* shows hreflang that are not "de" after links on a lang="de" site */
html[lang="de"] :link[hreflang]:not([hreflang="de"])::after {
content: " "attr(hreflang);
font-size: xx-small;
}
/*
add more if you have more languages
*/
</code></pre>
<p>
The <code>html[lang="en"]</code> part filters all the pages of other languages, then <code>[hreflang]</code> checks if the <code>hreflang</code>-attribute exists and <code>[hreflang="en"]</code> checks if the <code>hreflang</code>-attribute has a different value from <code>en</code>. The <code>::after</code> selector appends content to the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:link"><code>:link</code></a>-elements and <code>content:</code> says what to append, in this case one white space character and the value of the <code>hreflang</code>-attribute.
</p>
<p>
It is a shame that there is no way (that I know of) to compare the <code>html</code> <code>lang</code> attribute directly with the <code>a</code> <code>hreflang</code> attribute, because then you could reduce the css to only one selector and you wouldn't have to add each language separately. Alternatively you could also do this with javascript (and jQuery).
</p>or how to mark links with a different language.