Зачёркивание и подчёркивание символьными средствами ( ̶т̶а̶к̶ ̶, т̱а̱к̱ или т̲а̲к̲)
Если социальная сеть, платформа для блогов или форум предоставляют возможность размечать текст при помощи HTML или BBCode, перечёркивать или подчёркивать текст не составляет труда: можно пользоваться тегами s и u обеих разметок или назначать стили в HTML. Но что делать, если у нас есть только голый текст? Или, например, нам нужно зачеркнуть/подчеркнуть слово в заголовке страницы, отображаемом в заголовке вкладки или всего браузера, или оформить слово в заголовке форумного поста — короче говоря, всюду, где не работает разметка?
Можно рискнуть и воспользоваться средствами Юникода.
II. Нужные символы
Богатство Юникода содержит разнообразные способы создания композитных знаков, но мы упомянем три символа, удовлетворяющие нашу потребность в большинстве случаев.
1. Зачёркивание. Символ Юникода под номером U+0336 (в десятеричной нотации 822). В статье по ссылке можно увидеть и другие, более экзотические виды зачёркивания с соответствующими символами, но нам пока хватит и такого, тем более что он наиболее симулирует эффект привычных тегов. Если вставить по такому символу после каждого знака в тексте, ̶в̶ы̶г̶л̶я̶д̶е̶т̶ь̶ ̶э̶т̶о̶ ̶б̶у̶д̶е̶т̶ ̶в̶о̶т̶ ̶т̶а̶к̶ ̶ (для пущей убедительности лучше прихватывать дополнительные обрамляющие пробелы).
2. Пунктирное подчёркивание. Символ Юникода под номером U+0331 (в десятеричной нотации 817). Подчёркнутый им текст в̱ы̱г̱л̱я̱д̱и̱т̱ ̱в̱о̱т̱ ̱т̱а̱к̱.
3. Почти сплошное подчёркивание. Символ Юникода под номером U+0332 (в десятеричной нотации 818). Подчёркнутый им текст в̲ы̲г̲л̲я̲д̲и̲т̲ ̲в̲о̲т̲ ̲т̲а̲к̲.
III. Как вводить вручную
Некоторые способы перечислены в этой статье. Обратите внимание на упомянутый там ключ реестра. Судя по моему опыту, в разных приложениях работают разные способы: в одних работал шестнадцатеричный метод, в других десятеричный. Потестируйте сами после редактирования реестра и перезагрузки. Вот нужные нам три кода (в случае шестнадцатеричных кодов первый плюс означает одновременное нажатие, второй — собственно плюс на цифровой клавиатуре; начальный ноль, судя по тестам, можно набирать или пропускать по вкусу):
1. Зачёркивание: Alt + +(0)336 или Alt + (0)822
2. Пунктирное подчёркивание: Alt + +(0)331 или Alt + (0)817
3. Почти сплошное подчёркивание: Alt + +(0)332 или Alt + (0)818
Если вы пользуетесь утилитами вроде Punto Switcher или продвинутыми редакторами, можно настроить автозамену легко вводимого сочетания на нужный символ.
IV. Сетевые сервисы автоматизации
Пользователи давно уже догадались об этой возможности и наплодили множество сервисов, услужливо подсказываемых поиском. Вот простой отечественный пример. А вот зарубежный пример с расширенным выбором.
V. Букмарклеты
Впрочем, пользоваться для такой простой вещи целым сайтом не очень удобно. На помощь могут прийти кросбраузерные букмарклеты. Я попробовал написать два типа: простой, но с более широкой поддержкой браузеров, и посложнее, для последних версий браузеров.
1. Оформление всего текста в любом активном текстовом поле
Достаточно совсем простого кода (он работает даже в IE8):
Можете сохранить букмарклеты cо следующим кодом у себя в закладках или избранном (в Firefox работает простое перетаскивание кода букмарклета в закладки, потом только отображаемое название хорошо бы подправить; в других браузерах, возможно, придётся вставлять код в свойства любой готовой или заново создаваемой закладки):
Подчеркнуть всё пунктиром:
Подчеркнуть всё почти сплошной линией:
2. Оформление выделенного текста в любом активном текстовом поле
Код усложняется, потому что мы пытаемся оформить только выделенный участок, восстановить точку фокуса и позицию прокрутки (тестировалось только в последнем Firefox, но по идее должно работать и в других браузерах последних версий):
Можете сохранить букмарклеты cо следующим кодом у себя в закладках:
Подчеркнуть выделенное пунктиром:
Подчеркнуть выделенное почти сплошной линией:
VI. Подводные камни
Нужно учитывать, что данный метод влечёт за собой некоторые рискованные последствия.
1. Слова, оформленные таким образом, могут не находится ни сетевым поиском, ни поиском по странице. Также они может создавать проблемы при разных автоматических обработках текста и проверке орфографии.
2. Если используется основной шрифт, в котором нет нужных символов, возможны уродливые глюки разной степени нечитабельности.
3. Некоторые версии браузеров вообще отказываются видеть в этих символах нужные знаки Юникода. Возможны глюки как на стадии создания первоначального текста, так и при перепостах и цитировании.
BB-коды
JS-код:
[CODE=javascript]var hello = ‘world’;[/CODE] Результат:
[ICODE] — отображение однострочного программного кода
[INDENT] — отступ текста
[TABLE] — таблицы
| Заголовок 1 | Заголовок 2 |
|---|---|
| Содержимое 1 | Содержимое 2 |
[HEADING= уровень ] — заголовки с первого по третий уровень
Пример: [HEADING=1]Основной заголовок[/HEADING]
Этот текст подпадает под основной заголовок, используемый для разделения основных разделов статьи.
[HEADING=2]Второстепенный заголовок[/HEADING]
Если вам нужно разделить основные разделы статьи, используйте второстепенный заголовок второго уровня.
[HEADING=3]Подзаголовок[/HEADING]
Если вам требуется дополнительное разделение, то Вы можете воспользоваться подзаголовком. Результат:
Основной заголовок
Этот текст подпадает под основной заголовок, используемый для разделения основных разделов статьи.
Второстепенный заголовок
Если вам нужно разделить основные разделы статьи, используйте второстепенный заголовок второго уровня.
Перечёркнутый текст
Первыми тегами для зачёркнутого текста были <strike> и <s> .
C приходом HTML 4 их использование стало осуждается, а в HTML 5 их вовсе запретили. В место них ввели <del> , он помечает текст как удаленный, что семантически правильнее.
По виду они не отличается:
Изменить цвет линии
Первый способ
С помощью CSS свойства text-decoration-color , который задаёт цвет линии (не поддерживается в Internet Explorer и Edge).
Также можно изменить стиль линии с помощью text-decoration-style .
| Значение | Описание | Пример |
|---|---|---|
| text-decoration-style: solid; | Одинарная линия | Текст |
| text-decoration-style: double; | Двойная линия | Текст |
| text-decoration-style: dotted; | Точечная линия | Текст |
| text-decoration-style: dashed; | Пунктирная линия | Текст |
| text-decoration-style: wavy; | Волнистая линия | Текст |
Второй способ
Тегу <del> задается цвет линии, вложенному <span> цвет текста.
Третий способ
Линия добавляется псевдо элементом :before , но у текста не должно быть переносов.
Зачеркнутый текст на сайте через CSS и теги html
Рассмотрим все способы как можно сделать зачеркнутый текст через html и CSS. Существует два варианта реализации:
- Через html теги <s> , <strike> и <del>
- Через свойство CSS text-decoration
1. Зачеркнутый текст через html теги <s>, <strike> и <del>
Весь текст заключенные в html теги <s></s> , <strike></strike> и <del></del> становится зачеркнутым. Необычная буква s произошло в сокращение от английского слова «strike».
Разница между всеми тремя тегами визуально отсутствуют. Однако последний вариант с использованием html тега <del></del> считается более предпочтительным, поскольку он поддерживается в стандарте HTML5. Другие теги не поддерживаются (они конечно будут отображаться корректно, но валидацию не пройдут).
Преобразуется на странице в
Обычный шрифт. Зачеркнутый текст через тег s
Обычный текст. Зачеркнутый текст через тег strike
Обычный текст. Зачеркнутый текст через тег del
2. Зачеркнутый текст через свойство CSS text-decoration
В CSS есть свойство text-decoration, которое отвечает за подчеркивание текста.
Синтаксис CSS text-decoration
- none — текст без оформления
- underline — нижнее подчеркивание
- overline — верхнее подчеркивание
- line-through — зачеркивание текста
- blink — мерцающий текст (рекомендуется не применять это значение)
Нас интересует значение line-through , которое задает зачеркивание текста.