Как подчеркнуть текст в браузере
Акцентировать текст в большом количестве информации – хорошая идея. Ведь чтец может не заметить нужной, важной или еще какой-то информации, которую вы хотите донести. Например, я тоже акцентирую текст: теги, стили, атрибуты, ключевые слова, ссылки и прочее я выделяю своим цветом, но делаю я это при помощи стилей. В HTML предусмотрены стандартные «выделители» текста: жирное начертание, косое начертание, подчеркнутое начертание, зачеркнутое начертание, больше размера, меньше размера. Пробежимся по всем элементам акцентирования.
Жирный текст
Всеми известный жирный шрифт, который можно увидеть везде. Для этого было разработано два тега и . Тег , более распространенный. Эти теги не одинаковы, хоть и результат схож. Различие заключается в том, что тег определяет физическую жирность текста, а тег определяет важность этого текста и выделяет его жирным начертанием. Но, большое «но», в современных браузерах их права «уравняли», они стали равнозначными (эквивалентными). Такая же ситуация и у тегов и . Следовательно, выгоднее использовать тег, который короче. Далее пример:
Курсивный текст
За акцентирование курсивным шрифтом, отвечают теги и . Как сказано выше, они различны по своей направленности, но в современных браузерах эквивалентны. Далее пример:
Подчеркнутый текст
Акцентировать текст подчеркнутым шрифтом можно при помощи тега . Этот тег осуждают спецификацией HTML и рекомендуют использовать стили, с чем я и соглашусь. Я обязательно напишу эквиваленты тегов акцентирования в CSS. Далее пример:
Зачеркнутый текст
Для того чтобы зачеркнуть текст, используют два эквивалентных тега: и . Эти два тега осуждают и рекомендуют взамен им использовать стили. А тег категорически запрещен в HTML5. Далее пример:
Крупнее и мельче обычного текста
Акцентировать текст, можно и увеличив размер это текста. Для этого есть тег . Чтобы текст был мельче обычного, применяют тег . Но все же выгодно использовать всегда стили CSS. Далее пример:
Замена жирного текста стилями CSS
Есть такое свойство в CSS – font-weight . Оно принимает много значений: font-weight:bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900 . Чтобы сделать текст самым жирным, нужно использовать значение font-weight: 900 . О нем мы еще поговорим в следующих уроках.
Замена курсивного текста стилями CSS
В CSS есть аналог тегу (Курсивный текст). Это свойство font-style . Далее пример:
Замена подчеркнутого текста стилями CSS
Тег осуждается спецификацией HTML и рекомендуется использовать стили. Аналогом может служить свойство text-decoration . Я обычно его использую, чтобы убрать подчеркивание у ссылок (значение none), но в этом случае нам нужно добавить подчеркивание (значение underline). Далее пример:
Если социальная сеть, платформа для блогов или форум предоставляют возможность размечать текст при помощи 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):
Подчеркнуть всё пунктиром:
Подчеркнуть всё почти сплошной линией:
2. Оформление выделенного текста в любом активном текстовом поле
Код усложняется, потому что мы пытаемся оформить только выделенный участок, восстановить точку фокуса и позицию прокрутки (тестировалось только в последнем Firefox, но по идее должно работать и в других браузерах последних версий):
Можете сохранить букмарклеты cо следующим кодом у себя в закладках:
Подчеркнуть выделенное пунктиром:
Подчеркнуть выделенное почти сплошной линией:
VI. Подводные камни
Нужно учитывать, что данный метод влечёт за собой некоторые рискованные последствия.
1. Слова, оформленные таким образом, могут не находится ни сетевым поиском, ни поиском по странице. Также они может создавать проблемы при разных автоматических обработках текста и проверке орфографии.
2. Если используется основной шрифт, в котором нет нужных символов, возможны уродливые глюки разной степени нечитабельности.
3. Некоторые версии браузеров вообще отказываются видеть в этих символах нужные знаки Юникода. Возможны глюки как на стадии создания первоначального текста, так и при перепостах и цитировании.
wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали авторы-волонтеры.
Устаревший метод подчеркивания в HTML заключается в использовании тегов , но теперь используется современный метод на основе CSS. Подчеркивание считается плохим способом привлечь внимание к тексту, потому что подчеркнутый текст легко спутать со ссылкой.
- Если добавить это свойство, вам не придется менять код в будущем, когда старые теги выйдут из обращения.
Используйте тег , чтобы подчеркнуть определенный фрагмент текста. Введите открывающий тег вместе со свойством «text-decoration» перед текстом, который нужно подчеркнуть. В конце текста введите закрывающий тег . [1] X Источник информации
Укажите HTML-элементы в разделе , чтобы упростить подчеркивание. Также это можно сделать с помощью таблицы стилей CSS. Например, чтобы подчеркнуть все заголовки уровня 3, добавьте следующий код в раздел «style»:
Создайте класс CSS, чтобы быстро подчеркивать текст. В таблице стилей или разделе можно создать классы, чтобы вызвать их позже. Классу можно присвоить любое имя.
Подумайте о других способах выделения текста. Рекомендуем избегать подчеркивания, чтобы не запутать пользователей. Лучше применить тег , чтобы выделить текст курсивом. Используйте CSS, чтобы добавить к этому тегу другие параметры стиля.
Избегайте использования старых тегов . Они устарели — это означает, что эти теги все еще работают, но ими стараются не пользоваться или не рекомендуют применять. Это связано с тем, что HTML не предназначен для настройки стиля контента. Тег все еще работает, но должен представлять текст, отличный от другого текста, например, слов с ошибками или китайских имен собственных.
Используйте теги , чтобы подчеркивать элементы (только для демонстрации). Практически нет ни одного случая, когда необходимо использовать эти теги. Возможно, вам придется редактировать старый сайт, поэтому лучше быть в курсе, что представляют собой указанные теги.
Современные браузеры позволяют выделять текст посимвольно, построчно или целиком, а затем копировать в буфер обмена. Результаты такого копирования можно затем помещать в формы ввода на других страницах, а также в документы, обрабатываемые текстовыми редакторами.
- Как выделить текст на сайте
- Как выделить ссылку
- Как выделить текст с помощью клавиатуры
Во всех браузерах для настольных компьютерах выделение текста осуществляется одинаково. Чтобы выделить фрагмент, используйте мышь. Подведите стрелку к началу фрагмента, нажмите левую кнопку, а затем, удерживая эту кнопку, ведите стрелку к концу фрагмента. Признаком того, что символы выделены, будет являться изменение цвета фона вокруг них, а иногда и их самих. Цвета, в которые они будут окрашиваться, зависят от настроек графического интерфейса операционной системы.
Можно также выделить сразу весь текст на странице. Для этого нажмите на клавиатуре сочетание клавиш Ctrl-A (буква A латинская) либо выберите в меню пункт «Правка» - «Выделить все» (он может также называться «Выбрать все»). В поле ввода текст можно выделять, подведя курсор к началу фрагмента, нажав Shift, а затем, удерживая его, клавишами со стрелками переведя курсор к концу фрагмента и отпустив Shift. В таких полях также можно использовать указанное выше сочетание клавиш Ctrl-A.
В мобильных телефонах выделение текста осуществляется несколько иным способом. В некоторых платформах, например, Series 40, оно не предусмотрено вообще. В Series 60 выделять текст можно только в поле ввода. Для этого подведите курсор к началу фрагмента, а затем выделите его способом, указанным выше, с той лишь разницей, что вместо клавиши Shift придется использовать кнопку с изображением карандаша. У некоторых смартфоров на платформе Series 60 имеются алфавитные клавиатуры. Такие аппараты снабжены двумя клавишами со стрелками, направленными вверх - они являются аналогами клавиш Shift на клавиатурах компьютеров. Если у телефона имеется и клавиша Ctrl, ее можно использовать для ввода сочетания Ctrl-A.
Выделение фрагментов текста не в поле ввода, а на странице можно осуществлять только средствами сторонних браузеров, например, новых версий UC и Opera Mini. В первом используйте для этого пункт меню «Инструменты» - «Копировать» - «Свободно коп.», а во втором - нажмите клавишу 1, а затем для указания начала и конца фрагмента руководствуйтесь подсказками, которые будут появляться на экране телефона. В обоих случаях выделенный фрагмент можно будет сразу поместить в буфер обмена (если речь идет о Java-приложении, то это будет буфер самой программы, а не телефона).
Во всех остальных случаях, как на компьютере, так и на телефоне, выделенный текст следует скопировать в буфер вручную. Для этого при использовании компьютера либо смартфона с алфавитной клавиатурой нажмите Ctrl-C (буква C - также латинская). У аппарата на платформе Series 60 с цифровой клавиатурой нажмите кнопку с изображением карандаша, удерживайте ее, и через секунду в нижней части экрана появится подсказка. Нажмите ту подэкранную клавишу, над которой будет написано «Копировать». А для вставки фрагмента в редактор или поле ввода нажмите Ctrl-V либо клавишу с карандашом в сочетании с подэкранной клавишей, над которой будет написано «Вставить».
В HTML есть несколько тегов, которые помогают обратить внимание на текст — подчеркнуть, выделить его или акцентировать на чём-то внимание. У таких тегов есть стили по умолчанию, и к некоторым из них мы давно привыкли.
Например, мы знаем, что обычно все ссылки на сайте подчёркнуты, текст внутри тега никому не нужен перечёркнут, а всё, что находится внутри тега , выделено жёлтым цветом .
Отрывки текста с выделением по умолчанию
Но с помощью text-decoration текст можно даже подчеркнуть сверху (что? да!). Давайте разберёмся, как это сделать.
Свойство text-decoration
- line-through — зачёркивание посередине текста;
- overline — надчёркивание, над текстом;
- underline — подчёркивание, под текстом;
- none — не используется декор;
- inherit — наследуется.
Например, свойство для подчёркнутого текста записывается просто как
text-decoration — это сокращённая форма записи для набора CSS-свойств text-decoration-line , text-decoration-color , text-decoration-style и text-decoration-thickness . Перечисленные свойства используются для более тонкой настройки параметров подчёркивания.
text-decoration-line
text-decoration-line — отвечает за тип линии: подчёркнуто, перечёркнуто, без подчёркивания, подчёркивание над текстом, а не под ним.
text-decoration-line может принимать сразу несколько значений, например, text-decoration-line: underline line-through; . В этом случае у текста будет подчёркивание и зачёркивание.
text-decoration-color
text-decoration-color управляет цветом подчёркивания. По умолчанию он, то есть цвет подчёркивания, совпадает с цветом текста.
text-decoration-style
Стиль линии (сплошная, волнистая, точками, тире и другие) настраивается через CSS-свойство text-decoration-style .
text-decoration-thickness
text-decoration-thickness задаёт толщину линии.
5 пикселей — художественная условность :)
text-underline-offset
До недавнего времени внешним видом подчёркивания управляли только эти четыре CSS-свойства ( text-decoration-line , text-decoration-color , text-decoration-style и text-decoration-thickness ). Но были ситуации, когда перечисленных свойств было недостаточно. К примеру, нужно реализовать выделение активного пункта меню на сайте:
Активный пункт меню выделен нестандартным подчёркиванием
Если использовать только text-decoration , нужное подчёркивание не реализовать. Его, конечно, можно добавить за счёт нижней границы, стилизации через псевдоэлементы или другими странными методами.
Но всё упростилось с появлением text-underline-offset . Свойство устанавливает смещение подчёркивания от его исходного положения и используется в связке со свойством text-decoration .
У свойства text-underline-offset хорошая браузерная поддержка, оно работает в большинстве современных браузеров, кроме Firefox под Android.
Как работать в Фигме
Инструкция для начинающих.
Как узнать параметры нестандартного подчёркивания
Все параметры для подчёркивания будем доставать из макета в Figma.
Нам нужны два параметра — расстояние от текста до линии и толщина линии. Цвет подчёркивания обычно совпадает с цветом текста, поэтому специально искать этот параметр обычно не нужно.
Расстояние от текста до линии
Чтобы измерить расстояние между объектами, достаточно выбрать первый объект, нажать Alt/Option и навести на второй. Выделяем текстовый слой и с зажатой клавишей Alt/Option наводим курсор мыши на линию подчёркивания. В тултипе оранжевого цвета выводится количество пикселей между текстом и объектом, на который навели. В нашем случае — это значение 20 .
Запишем это значение в CSS-свойство text-underline-offset :
Толщина линии подчеркивания
Выделим объект с подчёркиванием. После этого на панели справа, на вкладке Inspect найдём свойства объекта. Нас интересует свойство Height (высота).
Свойство отображается и в разделе Properties, и в разделе Code. В примере толщина подчёркивания — 4 пикселя. Напомним, в CSS толщиной подчёркивания управляет свойство text-decoration-thickness . Допишем в правило определение толщины подчёркивания:
На этом всё — пробуйте, экспериментируйте и изучайте вёрстку, а мы вам в этом поможем.
Читайте также: