Форум

#1 (**permalink**) 14.10.2007, 22:02

расположить текст по вертикали?

Илья Кантор · #2 (**permalink**) 15.10.2007, 03:11

В
е
р
т
и
к
а
л
ь
н
о

Никак.
Разве что сделать ширину столбца равной одной букве и разбить буквы пробелами

Phoenix · #3 (**permalink**) 17.10.2007, 18:21

А если написать функцию... которая из строки "abcd" сделает "a\nb\n\c\nd\n" и потом просто добавить через innerHTML к колонке(td).

по идее сработает.

alexKniaz · #4 (**permalink**) 02.11.2008, 09:36

Как вариант

<script language="javascript" type="text/javascript">
function showVert(str)
{var len=str.length;
var out='';
for(i=0;i<len;i++)
{out+=str.charAt(i)+'<br />';}
document.write(out);}

showVert('веритальный текст.');
</script>

Octane · #5 (**permalink**) 02.11.2008, 10:25

Вертикально стилями только в Internet Explorer и новейших версиях Safari (WebKit), в Opera, FireFox, Safari еще на Canvas наверное можно отрисовать. Еще SVG и VML есть... короче вариантов масса, но все надо пробовать, искать решение, чтобы работало во всех браузерах.

alexKniaz · #6 (**permalink**) 02.11.2008, 17:55

Цитата:

еще на Canvas наверное можно отрисовать

Поподробнее, плиз.

Octane · #7 (**permalink**) 02.11.2008, 18:57

«Canvas tutorial»
Метод для вывода текста «fillText».
Элемент <canvas> будет работать в Mozilla Firefox 1.5+, Opera 9+, Safari 3+, Google Chrome, для IE есть какой-то скрипт, который переводит команды «Canvas» в формат, понятный для VML.

alexKniaz · #8 (**permalink**) 03.11.2008, 02:27

+1, Octane.

Gvozd · #9 (**permalink**) 03.11.2008, 02:33

Вот, я немного нагуглил
http://xpoint.ru/forums/internet/htm...ad/41790.xhtml
http://bolknote.ru/2006/12/16/~330/

<html>
<head>
    <style type="text/css">
        html>body .canv { display: none }
        .canv { filter: flipv() fliph(); writing-mode: tb-rl; width: 10px; height: 150px;
                font-size:12px; font-family: Arial; background-color: white }

        html>body .obj  { display: block; width: 10px; height: 150px }
        .obj { display: none }
    </style>
</head>

<body>
<div class="canv">Hello!</div>

<object class="obj" type="image/svg+xml"
    data="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'>
    <text x='-150' y='10' font-family='Arial' font-size='12' transform='rotate(-90)'>Hello!</text>
    </svg>">
</object>

</body>
</html>

ивот еще с других

<font style="FILTER: flipv fliph; WRITING-MODE: tb-rl">text</font>
<hr/>
<BDO dir=rtl>test</BDO>
<hr/>
<div style="writing-mode : tb-rl;width:1px;">text</div>
<hr/>
<font style="LAYOUT-FLOW: vertical-ideographic">text</font>

анализировать материал немного лень.
насколько я понял, из найденного, CSS-ом это решается лиш в IEпоследних версий
в первом случае используется хак с svg-картинками, для других браузеров.
ЗЫ а вообщеalexKniaz, и аналогичные решениям +1 от меня
ЗЫЫ выдача гугла на "css вертикальный текст", первые 4 документа)))

Форум

Справочник

Discord чат

Курсы javascript