Как сделать кавычки html
Кавычки в HTML
Существует несколько видов кавычек: кавычки ёлочки (русские классические кавычки), английские двойные кавычки (используются при написании литературных текстов и т.п.), одинарные кавычки (используются в программировании для экранирования кода, в том числе, и в веб-программировании), немецкие двойные (перевёрнутые) кавычки. Очень часто при вёрстке страниц очень важно быстро прописать кавычки, которых нет под рукой. Для этого проще бы запомнить или записать где-нибудь html код кавычек, которые будут всегда, что называется, под рукой.
Кавычки в HTML
Кавычки можно выделить в тексте при вёрстке страниц несколькими способами. Можно выделить с помощью двойного тега q, пример ниже:
С помощью простого псевдокласса :lang мы можем задать настройки вида кавычек в цитатах для разных языков. В качестве языка выступают короткие значения языков, например: ru — русский; en — английский; de — немецкий и т.п. Для этого в CSS нужно прописать следующие стилевые свойства quotes (которые и определяют тип кавычек в зависимости от языка:
При вёрстке же страницы или просто при написании текста достаточно добавить к тегу цитаты псевдокласс :lang. Например:
Виды кавычек
Вид | Спецкод HTML | Юникод | Описание |
---|---|---|---|
« | « | \0022 | Двойная открывающаяся кавычка. |
‘ | ‘ | \0027 | Апостроф. В латинице применяется для обозначения мягкого знака. В программировании при экранировании кавычек. |
« | « или « | \00ab | Открывающая двойная угловая кавычка. Используются в текстах на русском языке. Классические кавычки ёлочки. |
» | » или » | \00bb | Закрывающая двойная угловая классическая кавычка ёлочка. Используются в текстах на русском языке. |
‘ | ‘ | \2018 | Открывающая одинарная кавычка. |
’ | ’ | \2019 | Закрывающая одинарная кавычка. |
“ | “ | \201c | Открывающая двойная кавычка в текстах на английском языке или закрывающая кавычка для русского языка. |
” | ” | \201d | Закрывающая двойная кавычка в текстах на английском языке. |
„ | „ | \201e | Открывающая двойная кавычка. Применяется в текстах на русском языке. |
А можно и просто, пользуясь таблицей выше, прописывать каждый раз в нужном месте HTML код кавычки, выбрав нужный её вид.
Расстановка дефисов, минусов, тире и кавычек
Вопросы правильной расстановки дефисов, длинного и короткого тире, знака минуса, кавычек-елочек и кавычек-лапок уже неоднократно поднимались в интернете и на Хабре в частности (см. ссылки ниже). Однако по-прежнему, студенты и аспиранты в своих курсовых и дипломных, диссертациях и авторефератах не уделяют достаточного внимания типографике.
В данной заметке я привожу две таблицы с основными правилами расстановки указанных знаков и отбивок между ними при верстке текстов в системе LaTeX, в которой готовится значительная часть квалификационных работ по физико-математическим специальностям.
Со временем возможно появятся похожие таблички с правилами расстановки пробелов, знаков препинания и по оформлению текста в целом.
Дефисы, минусы и тире
Е.\,С. Методы решения сеточных уравнений.
Общепринятых правил употребления разделителей в «прочих „диапазонах“» я не нашел,
потому приведенные выше правила для этого случая вывел для себя сам, пользуясь здравым
смыслом и ориентируясь на современные книжные издания высокого качества (изд-во РХД).
Источники и дополнительные ссылки
Кавычки
языке программирования С элементы многомерных массивов располагаются в памяти >, а в Фортране
А.\,А. Уравнения математической физики.
— сказал бородатый (А.
Источники и дополнительные ссылки
Ой, у вас баннер убежал!
Читают сейчас
Редакторский дайджест
Присылаем лучшие статьи раз в месяц
Скоро на этот адрес придет письмо. Подтвердите подписку, если всё в силе.
Похожие публикации
Факторы, влияющие на html вёрстку (Часть 2: Работа PM и Рабочий процесс)
Факторы, влияющие на html вёрстку (Часть 1: Работа HTML кодера)
Mac OS и программы для HTML верстки
Вопросы и ответы
Почему зависает браузер при открытии сайта?
Как сделать, что бы в карточке товара при изменении элементов не менялась высота?
Как сделать h1 и span в одну строку?
Почему свойство offsetWidth возвращает 0?
AdBlock похитил этот баннер, но баннеры не зубы — отрастут
Минуточку внимания
Комментарии 54
Да, спасибо. Помню, меня это очень удивило, когда прочитал об этом по ссылке №5.
Интересно, есть ли что-нибудь подобное в LaTeX.
Раз уж добавили хтмл-сущности, то было бы здорово и про альт напомнить людям в очередной раз. Благо, места много не занимает.
ALT+0151 — ALT+0150 — ALT+0171 «
ALT+0187 »
Как сделать лапки с лету не скажу 🙁
Ну, раз так, то вот варианты для Unix (Ctrl-Shift-U + HEX):
‐ 2010 (ALT+8208): HYPHEN
‑ 2011 (ALT+8209): NON-BREAKING HYPHEN
‒ 2012 (ALT+8210): FIGURE DASH
– 2013 (ALT+8211): EN DASH
— 2014 (ALT+8212): EM DASH
― 2015 (ALT+8213): HORIZONTAL BAR
− 2212 (ALT+8722): MINUS SIGN
“ 201c (ALT+8220): LEFT DOUBLE QUOTATION MARK
„ 201e (ALT+8222): DOUBLE LOW-9 QUOTTION MARK
… 2026 (ALT+8230): HORIZONTAL ELLIPSIS
« ab (ALT+0171): LEFT-POINTING DOUBLE ANGLE QUOTATION MARK
» bb (ALT+0187): RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK
английские двойные:
“ alt+0147
” alt+0148
английские одинарные:
‘ alt+0145
’ alt+0146 (он же апостроф)
русские:
„ alt+0132
“ alt+0147
Посмотрите документацию к babel и пакету ncc-latex. А по книгам, кроме Львовского, который местами устарел, есть ещё много литературы. Начните отсюда: _http://forum.ru-board.com/topic.cgi?forum=5&topic=4633
В дальнейшем рекомендую записаться на _https://info.vsu.ru/Lists/CyrTeX-ru/List.html
На _https://info.vsu.ru/Lists/CyrTeX-ru/List.html ищите тему «Восклицательный и вопросительный знаки с точками — как набирать?». В общем, набираю сейчас одну книгу так:
% —
% Р У С С К И Е Т Р О Е Т О Ч И Я %
% —
% код Alexey Malistov
\let\exclm=!
\let\quest=?
\makeatletter %\catcode`\@=11 % Равносильно \makeatletter
\newbox\tmpbox
В тексте, соответственно, так:
\lettrine<И> <ллюзий>и надежд больше не оставалось. И
Дворцу, чтобы пробраться в
бункер «— единственное место, дававшее
ощущение реальной власти. Здесь мог быть только он. Отсюда мог диктовать
условия всему миру, угрожая уничтожить его движением руки. И
бывал
уже там раньше\ldots<> И
трогал вечно светящуюся кнопку на пульте
под прикрывающим её защитным колпаком. Хотя от кого же защищать её,
несущую начало разрушения? Вспомнив этот колпак, подумал, что он поставлен
специально, чтобы, добираясь до неё, успеть подумать, а
«Надо! «— решил он. «— Проверим, что там, по ту сторону смерти\ldots<>
А
для кого „надо“, если убью всех. Всех!\kern\fontdimen3\font!
И
даже Бога?!\kern\fontdimen3\font! Есть ли ты, всезнающий и
Он пролетал над красной поляной, когда что-то случилось, и
он, вдруг,
потеряв несущую его силу, полетел вниз и
воде. Это спасло его от увечий. И
он возрадовался мелькнувшей
мысли, что левитация исчезла, потому что нет больше экл-Т-трона. Взорвали
его, как приказал. И
если прекратилась левитация, то не будет и
Но хорошо бы это дело доделать. Способ этот имеет недостатки, кажется, PDF-закладки портятся. На CyrTeX я писал, кажется.
Длинное тире не должно отбиваться пробелами.
2. Отбивают
…
б) тире между словами с обеих сторон на 2 п.
П.Г.Гиленсон. Справочник технического редактора
Пробел — слишком большой промежуток, вместе с длинным (и тонким) тире он образует визуальную «дыру» в наборе.
Господин Лебедев делает свои утверждения безапелляционно, но верными от этого они не становятся. Он заметил, что в советских книгах вокруг тире что-то стоит, изобразил из себя Гуру и назвал дураками весь Рунет. При этом повел себя как Дилетант и не удосужился узнать что именно следует ставить вокруг тире. Фактически он создал новое массовое заблуждение и если раньше тире использовали неправильно «просто так», то теперь многие верстальщики (и бумажные и Web) неверно оформляют тире «по правилам».
P.S. Мои эмоции не относятся к автору поста, я знаю как сложно в наше время убедиться в достоверности информации.
как массово в веб-типографике вы предлагаете делать эту двухпунктовую отбивку?
(книжка, кстати, 72-го года, так шта. )
Я не знаток веб-верстки, оптимального решения задачи не дам. Но можно создать стиль уменьшающий обычный пробел до нужного размера и применять его к пробелам окружающим длинное тире.
(Я не думаю что технологические возможности в 72 году были больше чем сейчас. А вот причина, по которой следовали этому правилу не изменилась: длинное тире с нормальными пробелами вокруг себя ВОСПРИНИМАЕТСЯ как «дыра».)
а мной не воспринимается, т. е. имеет место чистая вкусовщина =)
Для первого квадратика у Гиленсона припасено другое правило (там все сложно, ага):
2. Отбивают
…
в) тире в прямой речи в начале абзаца (справа на полукегельную)
Для шрифта 12 п. полукегельная равна 6 пунктам, и это значительно больше 2 п. В данном вопросе ваш вкус близок к старперским требованиям.
Во втором квадратике вообще должны действовать другие правила, там другой язык. Какие именно правила должны использоваться в данном случае я не знаю. Для примера, чуть ниже справедливо замечают, что «в английском тире не отбивают». Т.е. опять же все сложно ((
Правил в типографике множество, но в компьютерный век это не должно быть проблемой. Источник наших бед заключается в том, что правила русской типографики отличаются от правил американской типографики, а программы пишут американцы. Если бы MS по какой-то удивительной причине вдруг зашила бы в Word того же Гиленсона, большинство офисных документов автоматически стали бы очень красивыми и удобными. Просто у нас другие буквы, им нужны другие правила.
P.S. В приведенном примере слишком маленькие пробелы между словами. Причина опять же кроется в происхождении шрифта. Сначала в нем была сделана латинская часть и только потом появились кириллические знаки. Пробелы между словами соответствуют ширине латинских букв. Русские буквы в среднем шире, поэтому в русском тексте и пробелы в среднем должны быть шире. Но так как для увеличения ширины пробелов нужно совершать дополнительные телодвижения (и многие знают какие именно телодвижения), то «в среднем по больнице» большинство русских текстов сейчас набирается с пробелом по умолчанию, а он согласован с шириной латинских букв.
В юникоде, кстати, полно маленьких пробелов. На любой вкус.
А Вы ставите кавычки в атрибутах тегов при верстке HTML (HTML4, HTML5)
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
А Вы ставите кавычки в атрибутах тегов при верстке HTML (HTML4, HTML5)
Ой, у вас баннер убежал!
Читают сейчас
Редакторский дайджест
Присылаем лучшие статьи раз в месяц
Скоро на этот адрес придет письмо. Подтвердите подписку, если всё в силе.
Похожие публикации
Как отличить HTML от HTML5
Что нам сулит новая модель развития html5
HTML5 File API: множественная загрузка файлов на сервер
Средняя зарплата в IT
AdBlock похитил этот баннер, но баннеры не зубы — отрастут
Минуточку внимания
Комментарии 31
В свое время много работал с XHTML (XHTML Mobile), и привык что все должно быть строго. Все теги закрыты, все атрибуты только в кавычках.
На работе недавно пришла новая верстка для проекта. В ней небыло практически кавычек и код был вида:
Для меня было ужасно читать такой код. Я быстро наваял на баше скриптину, перевел все в «валидный» вид. Высказал претензию верстальщику и понеслось. Он категорически запретил ставить кавычки там где не надо ибо валидатор разрешает и стандартом разрешено. И кода должнобыть меньше, а кавычки утяжеляют страницу…
Может я чего-то упустил в трендах верстки? оО
Без кавычек очень легко допустить ошибку:
И использование кавычек «через раз» вносит раздор стилевого оформления:
Полностью согласен. Но решил узнать мнение ибо может что-то поменялось, а я упустил. Все-таки без кавычек читается все адски ужасно.
Так как времени на споры нет, надо работать, тоя просто сделал такой вот финт руками:
Воздержитесь от таких резких оценок, особенно если не собираетесь их аргументировать.
Кавычки в большинстве атрибутов нужны в первую очередь для удобочитаемости (не берем в расчет XHTML). Если кому-то легко читать код без кавычек в атрибутах — почему нет? Браузеру все равно, а понятие «красивый код» слишком субъективно, чтобы его оценивать. Для меня красивым является код, в котором нет необязательных тегов и не закрыты теги, которые можно не закрывать. То, что это многим кажется «некрасивым» для меня ровным счетом ничего не значит.
Насчет использования кавычек «через раз» — согласен. Но ведь заранее известно, какие атрибуты требуют кавычек, а какие — нет. Правда, получается, что большинство используемых и актуальных в наше время атрибутов все-таки требуют кавычек (class, style, title, …). Также помню о чьей-то чужой проблеме, когда старый браузер считал цвет, указанный в атрибуте в формате #XXXXXX, анкор-ссылкой в текущей странице. Кавычки лечили это поведение. Однако это было давно, в старом браузере, и не у меня. Об этом просто достаточно помнить, массовых неприятностей это не вызывает.
Таким образом если неиспользование кавычек разработчику не мешает, он отчетливо понимает, когда они нужны, а когда — нет, и использует их последовательно (а не через раз), то что в этом плохого?
Варианты «некрасиво» и «плохо читается» не рассматриваем: оба слишком субъективны, вплоне верю, что кому как.
Варианты «некрасиво» и «плохо читается» не рассматриваем: оба слишком субъективны, вплоне верю, что кому как.
Разумеется никаких объективных аргументов тут нет и быть не может, о том и речь. Поэтому меня удивили агрессивные выпады в сторону человека, который сознательно выбрал один из вариантов.
Допустимо и работает и то, и другое. Выбираем то, что больше нравится. Когда нужны кавычки, а когда нет — известно заранее. По каким критериям можно определить «лучше/хуже» или «правильно/неправильно», если оба варианта допускаются спецификацией?
А про цвет — так это было в чем-то вроде оперы 7 или ie 5 (а то и 4), скорее историческая справка, чем реальная проблема.
То, что разработчики стандарта пошли на поводу у браузерописателей не дает право верстальщикам выключать свой мозг.
Ваш верстальщик — кретин. Подобный ужас и прополз в стандарт как раз из-за таких вот кретинов.
- Как сделать кавун с водкой
- Как сделать кавычки в wordpad