В поисках вдохновения на просторах англоязычного интернета, я наткнулся на очень интересную статью о «Десяти грехах в веб-типографике». Полностью вы сможете прочитать ее по ссылке, я лишь расскажу о грехе № 7, связанном с подчеркиванием ссылок.
Мы привыкли подчеркивать гипертекст при помощи «text-decoration: underline», но автор (и я) предлагает использовать другой стиль, а именно «border-bottom: solid 1px #цвета». То есть, мы просто берем и проводим под ссылкой нижнюю сплошную границу толщиной в 1 пиксель, того цвета, которого должна быть ссылка. Этот метод создает подчеркивание под словом, а не сквозь него.
Вот пример для большой-большой ссылки:
А вот как это будет смотреться в тексте:
Сергей обожал заниматься сурдопереводом одинокими вечерами. Этому его научила мама.
Видно, что нестандартный вариант делает слово-ссылку гораздо более читабельным, заметным и эстетически красивым. На этом сайте я использую именно этот метод. Также, подобное подчеркивание можно с легкостью сделать пунктирным, точечным или даже двойным.
Побочные эффекты
Не бывает, чтобы все хорошо. В отличие от «text-underline», наш метод влияет также на картинки и любые другие объекты, подчеркивая их направо и налево. Чтобы этого не происходило, надо заранее подумать, где будет использован тег «a» и при каких обстоятельствах. В случаях, когда мне надо сделать картинку ссылкой, я присваиваю последней специальный класс, в котором записан стиль «border-style: none». ■
Комментарии:
MaxL_uCoz
Круть - и вправду так лучше выглядит
Пока новый блог с новыми темами (ты же обещал поменяться) мне нравиться :-)
abasovMike
Спасибо.
Эти 2 поста ждали своего часа в Google Docs последние 2 месяца
Shutich
Статья полезная
D1m0n
Периодически тоже пользуюсь таким методом. У меня какая то особенная любовь к пунктирному подчеркиванию.
Одна беда - IE6 не всегда отображает подчеркивание.
abasovMike
У меня принцип простой:
Для ссылок, которые уводят со страницы — сплошные.
Для ссылок, которые запускают какой-то сценарий, но никуда не уводят — пунктирные.
ruby
Опять же на любителя. Это не стндарт, это не догмат, это кому как нравиться
abasovMike
В этом блоге я пишу так, как делаю я. К тому же я сторонник добрых мирных холиваров в комментариях
-TERNOX-
Интересная статья.
p.s. комментарии классные теперь.
Maksim Rusak
А мне по душе underline, объясню почему. Всё, что есть в веб-типографике перекочевало сначала из книжной типографики, а в ту из каллиграфии. ручную я вряд ли буду подчёркивать слово, проводя линию по нижней части хвостового элемента, проведу на пару миллиметров ниже базовой линии.
И потом, при изменении размеров шрифта самим пользователем будет меняться и подчёркивание, а вот bottom не будет.
Всё, конечно же, ИМХО
abasovMike
Да, конечно. Но тут также есть и различия. D каллиграфии нет гипертекста, и в целом подчеркивание не является обычным способом выделения (разве что на уроках русского языка). А вот в вебе текст может пестреть ссылками и следует задуматься о том, насколько удобно пользователю читать их на лету. Чем меньше шрифт — тем больше проблем с underline.
OnMusic
Круто, спасибо,
almlex
Логичней не использовать цвет бордера вовсе. Тогда он примет цвет текста.
Кстати, полностью согласен с Максимом.
Newman
можно сделать, чтоб при наведении на ссылку подчеркивания не было, и не возникнет проблемы с читабельностью...
abasovMike
Мы ведь наводим на ссылку не глазами. А читаем ими. Следовательно в момент чтения подчеркивание никуда деваться не будет. С другой стороны, на этом сайте я не подчеркиваю ссылки в пассивном состоянии. Это — тоже способ.
Матвей
Да.Вы абсолютно правы. Мне вот очень не нравится когда ссылка подчеркивается прямо под текстом касаясь, а иногда даже налезает на него
Lora
По моему оба способа ничего. Еще можно вообще без подчёркивания, наводишь на текст с ссылкой, а он цвет меняет.