Размещение национальных флагов в начале предложения

Question

Мне нужно отобразить строку на двух языках: английском и голландском.

Было бы неплохо показать английский флаг в начале английского предложения и голландский флаг в начале голландского предложения. Например:

This is an English text.

Dit is een Nederlandse text.

То, что я в настоящее время использовать это изображение. Но мне было интересно, есть ли другие способы сделать это. Например, через HTML-объекты? Или может быть что-то еще?

Answer 1

HTML, CSS или Unicode имеют нет родного пути для отображения национальных флагов.

Можно визуализировать флаги с помощью чистого CSS (см. Phoca CSS Flags). Но я не рекомендую использовать его для практических целей.

Просто используйте изображения для национальных флагов.

Причины:

• CSS никогда не предназначалась для отображения флагов, это просто неправильный инструмент для этого.
• Сложность и размер CSS - это PNG изображение может оказаться меньше, чем CSS,
• Сложность обработки этого CSS - может привести к снижению производительности браузера,
• Поисковые системы могут быть в состоянии распознавать изображения в качестве национальных флаги, но вряд ли распознают пустые поля в стиле фантазии в виде флагов.

---

Это сказало, вы не должны использовать <img> элементы в HTML для отображения флагов. Определите 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>