Правильный способ брать ссылки в кавычки
Бывает так, что нужно поставить ссылку на что-то, что пишется в кавычках:
Некоторых ребят учили (а некоторые сами догадались), что подчёркнутые кавычки — это уродство. Поэтому делать ссылкой стали лишь то, что в кавычках:
Но и с точки зрения смысла, и с точки зрения следствий закона Фиттса кавычки должны быть частью ссылки: они относятся к тем словам, которые в них заключены значительно в большей степени, чем к окружающему тексту, и попасть в ссылку тем проще, чем большего она размера.
Поэтому ссылкой нужно делать слова вместе с кавычками, а подчёркивать при этом никто не запрещает только то, что внутри:
Естественно, на моём новом сайте сделано именно так.
А текущая страница еще не является новым сайтом? :)
см.
Зарабатывайте реальные деньги на своём блоге, зарегистрировавшись в «Сапе»!
Ещё у меня есть мусороблог под названием «Вотсоуэвер».
e2 пока так не умеет делать автоматически, но научится.
Тогда логичнее было сначала научить, а потом постить ;)
Если уж так для подчёркивания: <a><u>link</u></a>
…то почему не так <font color=«#0000a0»><a><u>link</u></a></font> для цвета каждой ссылки?
Пробую иначе:
Если уж так для подчёркивания: <a><u>link</u></a>
…то почему не так <font color=«#0000a0»><a><u>link</u></a></font> для цвета каждой ссылки?
Отличная идея!
И волки целы, и овцы сыты. Идея что надо!
Я просветлён.
Красивое решение, спасибо!
Просто и со вкусом.
Вот бы красиво это всё сверстать.
У меня свёрстано красиво.
Присоединяюсь.
Спасибо Илья, рассудил.
[turn занудство on]
Поддерживаю Александра и Вадима. Хотя, конечно, «красиво» — понятие субъективное и растяжимое, всё же подчёркивать или не подчёркивать кавычки — дело отображения, а не содержания. Если бы можно было просто в css прописать, что, мол, <a>«Бла-бла-бла»</a> отображается так как нам надо, то вот это, на мой взгляд, было бы красиво, т. е. отвечало бы принципу мух и котлет.
С другой стороны, может быть, вариант <a>«<u>Бла-бла-бла</u>»</a> — наиболее красивый из доступных сейчас. Это делает его самым красивым, но отнюдь не красивым. :)
[turn занудство off]
А вообще круто!
Илья, с кавычками проблема чаще возникает несколько другая, когда по смыслу в ссылку нужно заключить несколько слов, включая слово в кавычках. Далеко ходить не надо, достаточно посмотреть на главную Ленты.ру. Сергей Чемезов <начало_ссылки>отказался входить в совет директоров «Норникеля»<конец_ссылки>. Или, например, портфолио какой-нибудь фирмы: Закончена разработка <ссылка>интерфейса «Трансгидрофокатора»</конец>.
Ну можно и более красиво, на мой взгляд, совмещать кавычки и ссылки. Только способ будет работать только в браузерах, для IE придется подставлять костыли.
<q class=«link»><a href=«#»>Текст ссылки</a></q>
Костыли — это ведь так красиво, ага.
Да вообще глупо отказываться от хороших решений только потому, что их не понимает старый браузер. А если его можно этому научить — то тем более.
Сейчас подумалось, что было бы красивее вставлять <u>...</u> через JavaScript. Тогда по крайней мере на стороне сервера сохранится принцип мухи-котлеты. Хотя это уже мелочи конечно же.
слишком сложно.
и, следуя вашей логике, скобки, содержащие ссылку, следует тоже делать частью ссылки?
это же бред.
Я могу ошибаться, но, кажется, кавычки в таких ссылках проблематично сделать висячими.
А вот такая простая вёрстка.
a { text-decoration: none; border-bottom: 1px solid; }
a:before { content: ’«’; border-bottom: 1px solid white; }
a:after { content: ’»’; border-bottom: 1px solid white; }
Читайте <a href=«#»>Капитанскую дочку</a> штоле!
Сам сабж мне нравится — этот вариант выглядит наиболее органично. А чёрные или подчёркнутые кавычки левые какие-то. Сейчас это уже кажется очевидным :-)
Из минусов: адепты церкви шестого осла кавычек не увидят (и фиг с ними) и border в качестве underline выглядит менее красиво.
Такая ссылка выглядит некрасиво в RSS — кавычки получаются тоже подчёркнутыми.
В пути за Артемием?
Неплохая идея. Буду юзать ;-)
@Павел Власов:
К сожалению псевдотеги before и after не поддерживает IE, вполоть до 8-й версии. Попробовал такой хак:
a{zoom:1;behavior:expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = ’<span style=«border-bottom: 1px solid white»>«</span>’ + this.innerHTML + ’<span style=»border-bottom: 1px solid white«>»</span>’) : ’’);}
Кавычки отображает, но подчеркивает. Не знаете как исправить?
Александр, для подчеркивания текста лучше использовать не border-bottom, а text-decoration:
style=«text-decoration: none;»
@Волька:
Текст подчеркивает underline, а none как раз используется. См. вариант Павла Власова.
Я делал и так:
a { text-decoration: none; border-bottom: 1px solid; }
a:before { content: ’\00AB’; text-decoration: none; }
a:after { content: ’\00BB’; text-decoration: none; }
a{zoom:1;behavior:expression(!this.isInserted«»==«»true ? this.isInserted=(this.innerHTML = ’<span style=«text-decoration: none»>«</span>’ + this.innerHTML + ’<span style=»border-bottom: 1px solid white«>»</span>’) : ’’);}
... и так:
a { text-decoration: underline }
a:before { content: ’\00AB’; text-decoration: none; }
a:after { content: ’\00BB’; text-decoration: none; }
a{zoom:1;behavior:expression(!this.isInserted«»==«»true ? this.isInserted=(this.innerHTML = ’<span style=«text-decoration: none»>«</span>’ + this.innerHTML + ’<span style=»text-decoration: none«>»</span>’) : ’’);}
И еще много как. Не работатет. У кого есть вариант для всех броузеров?
Ребята, ку-ку!
У меня есть вариант для всех браузеров!
Такая реализация: <a href=«#» class=«nounderline»><u>Текст_ссылки-начало</u> «<u>текст_ссылки в кавычках</u>»<u> текст_ссылки конец</u>...</a> лично мне, не очень нравится. Гораздо удобнее кажется такой подход: <a href=«#» class=«u»>Текст_ссылки-начало <span>«</span class=»nounderline«>текст_ссылки в кавычках<span class=»nounderline«>» </span>текст_ссылки конец<span class=«nounderline»>...</span></a>.
Хотя, если текст обрабатывает автотипограф, то его можно натаскать и на первый и на второй подход.
Подход с after и before мне понравился (текст не виден и не индексируется поисковиками). Но погуглив решения на CSS для IE я не нашел. Решение на Яве из #26 сообщения работает. Со стилями разберемся.
Следствием закона Фиттса является конструкция <a>Читайте «Капитанскую Дочку»</a>, так что это не аргумент.
Возможное восприятие предложенного варианта мозгом человека:
Но если нужно ссылкой сделать всю фразу, например <a>Читайте «Капитанскую дочку»</a> — кавычки по-любому придется подчеркнуть.
Не согласен.
Дмитрий Кадыков, неправильно делать ссылкой так, как вы предлагаете. Правильно делать ссылкой именно «Капитанскую дочку».
Я тоже не согласен. У вас сверстано безграмотно, и то, что это работает во всех браузерах, включая морально и технически устаревший ИЕ 6, никак не аргумент в пользу этого метода.
Изложение своего мнения относительно (приписываемых вами мне) аргументов само по себе не имеет никакой ценности. Доводы оппонента в споре нужно не оценивать, а либо опровергать, либо принимать.
Забавно, что свои, предположительно крайне важные и неоспоримые критерии красивой вёрстки, вы предпочли сохранить в тайне.
А про валидную верстку вы, видимо, вообще не слышали. http://validator.w3.org/check?uri=http://ilyabirman.ru
Вы используете слово «видимо» не по назначению, а также берётесь делать выводы о знаниях собеседниках на основании своих крайне скудных представлений о возможной области применений этих знаний. Например, вы слышали о валидной вёрстке, и из самого этого факта делаете вывод о её необходимости. Между тем, отсутствие связи между первым и вторым очевидно любому вменяемому и адекватному человеку.
Валидную вёрстку я в гробу видал. На этой планете живёт около 6,5 миллардов человек, и ни одному из них она не нужна. Настолько очевидно лишённому всякого смысла занятию я посвещать своё время не готов.
!!Доводы оппонента в споре нужно не оценивать, а либо опровергать, либо принимать.!!
Я не оценивал. Я написал, что это «никак не аргумент», то есть отверг. Еще аргументов в пользу вашего метода не вижу. Против же него приведу, чтобы вы не говорили, что свои критерии я сохраняю в тайне.
Так вот, критерий следующий: HTML — это язык разметки гипертекста. Разметки. А не раскраски, утолщения или подчеркивания. То, что HTML позволяет использовать теги <font>, <u> и им подобные, не означает, что использовать их грамотно. Потому что это нарушает логику разметки и представления.
!!Вы используете слово «видимо» не по назначению!!
Это почему же?
!!берётесь делать выводы о знаниях собеседниках на основании своих крайне скудных представлений о возможной области применений этих знаний!!
Не понял, что вы хотите сказать этой фразой.
!!Например, вы слышали о валидной вёрстке, и из самого этого факта делаете вывод о её необходимости.!!
Ну не только слышал, я ее делаю даже. А необходимость не зависит от того, слышал я о ней или нет. Вообще-то, строго говоря, о необходимости я ничего не говорил. Не нужно додумывать за меня, хорошо?
!!Валидную вёрстку я в гробу видал.!!
Ваше право.
!!Настолько очевидно лишённому всякого смысла занятию я посвещать своё время не готов.!!
Сказать, что валидирование верстки является «лишенным всякого смысла занятием» может только человек, который не имеет понятия о том, зачем нужна валидация.
P.S. У вас можно здесь цитирование по-человечески делать, есть тег или бб-код?
Андрей, вы демонстируете как неумеение слушать, так и неумение спорить.
Сама манера, когда вы берётесь ответить на каждую фразу отдельно, не вникая в её смысл, но стремясь во что бы то ни стало её прокомментировать, свидетельствует о вашей крайне низкой способности улавливать суть разговора и цивилизованно участвовать в нём.
Давайте попробуем ещё раз: вы прочитаете, что я вам написал, и, если у вас будет что ответить, вы ответите. Комментарии, представляющие собой цитаты с подстрочными замечаниями, я буду удалять; найдите в себе силы внятно сформулировать свои взгляды, не обращаясь к сказанному мною.
Илья, по-моему, вы отходите от темы и начинаете переходить на личности. В вашем ответе я не увидел ни одного слова по поводу верстки — с чего мы, собственно, начали разговор, зато вижу критику моей манеры общения. На мой взгляд, это свидетельствует о том, что у вас просто нет других аргументов.
Впрочем, если вы предлагаете попробовать еще раз, то давайте попробуем. Вы утверждаете, что у вас сверстано красиво, я же утверждаю обратное и аргументирую это тем, что ваш способ нарушает логику разметки и представления. Это разные вещи.
Небольшое экскурс в историю HTML. Язык HTML был создан в начале 90-ых годов Бернерсом-Ли на основе SGML, который, в свою очередь, произошел от GML. Так вот, еще GML был создан таким образом, что смысловое значение элемента документа отделялось от внешнего вида. Логика документа (разметка) — это обязательная часть документа, а внешний вид должен был контролироваться с помощью внешних файлов стилей.
Но, бурное развитие интернета в середине 90-ых годов привело к тому, что средств HTML 2.0 стало не хватать. Тогда Майкрософт и Нетскейп начали добавлять в свои браузеры так называемые «расширения» языка HTML, не понимая или не желая понимать, в чем разница между логикой и представлением. Часть нововведений нашла свое отражение в HTML 3.2. Например, это атрибуты background, color и теги <font>.
В 1996 W3C утвердила спецификацию CSS — таблиц стилей, призванную прекратить бардак и вернуть HTML его первоначальное назначение — определять смысл элементов документа, а не их внешний вид. Однако, время «браузерных войн» и эпоха HTML 3.2 наложила свой отпечаток как на движки браузеров, вынужденные поддерживать «расширения» HTML, так и на умы веб-мастеров, привыкших смешивать воедино логику и представление.
Чем вы, Илья, и занимаетесь.
Андрей, я всю эту историю — только с несколько большими подробностями и примерами — рассказываю студентам в университете. Ваша позиция состоит в том, что вы считаете, будто знаете что-то, чего я не знаю. Ваша самоуверенность ни на чём не основана: вам никак не приходит в голову, что если я что-то знаю, то из этого автоматически не следует, что я этому должен придавать такое же значение, как и вы; делать те же выводы что и вы.
Я как могу пытаюсь донести до вас эту мысль, но до вас всё не доходит.
В вашей голове царит невероятная каша из понятий. Валидный код имеет весьма условное отношение к разделению разметки и оформления. Кроме того, польза такого разделения очевидна далеко не всегда. В веб-дизайне не существует задачи «сделать валидный сайт» или «сделать сайт, в коде которого оформление было бы отделено от разметки». Вообще ровным счётом никого не волнует, какой язык из какого вырос и для чего создавался — это просто некий материал для вводной лекции по веб-дизайну, не более того. Сотовый телефон вот создавался, чтобы звонить, а сегодня на нём играют в ходилки-стрелялки. Мало ли?
Вы не привели ни одного примера из реальной жизни, где валидный код имел бы преимущества над более простым и коротким. Вы упоминаете знаменитый своей бессмысленностью тег так, как будто бы я его использовал хотя бы в одном месте хоть на одном своём сайте. Может быть, вы перестанете заниматься ерундой, и возьмётесь на настоящем примере показать силу вашей позиции? Обосрать тег — много ума не надо; только вот это к нашему спору отношения не имеет.
Кстати, вы ни разу не упомянули ХТМЛ 5 — первый случай в истории веб-стандартизации, когда за дело взялись трезвые люди с чистыми мозгами. Логика, идеи и ценности создателей ХТМЛ 5 мне намного ближе, чем ваши.
Ну и спор развязался.
Цель валидатора в большинстве случаев — навести порядок в коде, на который будет потом приятно смотреть. Не будет нелепых ошибок: незакрытых тегов, повторяющихся айди и т. д.
А иногда фигню говорит. Например, input type=«search» он не любит, или лэйблы надо в блочный элемент засовывать.
Илья, то, что вы знаете эту историю, говорит отнюдь не в вашу пользу. Одно дело, когда человек чего-то не знает, и потому совершает ошибки — это простительно. Но когда человек сознательно «не придает значения и не делает выводов» — это уже совсем другое дело.
Каши в голове у меня нет. Каша есть в коде созданных вами страниц. Я ни в одном своем комментарии не сказал, что валидный код напрямую связан с проблемой разделения разметки и оформления, это вы опять за меня додумали. Про валидность я вообще написал отдельный комментарий.
Впрочем, я отошел от темы. Когда вы говорите, что в веб-дизайне не существует задачи «сделать валидный сайт», вы очень неправы. Ваше утверждение равносильно утверждению «главное, чтобы сайт работал, а остальное не важно (не важно, какой движок, какая верстка и т. д.)». А это все равно что говорить, что в автопроме не существует задачи «сделать автомобиль, который ездит».
А по поводу валидного кода, вы вообще-то должны знать, зачем он нужен. А нужен он для того, чтобы гарантировать одинаковое отображение страницы во всех браузерах (ИЕ, разумеется, браузером не считается). Сейчас все идет к тому, чтобы однозначно стандартизировать HTML и CSS, и уже довольно скоро наступит время, когда не будет такого понятия, как «отладка верстки под браузер». Не будет для тех, кто будет верстать по стандартам. Если же вы «в гробу видали валидную верстку», то есть, попросту говоря, плевать хотели на мнение и рекомендации людей, создавших и развивающих HTML и CSS, то вы точно так нелепы, как водитель, который скажет, что он в гробу видал правила дорожного движения. А что, дорога есть — еду, как хочу. В браузере страница показывается — верстаю, как хочу.
Андрей, вы очень смешной :-) Жертва маркетологов-сектантов, пропагандирующих лишённые смысла ценности. Примера из жизни вам что-то так и не удалось привести — оно и понятно, примеров из жизни не существует в природе.
Думаю, вы занимаетесь веб-разработкой не очень долго, года 2-3 отсилы, а может и того меньше.
Покажите какой-нибудь сайт, который вы сделали? Чтобы валидацию проходил.
Ваши слова: «с точки зрения следствий закона Фиттса кавычки должны быть частью ссылки.» Правила набора кавычек слитно с обрамляемым текстом достаточно, чтобы утверждать, что кавычки — часть внутреннего текста (но не ссылки). Чтобы сделать их частью ссылки, достаточно включить их в область, на которую может нажать пользователь (закатать в <a>). Кавычки под цвет ссылок без подчеркивания первым названным свойством могут ввести в заблуждение любого пользователя тем, что они — часть ссылки, а вторым — что не являются. Результат: кавычки под цвет ссылки ухудшили информативность фрагмента текста с ссылкой.
По-простому: ваше правило — ни два, ни полтора, формальное умножение 0,(3)×3, в котором получается несуществующая условность 0,(9), красиво и бесполезно. Часто, цвет ссылок гармонирует с цветом окружающего текста, поэтому ради красоты менять цвет кавычек нет серьезной необходимости — достаточно оставить как есть. Есть такие великие слова из которых всё ясно: «простота — необходимое условие прекрасного.» Мне интересно читать этот блог и наблюдать за вашими рассуждениями, но в этом посте вы написали правило, которое стоит придержать просто как идею.
Над тем, что вы говорите про цвета, действительно, стоит ещё поразмыслить :-) Спасибо.
Илья, вы не ответили ни на один мой аргумент. Единственное, что вы можете — это переходить на личности, обсуждать мою манеру общения и делать догадке о моем опыте. У меня создалось впечатление, что вам нечего ответить и вы спорите только из принципа. Продолжение дискуссии в подобном тоне считаю бессмысленным.
Конструкция:
<a href=«music-player/» class=«nou»>«<u>Проигрыватель</u>»</a>
…ужасна. Можно взять кавычки в <span>, я так и сделал (да-да, я попробовал так на своем сайте и забросил эту идею), но разница в цвете для посещенных ссылок может стать проблемой.
Нарушать стандарты можно, если разработчик возьмет на себя ответственность за возможно неработающий сайт. Я считаю, что разработчикам браузеров надо написать в задании: «требуется разработка браузера под существующие стандарты.» Никак не верстальщикам, даже если клиент знает, что такое кроссбраузерность. Клиентоориентированности нет (смотрите Лебедева), не нужно слишком уж о них заботиться.
«Валидную вёрстку я в гробу видал.» Я тоже, если считать, что IE6 — это гроб. Правильная верстка там выглядит действительно неважно. Стремиться к корректной верстке — должно быть верным ориентиром для хорошего верстальщика; ну что вам стоит прописать доктайп и поставить «/» перед закрытием непарного тега, Илья? Андрей, кстати, — программист, а не жертва маркетологов, техническая сторона ему важна, может, поэтому слишком надавил в этом вопросе.
Вы жонглируете какими-то словами, и мне не удаётся уловить, какой же за ними скрывается смысл.
Естественно, разработчик возьмёт на себя ответственность за неработающий сайт, причём стандарты или их отсутствие вообще к этому не имеют никакого отношения. Просто никому не нужны безответственные разработчики, как, впрочем, и строители или врачи.
Утверждения о том, что что-то «ужасно», что-то «надо писать», чего-то «нет», а что-то «должно быть верным ориентиром» вы не подтверждаете ни рассуждениями, ни фактами. Ваша точка зрения при таком уровне её поддержки — вами же — ничего не стоит.
Про непарные теги к чему вы пишете? Мне ничего не стоит их закрывать; более того, я всегда это делаю и этому же и учу. Но вот только ваши любимые стандарты этого в массе своей вовсе не требуют. А доктайп — это хак (по факту). Пока мне удаётся и без хаков неплохо верстать.
Моя точка зрения «при таком уровне её поддержки» ничего не стоит. Про непарные теги вы правы.
Не очень удачная идея, Евгений. Получается, что мы создаем активную область, но не информируем пользователя об этом (маскируем ссылку под текст). Это может доставить пусть и мелкие, но неприятности. Все же вариант с исключением кавычек из ссылки самый оптимальный по трудозатратам и производимому эффекту. Собственно, привет от Монтескье (http://ilyabirman.ru/meanwhile/2003/04/25/2/) :-)