Вертикальный текст с помощью HTML
Поворот текста с помощью HTML. Большенство людей считают данную задачу не решаемой средствами HTML, ну по крайней мере если и решаемой то не кросбраузерно. Я хочу разрушить данный стереотип и на примере показать, что это не только возможно, но и очень просто.
Как это делается? А очень просто.. Для интернет эксплорера это делается на базе фильтров, и этот метод известен почти всем. Но фильтра не действуют в браузерах типо оперы и фаерфокса. Как же с ними быть? А очень просто.. Для этого мы воспользуемся элементом которого нет в IE это канавас(<canavas>), который мы динамически создадим.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | вот готовый пример реализации такой функции <code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <style type="text/css"> html>body .canv { display: none; } .canv { filter: flipv() fliph(); writing-mode: tb-rl; width: 100px; height: 350px; font-size: 30px; font-family: Arial; background-color: white; text-align: center; } html>body .obj { display: block; width: 100px; height: 350px; } .obj { display: none; } </style> </head> <body> <div class="canv">Вертикальный текст</div> <object class="obj" type="image/svg+xml" data="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'> <text x='-350' y='50' font-family='Arial' font-size='25' transform='rotate(-90)'>Вер |
Всё делается очень просто. приблизительно так же как мы делали в примере со скриптом Reflection
a
Один комментарий на "Вертикальный текст с помощью HTML"
http://en.wikipedia.org/wiki/Canvas_(HTML_element)
Продолжение дискуссии на форуме: link
Вы можете продолжить обсуждение этой статьи на форуме