Спецсимволы html перенос строки. Неразрывный пробел и другие спецсимволы HTML
Однажды вечером я почувствовал, что пришло время расширить 97‐ й параграф «Ководства» Артемия Лебедева.
На клавиатуре одна чёрточка, она обычно правее нуля и повыше букв «З» и «Х». Неосведомлённые люди называют её попеременно то дефисом, то минусом, то тире. Лебедев объясняет нам, что это четыре (учитывая две разновидности тире) различных символа. На самом деле их как минимум девять , и об этом я и расскажу вам сейчас.
Что касается минуса (−), о нём уже многим хорошо всё известно: минус используется в математических выражениях, имеет такую же ширину, как любая цифра, выравнивается по высоте заглавной буквы, в отличие от тире и дефиса, и записывается в HTML как − .
На этом месте все обычно переходят к тире. Но постойте, мы ещё не рассмотрели три символа!
Какой символ употребляется в записи номеров телефонов (555‒41‒72)? Дефис, скажете вы; а вот и нет! Для этого есть отдельный символ: цифровая чёрточка (figure dash). Выглядит она (‒) практически как минус, но минусом при этом не является.
Вы можете спросить: а почему тогда нельзя использовать минус, раз он выглядит точно так же? Потому что минус — это знак вычитания, а в номере телефона ничто ни из чего не вычитается. По той же причине, по которой для выделения текста нужно использовать em , а не i . Это нельзя объяснить, это можно только познать.
Цифровая чёрточка имеет код U+2012 и в HTML записывается как ‒ .
О символе переноса , также называемым мягким дефисом, тоже многим известно. Этот символ, обозначаемый в HTML как — , расставляется в словах между слогами в тех местах, где можно сделать перенос . На экране он не отображается, за исключением случая, когда попадает на конец строки; в этом случае браузер (говорят, с третьей версии даже Firefox научился это делать) не переносит всё слово целиком, а ставит дефис и переносит оставшуюся часть слова.
Это особенно помогает в длинных словах, перенос которых создаёт огромные пустые пространства в правой части экрана. Огромный недостаток символа переноса состоит в том, что его неудобно расставлять вручную (впрочем, с этим могут справиться программы автотипографирования) и в том, что его употребление захламляет и делает нечитаемым исходный код текста (поэтому лучше, если расстановка символов переноса производится CMS на этапе генерации HTML‐ кода из хранящегося в базе данных текста).
Ещё один похожий на дефис символ — чёрточка (⁃), употребляемая в качестве маркеров списков (чёрточный буллит ). В Студии Лебедева справедливо замечают , что в русской типографской традиции нет такого понятия, как буллит (имея в виду традиционные кружки с квадратиками), и предлагают в качестве маркера употреблять (длинное) тире; как вы можете заметить, они именно так делают (или делали) на своём сайте и даже разразились статьёй , рассказывающей, как это сделать.
На самом деле для маркеров списков существует специальный символ, имеющий код U+2043 (впрочем, Лебедев утверждает, что к русской типографике это не относится). В HTML сделать для списка такой маркер довольно просто, используя CSS:
Ul{ list-style: none inside; } ul>li: before{ content: «\2043»; margin-left: -1ex; margin-right: 1ex; }
(Разумеется, приведённый код не идеален, да и работать будет лишь в правильных браузерах, но идея вам ясна, надеюсь.)
Теперь наконец‐ то можем перейти к тире; здесь всё уже хорошо изъезжено: известна разница между коротким тире (-, en dash, чёрточка шириной с букву «n», -) и длинным тире (—, em dash, чёрточка шириной с букву «M», —). Известно, что в русской типографике употребляется исключительно длинное тире (хотя ведутся споры касательно возможности употребления короткого тире в числовых диапазонах), тогда как на Западе обычно предпочитают en dash.
Длинное тире также употребляется в русском языке в диалогах. На Западе же для этой цели часто употребляют отдельный символ горизонтальной черты (―):
― Je m’ennuie tellement, dit-elle.― Cela n’est pas de ma faute, rétorqua-t-il.
Итак, девять различных чёрточек:
| Знак | HTML | Название | Назначение и употребление |
|---|---|---|---|
| — | — | дефисоминус | вместо всех остальных чёрточек при отсутствии технической возможности |
| ‐ | ‐ | дефис | для разделения частей слова: «светло‐ серый», «по‐ моему», «кое‐ кто» и т. п. |
| − | − | минус | математические выражения: 2 − 3 = −1 |
| ‒ | ‒ | цифровая чёрточка | номера телефонов и другие цифровые коды |
| | — | символ переноса | в (длинных) словах в тех местах, где можно сделать перенос |
| ⁃ | ⁃ | чёрточный буллит | маркер списка |
| — | — | короткое тире | западная типографика |
| — | — | длинное тире | русская типографика |
| ― | ― | горизонтальная черта | диалоги (в западной типографике) |
И, для сравнения, в одной строке:
— ‐
−
‒
⁃
—
—
―
Метки: Добавить метки
Работая в html-редакторе часто появляется необходимость знания спецсимволов (мнемоники ) для форматирования текста. Этими символами можно придать тексту правильный вид — легко читаемый и воспринимаемый.
Например, если ваш сайт имеет так называемую резиновую верстку — то расположенный в абзацах текст будет растягиватся по ширине, но при изменении этой ширины некоторые слова перенесутся на новую строку. Таким образом могут автоматически разделится неразрывные словосочетания или названия, например:
…доктор З.
Фрейд, который…
У пользователей разные экраны, а значит и ширина «резинового» сайта будет меняться: в каком месте будет перенос — неясно. Даже если ваш сайт заданной ширины, нельзя угадать в каком месте текста закончится строка. В языке HTML на этот случай существует специальная мнемоника — неразрывный пробел:
Пробел в html прописывается таким вот способом:
То есть, в редакторе должно выглядеть так:
HTML имеет одну особенность — множество пробелов заменяется одним. Если вы поставите 10 пробелов подряд в редакторе — то на странице увидите один. Неразрывный пробел также спасает в этой ситуации, но если вы хотите сделать отступ — лучше использовать для этого CSS.
Иногда нужен обрат
geekpad.ru
Для чего нужен неразрывный пробел в html :: SYL.ru
Что это такое?
В html есть множество всевозможных тегов, атрибутов, значений, которые используются в различных ситуациях. Некоторые применяются только по прямому назначению, другие обладают гибкими настройками, позволяющими использовать их в самых разных вариациях. Помимо обычных тегов, в html есть специальные символы мнемоники. С их помощью можно выводить на экран пользователей различные значки, иконки и т.д. Одним из самых полезных специальных символов является неразрывный пробел. Об этом элементе и будет идти речь в данной статье.
Назначение
В html неразрывный пробел может применяться в самых разнообразных ситуациях. Самый распространенный случай, когда используется данный элемент, — это для естественного увеличения интервала между символами или словами. Некоторые, возможно, уже возмутились и задают логичный вопрос: «А почему просто не использовать обычный пробел при помощи клавиши «space» на клавиатуре?». Дело в том, что браузер будет игнорировать все лишние интервалы между словами или символами кроме первого назначенного. Независимо от того, сколько их будет стоять в исходном коде страницы, все равно будет выводиться только один. Таким образом, если у вас возникнет желание поставить два или более пробелов, идущих друг за другом, придется использовать специальный символ. Помимо этого, бывают и другие случаи, когда используется данный элемент, например:
- Красная строка. Хотя данный способ отображения нового абзаца уже редко когда используется в Интернете, все же полезно знать, что если поставить в начале несколько таких пробелов, получится эффект отступа.
- Таблица. Иногда при построении таблицы появляются пустые ячейки, которые нужно чем–то заполнить, иначе из-за этого деформируется вся конструкция. Как вариант можно поставить неразрывный пробел. Тогда пользователи будут видеть пустую ячейку, и таблица останется в прежнем состоянии.
- Рисунки для привлечения внимания. С помощью данного элемента можно построить изображение из символов. Или иногда такой пробел используется для акцентирования внимания пользователей.
Применение
Неразрывный пробел html назначается путем написания специальных символов, а именно « ». То есть, вставив данную запись в исходный код, вы получите дополнительный интервал. Его длина будет равна обычному пробелу. Запись « » расшифровывается как «NO-BREAK SPACE», что и переводится как «неразрывный пробел». Можно использовать альтернативное обозначение « », что даст такой же эффект.
Особенности
К отличительным чертам данного элемента можно отнести тот факт, что если поставить такой пробел между двумя словами (символами), то они в любом случае будут оставаться на одной строке. В отдельных случаях будет появляться горизонтальная полоса прокрутки (когда элементы выходят за пределы экрана). Порой разработчики используют данный элемент только из-за этой особенности. Например, когда действительно важно, чтобы текст находился на одной строке.
Заключение
В большинстве случаев неразрывный пробел окажется бесполезным. Так как редко когда появляется необходимость ставить длительный интервал. Но, так или иначе, знать данный элемент нужно обязательно. Ведь когда-нибудь он пригодится любому разработчику html файлов.
www.syl.ru
Html значок градуса цельсия. Неразрывный пробел и другие спецсимволы HTML
Описание
Устанавливает тип кавычек, который применяется в тексте документа. В каждом
языке существуют свои традиции для обозначения кавычек, свойство quotes позволяет задать вид их отображения по всему тексту и установить, таким образом,
его единообразное оформление. Добавление кавычек происходит автоматически для
содержимого контейнера , а также для текста,
к которому применяется стилевое свойство content со значением open-quote
(открывающая кавычка) или
close-quote
(закрывающая кавычка).
Синтаксис
quotes: «левая кавычка» «правая кавычка» | none | inherit
Значения
В качестве значения используется символ текста (например, quotes: ««» «»» ) или символ юникода. Некоторые из них перечислены в табл. 1.
| Вид | Спецкод HTML | Юникод | Описание |
|---|---|---|---|
| » | » | \0022 | Двойная кавычка, применяется обычно в моноширинных шрифтах, для обозначения символа дюйма, а также угловых секунд. |
| » | » | \0027 | Апостроф. Символ угловых минут, в латинице применяется для обозначения мягкого знака (popalas» lisa). |
| « | « или « | \00ab | Открывающая двойная угловая кавычка. |
| » | » или » | \00bb | Закрывающая двойная угловая кавычка. |
| ‘ | ‘ | \2018 | Открывающая одинарная кавычка. |
| ’ | ’ | \2019 | Закрывающая одинарная кавычка. |
| “ | “ | \201c | Открывающая двойная кавычка в англоязычных текстах или закрывающая для русского языка. |
| ” | ” | \201d | Закрывающая двойная кавычка в англоязычных текстах. |
| „ | „ | \201e | Открывающая двойная кавычка. Применяется в русском языке. |
HTML5 CSS2.1 IE Cr Op Sa 5.1 Fx
quotesСтанислав Лец утверждал: Чаще всего выход там, где был вход
.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства quotes
Обновлено: 17 января 2015
Здравствуйте, уважаемые читатели блога сайт. Чуть ранее мы уже успели поговорить о том, также узнали про оформление в нем . Сегодня у нас на очереди понятие пробела в ХТМЛ, а еще связанное с ним форматирование кода при его написании (для удобства последующего его чтения и восприятия).
Ну и в связи с тем, что мы затронем тему неразрывного пробела и мягкого переноса, нам придется акцентировать наше внимание на так называемых спецсимволах или мнемониках, используемых в языке Html, которые позволят вам добавить в код web документа множество дополнительных символов, вроде уже упомянутого выше. Но обо всем по порядку.
Пробелы и пробельные символы в языке Html
Прежде, чем переходить к вопросу форматирования текста с помощью специально предназначенных для этого тегов (абзаца, заголовков и т.д.) я хочу остановиться на том моменте, как в языке ХТМЛ интерпретируются пробелы, переносы строки (Enter) и табуляция, как осуществляется разбивка текста в окне браузера при изменении его размера.
Правда для такого рода визуального форматирования (которое не будет видно на вебстранице) чаще всего используют не сами пробелы, а именно символы табуляции и переноса строки. Есть такое правило — когда начинаете писать вложенный Html тег, то сделайте отступ с помощью табуляции (клавиша Tab на клавиатуре), а когда этот тег закрываете, то уберите отступ (сочетание клавиш Shift+Tab на клавиатуре).
Делать это нужно так, чтобы открывающий и закрывающий тэги были бы на одном вертикальном уровне (на одинаковом количестве табуляций от правого края страницы вашего Html редактора, например, Notepad++, о котором я писал ). Кроме этого советую непосредственно после написания открывающего элемента сделать несколько переносов строки и сразу же прописать закрывающий на том же уровне (количестве табуляций), чтобы потом не забыть это сделать.
Т.е. открывающий и закрывающий элементы должны стоять на одном уровне по вертикали, а внутренние теги сдвигаем на один знак табуляции и располагаем закрывающие и открывающие опять же на одном уровне.
Для простых веб документов это может показаться излишеством, но при создании более-менее сложных, их код станет гораздо более наглядным и читаемым за счет обилия пробелов, а также в нем будет гораздо проще заметить ошибки за счет симметричного расположения тегов.
Спецсимволы или мнемоники в Html коде
Так, а теперь давайте поговорим о так называемых специальных символах, удобство использования которых я анонсировал в начале этой статьи. Спецсимволы еще иногда называют мнемоники или подстановки. Они предназначены для того, чтобы решить довольно давно возникшую в языке гипертекстовой разметки проблему, связанную с используемыми кодировками.
Когда вы набираете текст с клавиатуры, то происходит кодирование символов вашего языка по заранее установленному алгоритму, а потом они отображаются на сайте с помощью используемых вами шрифтов (где найти и как установить для сайта) за счет декодирования.
Кодировок существует очень много, но для языка Html по умолчанию была принята расширенная версия кодировок .
В этой кодировке текста было возможно записать всего лишь 256 знаков — 128 от ASCII и еще 128 для букв русского языка. В результате возникла проблема с использованием на сайтах знаки, которые не входят в ASCII и не являются буквами русского языка, входящими в состав кодировки Windows 1251 (CP1251). Ну, вздумалось вам использовать тильду или апостроф, а возможности такой изначально в используемой языком Html кодировке не заложено.
Именно для таких случаев и были придуманы подстановки или же, другими словами, мнемоники. Изначально спецсимволы имели цифровой вид записи , но затем для самых распространенных из них были добавлены их буквенные аналоги для простоты их запоминания.
В общем понимании, мнемоника — это такой знак, который начинается с амперсанда «&» и заканчивается точкой с запятой «;». Именно по этим признакам браузер при разборе Html кода выделяет из него спецсимволы. Сразу за амперсандом в цифровом коде подстановки должен следовать знак решетки «#», который иногда называют хеш. А уже потом следует цифровой код нужного символа в кодировке юникод.
В юникоде можно записать более 60 000 знаков — главное, чтобы нужный вам символ мнемоники поддерживался используемым на вашем сайте шрифтом. Есть шрифты с поддержкой почти всех знаков кодировки юникод, а есть варианты только с определенным
geekpad.ru
Вкладка пробела вместо нескольких неразрывных пробелов ( «nbsp» )? — html
& emsp; — это ответ.
Однако они не будут такими функциональными, как вы могли бы ожидать, если бы вы использовали горизонтальные таблицы в текстовых процессорах, например. Word, Wordperfect, Open Office, Wordworth и т.д. Они фиксированной ширины, и они не могут быть настроены.
CSS дает вам гораздо больший контроль и предоставляет альтернативу, пока W3C не предоставит официальное решение.
Пример:
padding-left:4em
.. или..
margin-left:4em
.. при необходимости
Это зависит от того, какой набор символов вы хотите использовать.
Вы можете настроить теги табуляции и использовать их так же, как использовать h-теги.
<style>
tab1 { padding-left: 4em; }
tab2 { padding-left: 8em; }
tab3 { padding-left: 12em; }
tab4 { padding-left: 16em; }
tab5 { padding-left: 20em; }
tab6 { padding-left: 24em; }
tab7 { padding-left: 28em; }
tab8 { padding-left: 32em; }
tab9 { padding-left: 36em; }
tab10 { padding-left: 40em; }
tab11 { padding-left: 44em; }
tab12 { padding-left: 48em; }
tab13 { padding-left: 52em; }
tab14 { padding-left: 56em; }
tab15 { padding-left: 60em; }
tab16 { padding-left: 64em; }
</style>
… и используйте их так:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabulation example</title>
<style type="text/css">
dummydeclaration { padding-left: 4em; } /* Firefox ignores first declaration for some reason */
tab1 { padding-left: 4em; }
tab2 { padding-left: 8em; }
tab3 { padding-left: 12em; }
tab4 { padding-left: 16em; }
tab5 { padding-left: 20em; }
tab6 { padding-left: 24em; }
tab7 { padding-left: 28em; }
tab8 { padding-left: 32em; }
tab9 { padding-left: 36em; }
tab10 { padding-left: 40em; }
tab11 { padding-left: 44em; }
tab12 { padding-left: 48em; }
tab13 { padding-left: 52em; }
tab14 { padding-left: 56em; }
tab15 { padding-left: 60em; }
tab16 { padding-left: 64em; }
</style>
</head>
<body>
<p>Non tabulated text</p>
<p><tab1>Tabulated text</tab1></p>
<p><tab2>Tabulated text</tab2></p>
<p><tab3>Tabulated text</tab3></p>
<p><tab3>Tabulated text</tab3></p>
<p><tab2>Tabulated text</tab2></p>
<p><tab3>Tabulated text</tab3></p>
<p><tab4>Tabulated text</tab4></p>
<p><tab4>Tabulated text</tab4></p>
<p>Non tabulated text</p>
<p><tab3>Tabulated text</tab3></p>
<p><tab4>Tabulated text</tab4></p>
<p><tab4>Tabulated text</tab4></p>
<p><tab1>Tabulated text</tab1></p>
<p><tab2>Tabulated text</tab2></p>
</body>
</html>Запустите фрагмент выше, чтобы увидеть наглядный пример.
Дополнительная дискуссия
В ISO-8859-1 HTML нет объектов горизонтальной табуляции, однако есть некоторые другие символы пробела, доступные, например, обычным  ,   и вышеупомянутого  .
Также стоит упомянуть, что в ASCII и Unicode 	 есть горизонтальная табуляция.
qaru.site
Использование спецсимволов в html
Зарезервированные в HTML символы должны заменяться кодами спецсимволов.
Спецсимволы — что это такое?
Некоторые символы в HTML зарезервированы. Например, вы не можете использовать знаки «больше» или «меньше», т.к. браузер не «поймет» их и воспримет как открывающий или закрывающий знак тега (<p>). Для отображения таких символов мы должны заменять эти символы их кодами. Коды выглядят так:&название_спецсимвола; или &#номер_спецсимвола; Использование названия символа связано с тем, что название символа запомнить проще, чем его номер. Однако, не все браузеры понимают названия символов, поэтому лучше использовать номер спецсимвола.
Неразрывный пробел
Чаще всего в HTML используется неразрывный пробел. Обычно в HTML удаляются лишние пробелы, т.е. если вы в коде напишите подряд десять пробелов, девять из них будут удалены при отображении страницы браузером. Для добавления нескольких пробелов надо использовать код неразрывного пробела — .
Часто используемые спецсимволы
Заметка: спецсимволы чувствительны к регистру, т.е. как обычно пишем их маленькими буквами и не паримся по этому поводу.
| Символ | Описание | Название | Номер |
|---|---|---|---|
| неразрывный пробел | |   | |
| < | меньше, чем | < | < |
| > | больше, чем | > | > |
| & | амперсанд | & | & |
| ¢ | цент | ¢ | ¢ |
| £ | фунт стерлингов | £ | £ |
| ¥ | знак иены | ¥ | ¥ |
| € | знак евро | € | € |
| § | параграф | § | § |
| © | копирайт | © | © |
| ® | зарегистрированная торговая марка | ® | ® |
Для получения дополнительной информации, ознакомтесь со справкой по спецсимволам.
Понравилась запись? Сказать «Спасибо» очень просто, поделитесь записью в социальных сетях!
weblabla.ru
Борьба с пробелами между блочно-строчными элементами — Блог Академии — HTML Academy
Несколько раз встречал обсуждение проблемы пробелов в Твитере, а затем увидел интересный дабблет на эту тему, поэтому решил зафиксировать.
Проблема вот в чём: между блочно-строчными элементами в браузере появляются пробелы, если вы форматируете HTML-код как обычно.
Другими словами.
Приведённый пример кода даст следующий результат:
Это крайне нежелательное явление.
Нам часто нужно, чтобы элементы стояли друг к другу вплотную. Например, при вёрстке навигации это позволяет избавиться от неудобных маленьких некликабельных промежутков.
Это не «баг» (по крайней мере, я не думаю, что это баг). Просто так работает принцип расположения элементов в строчку. Ведь вы же хотите, чтобы между словами, которые вы печатаете через пробел, этот пробел был? Пробелы между этими блоками — почти то же самое, что пробелы между словами. При этом я допускаю, что спецификацию можно усовершенствовать и прописать, что пробелов между блочно-строчными элементами быть не должно, но я уверен, что мало кто решится открыть этот ящик Пандоры.
Вот некоторые способы борьбы с пробелами, чтобы заставить блочно-строчные элементы стоять вплотную друг к другу.
Убрать пробелы
Причина, по которой у вас получаются пробелы, в том, что у вас есть пробелы между элементами (на самом деле, перенос строки и знаки табуляции воспринимаются как пробел). Решить проблему поможет минимизированный HTML-код или любая из следующих хитростей:
или
или с комментариями
Это всё довольно хитрые способы, но они делают своё дело.
Отрицательный внешний отступ
Можно подвинуть элементы, чтобы они стояли, как нужно, используя внешний отступ c отрицательным значением −4px. (возможны вариации значения в зависимости от размера шрифта у родительских элементов). Этот способ может некорректно работать в старых версиях IE (6 и 7), но если вам плевать на отображение в этих браузерах, вы хотя бы сможете сохранить в чистоте форматирование кода.
Не использовать закрывающий тег
Для HTML5 так делать — в порядке вещей. Хотя, стоит признать, становится немного не по себе.
Установить размер шрифта пробела, равный нулю
Пробел, имеющий нулевой размер шрифта, равен… нулю.
Мэтт Стоу сообщает, что метод использования font-size: 0; вызывает некоторые трудности на Андроиде. Цитата: «в версиях до Jellybean пробел не исчезает вообще, а в Jellybean есть баг, когда перед последним элементом иногда случайно возникает маленький пробел». Смотрите исследование.Кроме того, имейте в виду, если вы задаёте величины в em, то с использованием нулевого размера шрифта могут быть проблемы, поскольку при наследовании em-ов от ближайшего родителя все дочерние элементы будут также иметь размер шрифта 0. В этом случае вам помогут rem, или абсолютные (не относительные) единицы задания размера шрифта.
Другая странность! Даг Стюарт показал мне, что если использовать @font-face с этой техникой, то в браузере Сафари версии 5.0 шрифты потеряют сглаживание.Пусть они лучше плавают!
Может быть, им вообще необязательно быть блочно-строчными элементами, может, можно задать их расположение при помощи свойства float? Это позволит вам задать им и ширину, и высоту, и внутренние отступы, и всё остальное. Но при этом вы не сможете выровнять их так же, как блочно-строчные элементы, используя свойство text-align: center; у родителя. Ну, вообще… вы в каком-то смысле сможете это сделать, но выглядит это очень странно.
Используйте вместо этого flexbox
Если вас устраивает список поддерживаемых браузеров, а также все, что вам нужно от блочно-строчных элементов — это их выравнивание по центру, вы вполне можете воспользоваться flexbox. Это не совсем замена блочно-строчным элементам, но вы сможете добиться от него того, чего хотите.
Смотреть все примеры на CodePen.
htmlacademy.ru