Автор: Євген Рижков Дата публікації: 03.04.2010
завдання
Зробити вертикальну напис (заголовок, пункт меню, повідомлення і т.п.), при чому напис повинен бути текстом, щоб можна було її змінювати.
Рішення
Чи не здавалася б подібна задача такою фантастичною, якби розробники браузерів встигали за рекомендаціями W3C. Ті вже давно пропонують властивість writing-mode для вказівки напряму тексту. За допомогою нього і можна задати вертикальний напрямок.
Як не дивно, жоден з "просунутих" браузерів в даний час ця властивість не визнають. І що ще більш дивно, його розуміє Interner Explorer! І щоб взагалі добити - починаючи з версії 5.5! Це перший випадок у моїй практиці. коли рішення потрібно шукати не для IE, а для інших браузерів.
Розробники інших браузерів, проігнорувавши рекомендації стандартів, пішли іншим шляхом. При чому, кожен з них своїм. Mozilla впровадила -moz-transform, Opera - -o-transform, webkit як уже можна було здогадатися - -webkit-transform. Навіщо було стільки властивостей плодити, мені не зрозуміло. Ну не будемо такими прискіпливими, і на цьому їм спасибі. Слід зазначити, що ці три властивості дозволяють повернути текст на довільний кут (значенням властивостей є кут - і це плюс), на відміну від writing-mode, який нині здатний відобразити текст тільки в двох положеннях: у горизонтальному положенні (значення lr-tb) і вертикально (tb-rl).
Тепер, щоб розгорнути напис вертикально потрібно:
- перелічити всі варіанти повороту тексту
- вказати фіксовані розміри контейнера з текстом (ширину і висоту). Без них блок з текстом може поводитися непередбачувано
Щоб подивитися як поворот вплине на становище що повертається елемента в потоці, додамо до і після нього по блоку.
<Div class = "firstBlock"> </ div> <div id = "rotateText"> Текст, який будемо повертати </ div> <div class = "lastBlock"> </ div> #verticalText {-moz-transform: rotate (90deg); -webkit-transform: rotate (90deg); -o-transform: rotate (90deg); writing-mode: tb-rl; width: 300px; height: 200px; }
демо приклад . Дивимося результат і особисто мене він не задовольняє:
В IE відпрацювало як потрібно - текст повернувся, блок залишився на своєму місці. Висновок: доробок ніяких не потрібно.
У просунутих браузерах поворот блоку призвів до того, що блок по ширині став займати місця рівне своїй висоті, а висота стала дорівнює ширині, плюс наліз на блоки вище і нижчестоящі. Висновок: потрібно враховувати, що буде повертати сам блок, тому в стилях слід значення висоти і ширини поміняти між собою. Плюс до цього відступами з усіх боків потрібно підкоригувати положення блоку в потоці.
Ці браузери доведеться відловлювати за допомогою Javascript (про це скрипті детальніше скоро напишемо) і повертати текст за допомогою SVG (про цей метод докладніше в наступному матеріалі). Оскільки в SVG немає автоматичного перенесення рядків, тому повернений текст буде в один рядок. Це доведеться врахувати і динамічно змінити розмір блоку так, щоб текст не обрізався.
І так, маємо той же HTML код:
<Div class = "firstBlock"> </ div> <div id = "rotateText"> Текст, який будемо повертати </ div> <div class = "lastBlock"> </ div>
Стилі для просунутих браузерів і для IE відрізняються. Щоб розмежувати скористаємося умовними коментарями :
<Style type = "text / css"> #rotateText {-moz-transform: rotate (90deg); -webkit-transform: rotate (90deg); -o-transform: rotate (90deg); height: 200px; / * Розміри задаємо відразу з урахуванням, що буде повернутий на 90 градусів * / width: 100px; border: 2px solid red; margin: -50px 0 -50px 50px; / * Підтягуємо відступи, що утворилися під час обертання * /} </ style> <! - [if IE]> <style type = "text / css"> #rotateText {writing-mode: tb-rl; height: 100px; / * Для IE розміри залишаються як зазвичай * / width: 200px; margin: 0; / * І відступи коригувати не потрібно * /} </ style> <! [Endif] -> <script type = "text / javascript" src = "path-to / jquery-1.3.2.min.js"> < / script> <! - jquery для простих маніпуляцій з об'єктами -> <script type = "text / javascript" src = "path-to / bdetect.js"> </ script> <! - скрипт для визначення браузера і його версії -> <script type = "text / javascript"> function vertText () {var browser = browserDetect (1), browserName = browser [0], browserVer = browser [1], browserVerPoints = browser [2]; browserVer = parseFloat (browserVer + "." + browserVerPoints); / * Впроваджувати SVG будемо тільки для Opera версії нижче 10.51 і FF нижче 3.5 * / if ((browserName == "Opera" && browserVer
демо приклад . Тепер отримуємо наступний результат:
Перевірено в:
переваги
- текст є текстом
- текст можна виділити і скопіювати
- доступна можливість многострочного тексту з автоматичним перенесенням рядків (крім деяких старих версій браузерів)
недоліки
- для більш старих версій Opera і FF текст буде одним рядком, плюс їм буде потрібно включений Javascript
- текст може починатися тільки від одного кута батьківського блоку - правого верхнього
- CSS код не походить валідацію - властивості -moz-transform, -webkit-transform, -o-transform отстуствует в специфікаціях
висновки
Користувачів, які використовують більш старі версії Firefox і Opera трохи і кожен день таких стає менше. Тому вище описаний прийом я вважаю можна використовувати в проектах. І хоч метод не є ідеальним і не гнучкий, як приємно все ж усвідомлювати що ти можеш реалізувати вертикальний текст!
По темі
Більш універсальний метод - « Текст під кутом »