Как в ЖЖ можно написать вертикальный текст?
XXI век на дворе, а HTML без хитрых подвывертов не позволяет элементарно вертикальный текст написать (я уж не говорю под произвольным углом)!
На автономном сайте с использованием CSS можно многое. А вот в ЖЖ...
Те способы, которые народ обычно для этого использует, закономерно не работают из-под ЖЖ, потому что большинство подвывертов он блокирует.
Есть, конечно, один хороший способ, но может работать не во всех браузерах:
-90 градусов
-45 градусов
45 градусов
180 градусов
Давайте разберёмся в подробностях.
С ходу вот такой способ нагуглился:
Vertical Cell
В Файрфоксе (в оригинальном стиле блога и иногда во френдленте) я вижу полную ерунду - текст рисуется не внутри клетки таблицы, а снаружи!
Vertical
Возможно, вы здесь видите совершенно не то, что задумывалось. Зависит от браузера и от контекста.
Но в любом случае никакие другие значения атрибута не работают. То есть снизу вверх текст расположить не удаётся.
В общем-то понятно, почему так выходит с таблицей: браузер не может определить ширину клетки и делает её минимально возможной.
Это хорошо видно, если сделать cellspacing побольше или вместо текста нарисовать блок
с фоном (а ещё можно тот же блок и без таблицы):
Vertical
Vertical
Vertical
Vertical
Но всё это ни разу не решает поставленной задачи, увы...
При этом полюбуйтесь, как вышеприведённые примеры выглядят в разных браузерах:
Ну и теперь о том, как сделать то, что приведено в начале поста (правда, все справочники твердят, что конструкция "transform:rotate(-90deg)" устаревшая и не во всех браузерах работает) - но она таки оказалась наиболее универсальной (спасибо ak545 за пример, у меня почему-то сразу не вышло):
-45 градусов
Угол можно поставить любой, что я и сделал в первой таблице.
А теперь о том, почему у меня сразу не получился этот способ.
Всё дело в параметре "transform-origin"! Если вы сделаете без него, то повёрнутый блок уедет в неизвестном направлении (вот я его и не нашёл, потому что уехал ниже тела поста, за кнопки соцсетей).
А если задать, например, "transform-origin:right top;" - надпись в зависимости от текущего стиля ЖЖ может и за границу экрана сбежать.
Для экспериментов удобно поместить блоки в таблицу, подсветить фон (как я и сделал в начале поста) и смотреть, что относительно чего крутится.
Вот что будет, если сделать "transform-origin:left top;" - поворот относительно верхнего левого угла исходного расположения блока:
-90 градусов
-45 градусов
45 градусов
180 градусов
Засада в том, что высота и ширина клетки таблицы вычисляется из размеров блока, когда он ещё не повёрнут, так что придётся вручную жёстко задавать.
И в том, что ни из одного угла не повернуть блок так, чтобы он остался внутри клетки. Только вокруг центра, как сделано в начале поста: "transform-origin:center center;".
Кстати, напомню предыдущий пост про другие полезные фишки, включая закругления и подсветку фона в тексте.
На автономном сайте с использованием CSS можно многое. А вот в ЖЖ...
Те способы, которые народ обычно для этого использует, закономерно не работают из-под ЖЖ, потому что большинство подвывертов он блокирует.
Есть, конечно, один хороший способ, но может работать не во всех браузерах:
-90 градусов
-45 градусов
45 градусов
180 градусов
Давайте разберёмся в подробностях.
С ходу вот такой способ нагуглился:
Vertical Cell
В Файрфоксе (в оригинальном стиле блога и иногда во френдленте) я вижу полную ерунду - текст рисуется не внутри клетки таблицы, а снаружи!
Vertical
Возможно, вы здесь видите совершенно не то, что задумывалось. Зависит от браузера и от контекста.
Но в любом случае никакие другие значения атрибута не работают. То есть снизу вверх текст расположить не удаётся.
В общем-то понятно, почему так выходит с таблицей: браузер не может определить ширину клетки и делает её минимально возможной.
Это хорошо видно, если сделать cellspacing побольше или вместо текста нарисовать блок
с фоном (а ещё можно тот же блок и без таблицы):
Vertical
Vertical
Vertical
Vertical
Но всё это ни разу не решает поставленной задачи, увы...
При этом полюбуйтесь, как вышеприведённые примеры выглядят в разных браузерах:
Ну и теперь о том, как сделать то, что приведено в начале поста (правда, все справочники твердят, что конструкция "transform:rotate(-90deg)" устаревшая и не во всех браузерах работает) - но она таки оказалась наиболее универсальной (спасибо ak545 за пример, у меня почему-то сразу не вышло):
-45 градусов
Угол можно поставить любой, что я и сделал в первой таблице.
А теперь о том, почему у меня сразу не получился этот способ.
Всё дело в параметре "transform-origin"! Если вы сделаете без него, то повёрнутый блок уедет в неизвестном направлении (вот я его и не нашёл, потому что уехал ниже тела поста, за кнопки соцсетей).
А если задать, например, "transform-origin:right top;" - надпись в зависимости от текущего стиля ЖЖ может и за границу экрана сбежать.
Для экспериментов удобно поместить блоки в таблицу, подсветить фон (как я и сделал в начале поста) и смотреть, что относительно чего крутится.
Вот что будет, если сделать "transform-origin:left top;" - поворот относительно верхнего левого угла исходного расположения блока:
-90 градусов
-45 градусов
45 градусов
180 градусов
Засада в том, что высота и ширина клетки таблицы вычисляется из размеров блока, когда он ещё не повёрнут, так что придётся вручную жёстко задавать.
И в том, что ни из одного угла не повернуть блок так, чтобы он остался внутри клетки. Только вокруг центра, как сделано в начале поста: "transform-origin:center center;".
Кстати, напомню предыдущий пост про другие полезные фишки, включая закругления и подсветку фона в тексте.