CSS: форматировать текст по вертикали

Question

Возможно ли с помощью CSS форматировать текст по вертикали? Например, вот так изображение показывает. Команда / обходной путь должен работать в Safari, как он используется в приложении iPhone.

Большое спасибо. Doonot

Answer 1

С помощью CSS3 вы можете использовать transform: rotate

div {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
position: absolute;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

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

Answer 2

Код преобразования, особенно в webkit, ужасно нарушен.Во время написания матрица преобразования применяется к механизму рендеринга, но не к вычислениям пространства, поэтому и Firefox, и Chromium пытаются рендерить область 100x200 в ячейке 200x100.Попытка переключить ширину / высоту приводит к пересчету преобразованной области до применения преобразования.

Самый простой и надежный способ - использовать SVG для создания изображения текста,К сожалению, это двухэтапный процесс:

<svg>
    <text x="50" y="50" transform="rotate(0 0,0)">Category</text>
</svg>

Визуализация в браузере и получение размеров текстового тега (в данном случае 59x17) и подключение их к SVG.

<svg width='25px' height='60px'>
    <text x="17" y="59" transform="rotate(270 17,59)">Category</text>
</svg>

С содержимым 59 x 17px я немного увеличил размер контейнера, потому что размер, казалось, игнорировал глифы висячих (например, хвост y).Поворот на 270 градусов вокруг нижнего правого угла приводит к тому, что старый верхний правый становится новым верхним левым (т. Е. Текст смещается по вертикали, нижний верх).На текст также распространяются обычные правила таблицы стилей, хотя вам придется пересчитать размеры, если это изменит размер текста.

Answer 3

Да с Safari / Webkit и другими браузерами, которые поддерживают вращение CSS-текста.

Чтобы выполнить преобразование, элемент должен быть установлен на display:block.В этом случае просто добавьте объявление в диапазон, который вы хотите повернуть.В Opera есть поддержка -o-transform в 10.50

. Когда дело доходит до эффектов в Internet Explorer, существует фильтр BasicImage, позволяющий вращать любой элемент с макетом.

#element-id{
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
-o-transform:  rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
display: block;
position: absolute;
left: 10px;
top: 15px;
}

Ref: ВРАЩЕНИЕ ТЕКСТА С CSS