Press shift question mark to access a list of keyboard shortcuts
Этот скринкаст является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
расшифровка
Одинарные и двойные кавычки часто появляются при написании кода.
Однако при отображении любого цитируемого текста, такого как элемент q или при использовании апострофов, мы должны использовать умные кавычки.
Они часто добавляются браузером, но мы можем контролировать их внешний вид и выбор персонажа из CSS.
В этом эпизоде мы узнаем все о:
- разница между глупыми цитатами и умными цитатами
- различные стили цитат, используемых на международном уровне
- и несколько
quotesсвойствоquotesCSS
Умный или тупой?
Когда мы создаем строку текста в редакторе кода, мы используем «тупые кавычки».
Это либо «одинарные кавычки», либо «двойные кавычки» и являются прямыми. В начале строки используется тот же символ, что и в конце.
Умные цитаты являются правильным типографским выбором для любых цитат или апострофов, которые отображаются в браузере. Они часто вьющиеся или наклонные, а начальные и конечные кавычки часто различаются.
Если ваш документ использует набор символов utf-8 вы можете добавлять умные кавычки непосредственно в HTML с помощью следующих сочетаний клавиш на Mac:
' ⌥+] ' ⌥+⇧+] “ ⌥+[ ” ⌥+⇧+[
И на Windows:
' alt+0145 ' alt+0146 “ alt+0147 ” alt+0148
В качестве альтернативы, персонажи могут быть использованы:
' ‘ ' ’ “ “ ” ”
Международные котировки
Когда я изучал этот эпизод, меня удивило, что стиль кавычек в разных странах сильно различается.
Английские кавычки выглядят «так» — с двойными (или одинарными) кавычками слева и справа.
Французские кавычки используют правую и левую «угловые кавычки».
И в «датских кавычках» используются те же символы, но наоборот.
Котировки в Болгарии, Чехии, Эстонии, Грузии, Исландии, России, Словакии, Словении и на Украине используют нижнюю двойную кавычку в качестве открытой и правильную двойную кавычку для закрытия.
Другие страны используют комбинацию этих стилей, а таблицу кавычек можно найти в Википедии .
quotes в CSS
В CSS есть свойство quotes которое позволяет нам контролировать, как браузер генерирует quotes для таких элементов, как q для встроенных цитат.
q { quotes: "“" "”"; }
Две строки, разделенные пробелом, задают символы, используемые для открывающей quote и закрывающей quote .
Можно использовать два набора строк, чтобы указать, как выглядят вложенные quotes .
q { quotes: "“" "”" "'" "'"; }
С помощью этого фрагмента любые вложенные quotes будут использовать одинарные кавычки вместо двойных кавычек.
«Цитата содержала« вложенную »цитату»
Элемент q будет иметь кавычки, сгенерированные браузером, а элемент blockquote нет. Мы можем добавлять quotes используя псевдоэлементы и свойство content .
blockquote {quotes:"“" "”" "'" "'";} blockquote: before {content:open-quote;} blockquote: after {content:close-quote;}
Это могут быть стили с любыми другими свойствами CSS для достижения желаемого результата дизайна.
Наконец, мы можем объединить наши знания о международных символах кавычек с CSS, изменив свойство quotes зависимости от языка документа или части документа.
Мы можем сделать это, используя псевдо-класс :lang .
:lang(en) q {quotes: "“" "”";} :lang(fr) q {quotes: "«" "»";} :lang(pl) q {quotes: "„" "”";}
Теперь, изменив атрибут языка элемента html , наши кавычки были исправлены для соответствующего языка.
Мне нравится идея получать такие тонкие детали прямо в веб-дизайне, я уверен, что это часто упускают из виду, но все, что можно сделать, большое или маленькое, для улучшения пользовательского опыта, звучит для меня хорошо.