Как стать автором
Обновить

Комментарии 90

Я как представитель «даже Википедии» обещаю поправить, если сейчас ничего плохого в комментариях не скажут.
wow, это было бы неожиданное и приятное для меня последствие :-) посмотрим-посмотрим...

неужели у вас прав хватит? ;-)
Вообще, одну проблему возникающую при применении этого метода я могу уже сейчас описать: размер шрифта в этом случае не такой же как без использования стилей - он чуть больше. Отличить такой SUP от основного текст становится сложнее. Странно, но так.

Лечится, правда, несложно - явным уменьшением размера шрифта, как показано выше. Надеюсь только, в IE проценты сработают так же как и в остальных бра.
Пока что у меня получается так:
Царица Савская
странно конечно - явно вниз их клонит
может vertical-align:top; попробовать?

к сожалению протестировать сам не могу - страницы википедии сохраняются на мой HDD без стилей
Если вы зарегистрированы, можно тестировать прямо там. Заходите на http://ru.wikipedia.org/wiki/Special:Myp… и прописываете всё, что надо.
Правда, если браузер хорошо кэширует стили, то стоит обновлять http://ru.wikipedia.org/w/index.php? title=%D0%A3%D1%87%D0%B0%D1%81%D1%82%D0%BD%D0%B8%D0%BA:Имя/monobook.css&action=raw&ctype=text/css, где Имя — URL-кодированный вариант учётной записи (узнаётся в ссылке редактирования личной страницы). Потому как данный файл подгружается через @import.
вот шайтанский сайт! поправил себе этот кастом-цсс.

а я думал вы про всю википедию ... :)
Как только получим приемлемое решение, можно будет и для всей Википедии изменить. =)
Может подойдет такой вариант:
sup{
font-size:0.85em;
line-height:0;
vertical-align:middle;
position:relative;
top:-0.3em
}
У меня замена стилей у SUP никаких изменений не вызывает. monobook.css изменён.
я вставил туда такой текст

sup { vertical-align:text-top; font-size:65%; }

работает for me
Скопировал, вставил. SUP стал размером с обычный текст. Замена размера на 35%, к примеру, ничего не меняет. FF2.
Можете попробовать Firebug. И страницы никакие сохранять не надо. Один недостаток — проверяет только для Firefox
спасибо, у меня как раз он
Вертикальными алиджинами ровняем высоту строки, а сами блоки смещаем относительным позиционированием.

sup { vertical-align: text-top; position: relative; top: -0.2em; }
sub { vertical-align: text-bottom; position: relative; bottom: -0.2em; }

Нижние индексы вроде бы на строку не влияют, но для симметрии, думаю, им тоже надо явно задать стили.
НЛО прилетело и опубликовало эту надпись здесь
Да, действительно, сработало теперь и в Опере. Я на baseline не смотрел, так как размер у основного шрифта и над-(под-)строчного отличаются, но теперь вижу, что зря не смотрел. :) Добавил ваш вариант (А1) в тест.
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Ну если сравнивать с тем смещением, которое было без указания стилей, то вроде бы и много. Хотя так вроде бы читается легче. Пусть уже каждый по вкусу подбирает. :)
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Загнал вариант А1 в <div style='height: 80px; overflow: auto;'></div>
Скроллинг появился, глюков не наблюдаю. ИЕ6, дополнительных костылей не добавлял. (см. страницу с тестами)
НЛО прилетело и опубликовало эту надпись здесь
(только он элайн, а не "алиджин";)
Вариант A1 рулит! Выглядит точно как обычный суп, только лучше :-). И решение хорошее — приподнять над основной строкой.
Вообще, было бы неплохо таки уменьшить шрифт супа еще чуток
Эксплорер может попытаьтся «сгладить» его. Мерзкое зрелище.
В опере 9.5 работает только вариант A1, в остальных строки разьезжаются или на sup или на sub
Это было в Опере 9.26, а вот в IE 7 они действительно сверху, но какие-то очень маленькие.
Возможно опера не знает про text-top.

font-size можно варьировать. Хотя не факт что результат вам понравится ... выглядит всё-же отлично от стандартного варианта. может помочь увеличение высоты строки (line-height), но это было бы слишком большой жертвой.
приврал - размер шрифта тот же, но за счёт более низкой посадки различить что это superscript тяжело - "придётся" его уменьшать
В Википедии давно уже написано об этом, но только как персональный апгрейд. Не думаю, что попытка применить это для всех встретит одобрение.
да—это уж точно))))
Блин, а я то думал опять чето про ЖЖ.
А так - спасибо, бум знать.
Ха, та же фигня :-) Долго думал, что такое ужасное "суп" сделал на этот раз, пока грузился пост.
Если бы написали "HTML тэг <sup> рвёт тексты", то не было бы таких ассоциаций :)
по такой логике и «рвёт» требует замены, а «на такое я пойти не могу» :-))
да и '<' '>' в заголовках стираются
Это потому что надо писать HTML-мнемоники угловых скобок: «&lt;sup&gt;».

И да, это не тег, а элемент HTML.
Думаете я не писал? :-) Мир Хабрадвижок оказался сильней

моя вселенная рушится… почему он не тег?!
Не суть важно. :) Тег — это часть элемента HTML. Элемент состоит из содержимого, помещённого внутрь открывающего и закрывающего тегов. Так вот, рвёт тексты не тег, а элемент. Но это так, чисто терминологически. :)
предпочитаю понимать о чём говорю и думаю. спасибо. довольно пребывать во мраке! вытащим всё на свет! ... это я себе :)
Опередили вы меня =)
А размер шрифта 65% не слишком маленький?
Настраивается по вкусу. К сожалению указать размер шрифта придётся - при применении стиля к SUPу размер шрифта загадочным образом увеличивается и отличить его от текста становится проблематично.
НЛО прилетело и опубликовало эту надпись здесь
по-моему и Хабр относится к этому большинство. (Видно по двум абзацам топика: там где "Википедия" с индексом - интервал увеличен)
Не припоминаю вообще чтобы кто-то это использовал. Понятно что "хорошее не замечается, пока не встретится плохое", но и я за этой проблемой достаточно давно слежу :-)
А я на злободневной волне совсем про другой суп поначалу подумал :)
от супа и не такого можно ожидать!

:-D
Суп рвет мозг очумевшим ЖЖ-шникам... )
в жж уже исправили или я чтот непонял? =Р
у меня вообще везде все базовые настройки (FF2) и такие разрывы только перед строчкой где вставлен жж-юзер(голова синяя ^__^)
кстати да, уродский разрыв по жизни бесит. только править сложнее — картинка
НЛО прилетело и опубликовало эту надпись здесь
О, это даже лучше, чем я выше предложил с относительными выравниваниями.
Разрыв уменьшился, но не исчез полность. В википедии размер разрыва стал всего 1 px. На хабре — 2px. Opera 9.5b2
Нет, всё-таки это не то. Ваш вариант действует на SUB, но не на SUP. Вот набросал тест: http://apostolstudio.com/files/suptest.h…
Мой вариант (А) работает во всех браузерах (в опере только SUB как-то наполовину сработал, но и то лучше, чем другие способы). Вариант (С), который озвучен автором поста, — расчитан только на SUP, и неестественно уменьшает шрифт.
sup/sub рвёт тексты, высота строки где присутствует SUP увеличивается и в результате нам предстают хаотично разбросанные строки, а не параграф

Вариант A1 (лучшее решение)
.a1 sup { vertical-align: baseline; position: relative; top: -0.4em; }
.a1 sub { vertical-align: baseline; position: relative; bottom: -0.4em; }
Как-нибудь понадобится - найду :)
НЛО прилетело и опубликовало эту надпись здесь
Присоединяюсь.
присоединился тоже ;)
ваше метод подвержен "разрывам", при line-height меньше normal(1.2em)
считаю более правельным, вот так "неразрываемый" стиль:
sup, sub
{ font-size:75%; vertical-align:middle; position:relative; }
в догонку, забыл: (:
sup { bottom:0.5em; }
sub { top:0.5em; }
НЛО прилетело и опубликовало эту надпись здесь
Мне кажется, что всё-таки baseline. Там выравниваются базовые линии, а у middle — базовая линия и средняя по вертикали.
НЛО прилетело и опубликовало эту надпись здесь
Спасибо, часто о таком не задумываешься, а тут уже готовое решение. Внесу в свой начальный шаблон для Drupal ;)
Насчёт Lorem ipsum загляните в Ководство :)
НЛО прилетело и опубликовало эту надпись здесь
тоже верно. редко когда бывает сносок больше четырёх (или сколько там). но википедию я бы приукрасил :-) ибо часто пользуюсь
таки нет, но щас наверстаю :)
Спасибо за идею.
НЛО прилетело и опубликовало эту надпись здесь
Кстати говоря,
кстати говоря,
смайлики рвут текст
не меньше
не меньше
не меньше О_О
смайлики должны в большинстве случаев гореть в аду.
по заголовку в ридере сперва подумал, что опять про ЖЖ и предводителя мирового зла Носика :)
line-height:0 не спасает?
не знаю, может и спасает, но а) выглядит как хак, б) маленький line-height — это немодно :-), борцы за читаемость текстов его как раз увеличивают
1) выглядит это нормально))) Это валидный код. 2) line-height для текста маленький не ставят.а тут дело про sup и sub текст и он нормально читаемый.
(ага.. я подумал о высоте строки всего текста)

Вообще выглядит впечатляюще: минимум усилий, минимум хаков.

Выше уже было похожее предложение: sup { line-height:1em; } но какое-то оно не очень рабочее o_O. А нолик работает.

Looks good!

sup { line-height: 0; }
в FF всё хорошо, но в IE разваливается — см. 2й вариант: http://zencd.spb.ru/tmp/sup.html
vertical-align:text-top - к сожалению надо добавить для супа и bottom для суба.
Нолик работает и вообще лучше использовать Unitless line-heights Статья старая, но 0 уже проходит валидацию.
Воспользовался вашим советом и переформатировал у себя малость тэги sup, чтобы обозначать в заголовках материалов количество комментариев. Т.е. чтобы выглядело примерно так:
.
В W3C compliant браузерах (Opera, FF, Safari) оно у меня так и выглядит. А вот IE6 лажает. Выводит вот что:

Код HTML такой:


<div class="ListTitle"><a href="/2008/03/27/another-one-test-story">Another one test story</a><sup class="CommentCount"><a href="/2008/03/27/another-one-test-story#comments">1</a></sup></div>
<div class="Byline">Mar 27 by admin</div>


А код CSS выглядит так:

.sup{ font-size:0.6em; vertical-align: baseline; position: relative; top: -0.4em; }
.sup { font-size:0.6em; vertical-align: baseline; position: relative; bottom: -0.4em; }


Ну и что, спрашивается, я неправильно делаю?
тут нужно или точку убрать:

sup { … }

или так:

sup.CommentCount { … }
Спасибо огромное за пост!

>putnik 26 марта 2008, в 00:48 написал: «Я как представитель «даже Википедии» обещаю поправить, если сейчас ничего плохого в комментариях не скажут. »
Не могу удержаться… ХУЙ!
Зарегистрируйтесь на Хабре , чтобы оставить комментарий

Публикации

Истории