在句子开头放置国旗

Question

我需要用两种语言显示字符串：英语和荷兰语。

在英语句子开头显示英国国旗，在荷兰语句子开头显示荷兰国旗会很好。例如：

This is an English text.

Dit is een Nederlandse text.

我目前使用的是图像。但我想知道是否有其他方法可以做到这一点。例如通过HTML实体？或者别的什么？

Answer 1

HTML，CSS或Unicode有 no native way 来显示国旗。

可以用纯CSS渲染标志（参见Phoca CSS Flags库）。但我不建议将其用于实际目的。

只需将图像用于国旗。

理由：

• CSS从未打算渲染标志，它只是一个错误的工具。
• CSS的复杂性和大小 - PNG图像可能比CSS小，
• 处理此CSS的复杂性 - 可能会降低浏览器性能，
• 搜索引擎可能能够将图像识别为国旗，但不太可能将花哨的空盒识别为旗帜。

---

那就是说，你不必在HTML中使用<img>元素来显示标志。在内容上定义lang属性，并使用:lang选择器在特定语言的段落前后显示图像。

一个例子（注意HTML标记只包含语义lang属性，没有标记图像）：

p:lang(en):before,
p:lang(en):after
{
  content: url(http://i.stack.imgur.com/wJ384.gif);
}

p:lang(nl):before,
p:lang(nl):after
{
  content: url(http://i.stack.imgur.com/CKGZe.gif);
}

<p lang="en">This is an English text.</p>
<p lang="nl">Dit is een Nederlandse text.</p>