Comments 90
Я как представитель «даже Википедии» обещаю поправить, если сейчас ничего плохого в комментариях не скажут.
+20
wow, это было бы неожиданное и приятное для меня последствие :-) посмотрим-посмотрим...
неужели у вас прав хватит? ;-)
неужели у вас прав хватит? ;-)
0
Вообще, одну проблему возникающую при применении этого метода я могу уже сейчас описать: размер шрифта в этом случае не такой же как без использования стилей - он чуть больше. Отличить такой SUP от основного текст становится сложнее. Странно, но так.
Лечится, правда, несложно - явным уменьшением размера шрифта, как показано выше. Надеюсь только, в IE проценты сработают так же как и в остальных бра.
Лечится, правда, несложно - явным уменьшением размера шрифта, как показано выше. Надеюсь только, в IE проценты сработают так же как и в остальных бра.
0
Пока что у меня получается так:
0
странно конечно - явно вниз их клонит
может vertical-align:top; попробовать?
к сожалению протестировать сам не могу - страницы википедии сохраняются на мой HDD без стилей
может vertical-align:top; попробовать?
к сожалению протестировать сам не могу - страницы википедии сохраняются на мой HDD без стилей
0
Если вы зарегистрированы, можно тестировать прямо там. Заходите на 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.
Правда, если браузер хорошо кэширует стили, то стоит обновлять 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.
+1
Можете попробовать Firebug. И страницы никакие сохранять не надо. Один недостаток — проверяет только для Firefox
0
Вертикальными алиджинами ровняем высоту строки, а сами блоки смещаем относительным позиционированием.
sup { vertical-align: text-top; position: relative; top: -0.2em; }
sub { vertical-align: text-bottom; position: relative; bottom: -0.2em; }
Нижние индексы вроде бы на строку не влияют, но для симметрии, думаю, им тоже надо явно задать стили.
sup { vertical-align: text-top; position: relative; top: -0.2em; }
sub { vertical-align: text-bottom; position: relative; bottom: -0.2em; }
Нижние индексы вроде бы на строку не влияют, но для симметрии, думаю, им тоже надо явно задать стили.
+1
UFO just landed and posted this here
UFO just landed and posted this here
(только он элайн, а не "алиджин";)
0
Вариант A1 рулит! Выглядит точно как обычный суп, только лучше :-). И решение хорошее — приподнять над основной строкой.
+1
Вообще, было бы неплохо таки уменьшить шрифт супа еще чуток
0
В опере 9.5 работает только вариант A1, в остальных строки разьезжаются или на sup или на sub
0
Это было в Опере 9.26, а вот в IE 7 они действительно сверху, но какие-то очень маленькие.
0
приврал - размер шрифта тот же, но за счёт более низкой посадки различить что это superscript тяжело - "придётся" его уменьшать
0
В Википедии давно уже написано об этом, но только как персональный апгрейд. Не думаю, что попытка применить это для всех встретит одобрение.
0
да—это уж точно))))
0
Блин, а я то думал опять чето про ЖЖ.
А так - спасибо, бум знать.
А так - спасибо, бум знать.
+20
Ха, та же фигня :-) Долго думал, что такое ужасное "суп" сделал на этот раз, пока грузился пост.
+4
Если бы написали "HTML тэг <sup> рвёт тексты", то не было бы таких ассоциаций :)
0
по такой логике и «рвёт» требует замены, а «на такое я пойти не могу» :-))
0
да и '<' '>' в заголовках стираются
0
Это потому что надо писать HTML-мнемоники угловых скобок: «<sup>».
И да, это не тег, а элемент HTML.
И да, это не тег, а элемент HTML.
0
Думаете я не писал? :-) Мир Хабрадвижок оказался сильней
моя вселенная рушится… почему он не тег?!
моя вселенная рушится… почему он не тег?!
+1
Не суть важно. :) Тег — это часть элемента HTML. Элемент состоит из содержимого, помещённого внутрь открывающего и закрывающего тегов. Так вот, рвёт тексты не тег, а элемент. Но это так, чисто терминологически. :)
+1
Опередили вы меня =)
0
А размер шрифта 65% не слишком маленький?
0
по-моему и Хабр относится к этому большинство. (Видно по двум абзацам топика: там где "Википедия" с индексом - интервал увеличен)
0
А я на злободневной волне совсем про другой суп поначалу подумал :)
+1
Суп рвет мозг очумевшим ЖЖ-шникам... )
+4
в жж уже исправили или я чтот непонял? =Р
у меня вообще везде все базовые настройки (FF2) и такие разрывы только перед строчкой где вставлен жж-юзер(голова синяя ^__^)
у меня вообще везде все базовые настройки (FF2) и такие разрывы только перед строчкой где вставлен жж-юзер(голова синяя ^__^)
0
UFO just landed and posted this here
О, это даже лучше, чем я выше предложил с относительными выравниваниями.
0
Разрыв уменьшился, но не исчез полность. В википедии размер разрыва стал всего 1 px. На хабре — 2px. Opera 9.5b2
0
Нет, всё-таки это не то. Ваш вариант действует на SUB, но не на SUP. Вот набросал тест: http://apostolstudio.com/files/suptest.h…
Мой вариант (А) работает во всех браузерах (в опере только SUB как-то наполовину сработал, но и то лучше, чем другие способы). Вариант (С), который озвучен автором поста, — расчитан только на SUP, и неестественно уменьшает шрифт.
Мой вариант (А) работает во всех браузерах (в опере только SUB как-то наполовину сработал, но и то лучше, чем другие способы). Вариант (С), который озвучен автором поста, — расчитан только на SUP, и неестественно уменьшает шрифт.
+2
sup/sub рвёт тексты, высота строки где присутствует SUP увеличивается и в результате нам предстают хаотично разбросанные строки, а не параграфКак-нибудь понадобится - найду :)
Вариант A1 (лучшее решение)
.a1 sup { vertical-align: baseline; position: relative; top: -0.4em; }
.a1 sub { vertical-align: baseline; position: relative; bottom: -0.4em; }
0
UFO just landed and posted this here
Может в «Типографику» перенести?
+3
ваше метод подвержен "разрывам", при line-height меньше normal(1.2em)
считаю более правельным, вот так "неразрываемый" стиль:
sup, sub
{ font-size:75%; vertical-align:middle; position:relative; }
считаю более правельным, вот так "неразрываемый" стиль:
sup, sub
{ font-size:75%; vertical-align:middle; position:relative; }
+2
Спасибо, часто о таком не задумываешься, а тут уже готовое решение. Внесу в свой начальный шаблон для Drupal ;)
0
Насчёт Lorem ipsum загляните в Ководство :)
0
UFO just landed and posted this here
zencd
Оу! Вы тоже читаете Илью Бирмана!
Оу! Вы тоже читаете Илью Бирмана!
0
Спасибо за идею.
0
UFO just landed and posted this here
Кстати говоря,
кстати говоря,
смайлики рвут текст
не меньше
не меньше
не меньше О_О
кстати говоря,
смайлики рвут текст
не меньше
не меньше
не меньше О_О
0
О, зенкую.
0
по заголовку в ридере сперва подумал, что опять про ЖЖ и предводителя мирового зла Носика :)
0
line-height:0 не спасает?
0
не знаю, может и спасает, но а) выглядит как хак, б) маленький line-height — это немодно :-), борцы за читаемость текстов его как раз увеличивают
0
1) выглядит это нормально))) Это валидный код. 2) line-height для текста маленький не ставят.а тут дело про sup и sub текст и он нормально читаемый.
0
(ага.. я подумал о высоте строки всего текста)
Вообще выглядит впечатляюще: минимум усилий, минимум хаков.
Выше уже было похожее предложение:
Looks good!
Вообще выглядит впечатляюще: минимум усилий, минимум хаков.
Выше уже было похожее предложение:
sup { line-height:1em; }
но какое-то оно не очень рабочее o_O. А нолик работает.Looks good!
sup { line-height: 0; }
0
в FF всё хорошо, но в IE разваливается — см. 2й вариант: http://zencd.spb.ru/tmp/sup.html
0
vertical-align:text-top - к сожалению надо добавить для супа и bottom для суба.
Нолик работает и вообще лучше использовать Unitless line-heights Статья старая, но 0 уже проходит валидацию.
Нолик работает и вообще лучше использовать Unitless line-heights Статья старая, но 0 уже проходит валидацию.
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; }
Ну и что, спрашивается, я неправильно делаю?
.
В 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; }
Ну и что, спрашивается, я неправильно делаю?
0
Спасибо огромное за пост!
>putnik 26 марта 2008, в 00:48 написал: «Я как представитель «даже Википедии» обещаю поправить, если сейчас ничего плохого в комментариях не скажут. »
Не могу удержаться… ХУЙ!
>putnik 26 марта 2008, в 00:48 написал: «Я как представитель «даже Википедии» обещаю поправить, если сейчас ничего плохого в комментариях не скажут. »
Не могу удержаться… ХУЙ!
0
Sign up to leave a comment.
sup рвёт тексты