zencd 25 мар 2008 в 21:27

sup рвёт тексты

1 мин

4.2K

Типографика *

+68

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

putnik 25 мар 2008 в 21:48

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

zencd 25 мар 2008 в 21:53

wow, это было бы неожиданное и приятное для меня последствие :-) посмотрим-посмотрим...

неужели у вас прав хватит? ;-)

zencd 25 мар 2008 в 22:00

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

Лечится, правда, несложно - явным уменьшением размера шрифта, как показано выше. Надеюсь только, в IE проценты сработают так же как и в остальных бра.

putnik 25 мар 2008 в 22:10

Пока что у меня получается так:
Царица Савская

zencd 25 мар 2008 в 22:15

странно конечно - явно вниз их клонит
может vertical-align:top; попробовать?

к сожалению протестировать сам не могу - страницы википедии сохраняются на мой HDD без стилей

putnik 25 мар 2008 в 22:23

Если вы зарегистрированы, можно тестировать прямо там. Заходите на 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.

zencd 25 мар 2008 в 22:40

вот шайтанский сайт! поправил себе этот кастом-цсс.

а я думал вы про всю википедию ... :)

putnik 25 мар 2008 в 23:04

Как только получим приемлемое решение, можно будет и для всей Википедии изменить. =)

Victor_R 26 мар 2008 в 15:34

Может подойдет такой вариант:

sup{

	font-size:0.85em;

	line-height:0;

	vertical-align:middle;

	position:relative;

	top:-0.3em

}

absolvo 25 мар 2008 в 22:42

У меня замена стилей у SUP никаких изменений не вызывает. monobook.css изменён.

zencd 25 мар 2008 в 22:44

я вставил туда такой текст

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

работает for me

absolvo 25 мар 2008 в 22:48

Скопировал, вставил. SUP стал размером с обычный текст. Замена размера на 35%, к примеру, ничего не меняет. FF2.

dolotov 25 мар 2008 в 22:35

Можете попробовать Firebug. И страницы никакие сохранять не надо. Один недостаток — проверяет только для Firefox

zencd 25 мар 2008 в 22:37

спасибо, у меня как раз он

Apostol 25 мар 2008 в 23:17

Вертикальными алиджинами ровняем высоту строки, а сами блоки смещаем относительным позиционированием.

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

Нижние индексы вроде бы на строку не влияют, но для симметрии, думаю, им тоже надо явно задать стили.

НЛО прилетело и опубликовало эту надпись здесь

Apostol 26 мар 2008 в 02:38

Да, действительно, сработало теперь и в Опере. Я на baseline не смотрел, так как размер у основного шрифта и над-(под-)строчного отличаются, но теперь вижу, что зря не смотрел. :) Добавил ваш вариант (А1) в тест.

НЛО прилетело и опубликовало эту надпись здесь

Apostol 26 мар 2008 в 03:05

Ну если сравнивать с тем смещением, которое было без указания стилей, то вроде бы и много. Хотя так вроде бы читается легче. Пусть уже каждый по вкусу подбирает. :)

НЛО прилетело и опубликовало эту надпись здесь

Apostol 26 мар 2008 в 16:39

Загнал вариант А1 в <div style='height: 80px; overflow: auto;'></div>
Скроллинг появился, глюков не наблюдаю. ИЕ6, дополнительных костылей не добавлял. (см. страницу с тестами)

НЛО прилетело и опубликовало эту надпись здесь

neithere 26 мар 2008 в 12:06

(только он элайн, а не "алиджин";)

Apostol 26 мар 2008 в 02:07

Страница с тестами

zencd 26 мар 2008 в 07:29

Вариант A1 рулит! Выглядит точно как обычный суп, только лучше :-). И решение хорошее — приподнять над основной строкой.

Imposeren 26 мар 2008 в 10:37

Вообще, было бы неплохо таки уменьшить шрифт супа еще чуток

homm 26 мар 2008 в 10:40

Эксплорер может попытаьтся «сгладить» его. Мерзкое зрелище.

ProRunner 26 мар 2008 в 13:20

В опере 9.5 работает только вариант A1, в остальных строки разьезжаются или на sup или на sub

putnik 25 мар 2008 в 22:16

Это было в Опере 9.26, а вот в IE 7 они действительно сверху, но какие-то очень маленькие.

zencd 25 мар 2008 в 22:22

Возможно опера не знает про text-top.

font-size можно варьировать. Хотя не факт что результат вам понравится ... выглядит всё-же отлично от стандартного варианта. может помочь увеличение высоты строки (line-height), но это было бы слишком большой жертвой.

zencd 25 мар 2008 в 22:12

приврал - размер шрифта тот же, но за счёт более низкой посадки различить что это superscript тяжело - "придётся" его уменьшать

edelweard 26 мар 2008 в 09:20

В Википедии давно уже написано об этом, но только как персональный апгрейд. Не думаю, что попытка применить это для всех встретит одобрение.

adlopez 26 мар 2008 в 09:23

да—это уж точно))))

meako 25 мар 2008 в 21:55

Блин, а я то думал опять чето про ЖЖ.
А так - спасибо, бум знать.

mcm69 25 мар 2008 в 21:56

Ха, та же фигня :-) Долго думал, что такое ужасное "суп" сделал на этот раз, пока грузился пост.

ibnteo 26 мар 2008 в 11:50

Если бы написали "HTML тэг <sup> рвёт тексты", то не было бы таких ассоциаций :)

zencd 26 мар 2008 в 12:06

по такой логике и «рвёт» требует замены, а «на такое я пойти не могу» :-))

zencd 26 мар 2008 в 12:07

да и '<' '>' в заголовках стираются

Heath 26 мар 2008 в 12:10

Это потому что надо писать HTML-мнемоники угловых скобок: «<sup>».

И да, это не тег, а элемент HTML.

zencd 26 мар 2008 в 12:15

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

моя вселенная рушится… почему он не тег?!

Heath 26 мар 2008 в 18:17

Не суть важно. :) Тег — это часть элемента HTML. Элемент состоит из содержимого, помещённого внутрь открывающего и закрывающего тегов. Так вот, рвёт тексты не тег, а элемент. Но это так, чисто терминологически. :)

zencd 26 мар 2008 в 18:30

предпочитаю понимать о чём говорю и думаю. спасибо. довольно пребывать во мраке! вытащим всё на свет! ... это я себе :)

simple 26 мар 2008 в 11:17

Опередили вы меня =)

drJonnie 25 мар 2008 в 21:58

А размер шрифта 65% не слишком маленький?

zencd 25 мар 2008 в 22:03

Настраивается по вкусу. К сожалению указать размер шрифта придётся - при применении стиля к SUPу размер шрифта загадочным образом увеличивается и отличить его от текста становится проблематично.

НЛО прилетело и опубликовало эту надпись здесь

inno 25 мар 2008 в 22:00

по-моему и Хабр относится к этому большинство. (Видно по двум абзацам топика: там где "Википедия" с индексом - интервал увеличен)

zencd 25 мар 2008 в 22:08

Не припоминаю вообще чтобы кто-то это использовал. Понятно что "хорошее не замечается, пока не встретится плохое", но и я за этой проблемой достаточно давно слежу :-)

FloppyFormator 25 мар 2008 в 22:34

А я на злободневной волне совсем про другой суп поначалу подумал :)

zencd 25 мар 2008 в 22:41

от супа и не такого можно ожидать!

:-D

ponchiknews 25 мар 2008 в 22:43

Суп рвет мозг очумевшим ЖЖ-шникам... )

Stuart 25 мар 2008 в 23:00

в жж уже исправили или я чтот непонял? =Р
у меня вообще везде все базовые настройки (FF2) и такие разрывы только перед строчкой где вставлен жж-юзер(голова синяя ^__^)

artyfarty 25 мар 2008 в 23:32

кстати да, уродский разрыв по жизни бесит. только править сложнее — картинка

НЛО прилетело и опубликовало эту надпись здесь

Apostol 25 мар 2008 в 23:31

О, это даже лучше, чем я выше предложил с относительными выравниваниями.

TiGR 26 мар 2008 в 00:54

Разрыв уменьшился, но не исчез полность. В википедии размер разрыва стал всего 1 px. На хабре — 2px. Opera 9.5b2

Apostol 26 мар 2008 в 01:58

Нет, всё-таки это не то. Ваш вариант действует на SUB, но не на SUP. Вот набросал тест: http://apostolstudio.com/files/suptest.h…
Мой вариант (А) работает во всех браузерах (в опере только SUB как-то наполовину сработал, но и то лучше, чем другие способы). Вариант (С), который озвучен автором поста, — расчитан только на SUP, и неестественно уменьшает шрифт.

denver 26 мар 2008 в 06:51

sup/sub рвёт тексты, высота строки где присутствует SUP увеличивается и в результате нам предстают хаотично разбросанные строки, а не параграф

Вариант A1 (лучшее решение)
.a1 sup { vertical-align: baseline; position: relative; top: -0.4em; }
.a1 sub { vertical-align: baseline; position: relative; bottom: -0.4em; }

Как-нибудь понадобится - найду :)

НЛО прилетело и опубликовало эту надпись здесь

Apostol 25 мар 2008 в 23:33

Может в «Типографику» перенести?

Heath 26 мар 2008 в 01:07

Присоединяюсь.

zencd 26 мар 2008 в 07:48

присоединился тоже ;)

dkrnl 26 мар 2008 в 03:08

ваше метод подвержен "разрывам", при line-height меньше normal(1.2em)
считаю более правельным, вот так "неразрываемый" стиль:
sup, sub
{ font-size:75%; vertical-align:middle; position:relative; }

dkrnl 26 мар 2008 в 03:15

в догонку, забыл: (:
sup { bottom:0.5em; }
sub { top:0.5em; }

НЛО прилетело и опубликовало эту надпись здесь

Apostol 26 мар 2008 в 03:31

Мне кажется, что всё-таки baseline. Там выравниваются базовые линии, а у middle — базовая линия и средняя по вертикали.

НЛО прилетело и опубликовало эту надпись здесь

strider1 26 мар 2008 в 06:55

Спасибо, часто о таком не задумываешься, а тут уже готовое решение. Внесу в свой начальный шаблон для Drupal ;)

Hitryi_Pryanik 26 мар 2008 в 07:17

Насчёт Lorem ipsum загляните в Ководство :)

НЛО прилетело и опубликовало эту надпись здесь

zencd 26 мар 2008 в 07:47

тоже верно. редко когда бывает сносок больше четырёх (или сколько там). но википедию я бы приукрасил :-) ибо часто пользуюсь

homm 26 мар 2008 в 09:16

zencd
Оу! Вы тоже читаете Илью Бирмана!

zencd 26 мар 2008 в 09:27

таки нет, но щас наверстаю :)

iBear 26 мар 2008 в 10:17

Спасибо за идею.

НЛО прилетело и опубликовало эту надпись здесь

zencd 26 мар 2008 в 13:15

Кстати говоря,
кстати говоря,
смайлики

рвут текст
не меньше
не меньше
не меньше О_О

mcm69 27 мар 2008 в 22:55

смайлики должны в большинстве случаев гореть в аду.

Azs 26 мар 2008 в 13:58

О, зенкую.

diamant 26 мар 2008 в 21:52

по заголовку в ридере сперва подумал, что опять про ЖЖ и предводителя мирового зла Носика :)

BadMinus 3 апр 2008 в 04:37

line-height:0 не спасает?

zencd 3 апр 2008 в 04:47

не знаю, может и спасает, но а) выглядит как хак, б) маленький line-height — это немодно :-), борцы за читаемость текстов его как раз увеличивают

BadMinus 3 апр 2008 в 05:11

1) выглядит это нормально))) Это валидный код. 2) line-height для текста маленький не ставят.а тут дело про sup и sub текст и он нормально читаемый.

zencd 3 апр 2008 в 05:31

(ага.. я подумал о высоте строки всего текста)

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

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

Looks good!

sup { line-height: 0; }

zencd 3 апр 2008 в 05:42

в FF всё хорошо, но в IE разваливается — см. 2й вариант: http://zencd.spb.ru/tmp/sup.html

BadMinus 3 апр 2008 в 11:52

vertical-align:text-top - к сожалению надо добавить для супа и bottom для суба.
Нолик работает и вообще лучше использовать Unitless line-heights Статья старая, но 0 уже проходит валидацию.

Sergey1 30 апр 2008 в 10:47

Воспользовался вашим советом и переформатировал у себя малость тэги 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; }

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

zencd 30 апр 2008 в 21:24

тут нужно или точку убрать:

sup { … }

или так:

sup.CommentCount { … }

installero 10 июл 2009 в 11:03

Спасибо огромное за пост!

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

Зарегистрируйтесь на Хабре, чтобы оставить комментарий