Наша взаимовыгодная связь https://banwar.org/
Давайте поглянемо на таблицю, зображену нижче. Не будемо вникати в вміст - я взяв першу ліпшу, звернемо увагу на оформлення, зокрема на напрям тексту в перших двох колонках.
Дивно, але настільки звичне і зручне форматування нехарактерно для інтернету через відсутність належної підтримки. З приходом CSS3 така підтримка з'явиться, але поки, подібні таблиці створюються, як правило, за допомогою зображень без використання призначених для цих цілей табличних тегів. Що ж, будемо чекати світлих часів, проте що заважає нам поекспериментувати і спробувати знайти рішення вже зараз?
Завдання: Дана таблиця
<Table class = "example"> <tr> <td colspan = "3"> Терміни спостереження, сут </ td> <td> 3 </ td> <td> 6 </ td> <td> 9 </ td > <td> 12 </ td> </ tr> <tr> <td rowspan = "12" class = "vertical"> Зміст основних клітинних елементів,% </ td> <td rowspan = "3" class = "vertical "> Нейтрофіли </ td> <td> Хлоргексидин </ td> <td> 49.3 </ td> <td> 31.5 </ td> <td> 23.5 </ td> <td> 24.5 </ td> </ tr > <tr> <td> Левосин </ td> <td> 43.4 </ td> <td> 25.3 </ td> <td> 19.5 </ td> <td> 19.4 </ td> </ tr> <tr > <td> Левосин + прополіс </ td> <td> 32.5 </ td> <td> 22.3 </ td> <td> 16.2 </ td> <td> 13.4 </ td> </ tr> <tr> <td rowspan = "3" class = "vertical"> Макрофаги </ td> <td> Хлоргексидин </ td> <td> 1.0 </ td> <td> 1.4 </ td> <td> 18.9 </ td> <td> 29.5 </ td> </ tr> <tr> <td> Левосин </ td> <td> 2.1 </ td> <td> 1.3 </ td> <td> 17.4 </ td> <td> 32.1 </ td> </ tr> <tr> <td> Левосин + прополіс </ td> <td> 4.1 </ td> <td> 3.8 </ td> <td> 27.5 </ td> <td> 29.5 </ td> </ tr> <tr> <td rowspan = "3" class = "Vertical"> Лімфоцити </ td> <td> Хлоргексидин </ td> <td> 1.1 </ td> <td> 3.5 </ td> <td> 1.1 </ td> <td> 1.9 </ td> < / tr> <tr> <td> Левосин </ td> <td> 1.9 </ td> <td> 2.9 </ td> <td> 3.2 </ td> <td> 3.8 </ td> </ tr> <tr> <td> Левосин + прополіс </ td> <td> 6.6 </ td> <td> 2.7 </ td> <td> 2.1 </ td> <td> 2.7 </ td> </ tr> < tr> <td rowspan = "3" class = "vertical"> Фібробласти </ td> <td> Хлоргексидин </ td> <td> 1.0 </ td> <td> 1.0 </ td> <td> 11.5 </ td> <td> 28.1 </ td> </ tr> <tr> <td> Левосин </ td> <td> 1.8 </ td> <td> 2.3 </ td> <td> 15.2 </ td> < td> 25.2 </ td> </ tr> <tr> <td> Левосин + прополіс </ td> <td> 4.1 </ td> <td> 3.9 </ td> <td> 23,4 </ td> <td> 25.9 </ td> </ tr> </ table> необхідно, щоб текст в осередках з класом vertical при відображенні в браузері мав вертикальний напрямок «знизу-вгору».CSS-рішення існує лише для Internet Explorer. Тільки цей «неправильний» браузер, починаючи з версії 5.5, частково підтримує передбачене в CSS3 для цих цілей властивість writing-mode . Міститься у IE на озброєнні і пропіетарное layout-flow, проте ні за допомогою першого, ні за допомогою другого властивості мені так і не вдалося задати тексту потрібний напрямок «знизу-вгору». Довелося додатково використовувати фільтри flipH і flipV для горизонтального і вертикального повороту тексту. Остаточно приходимо до наступного опису класу vertical:
td.vertical {writing-mode: tb-rl; filter: flipH flipV; background: #fff; / * Для усунення бага з відображенням тексту в IE6 і нижче * / ...}Задавши зазначені стилі, текст в Internet Explorer відобразиться в потрібному напрямку.
У пошуках ж універсального рішення в першу чергу на думку спадає очевидна ідея: замінити текстовий вміст на ідентичне графічне, але повернене на 90 градусів. Для прикладу, текст «Hello World!» Може бути замінений на що-небудь на зразок <img src = "? Text = Hello + World% 21">, або «Вміст основних клітинних елементів» - на <img src = "? Text = % D1% EE% E4% E5% F0% E6% E8% EC% EE% E5 +% EE% F1% ED% EE% E2% ED% FB% F5 +% EA% EB% E5% F2% EE% F7% ED% FB% F5 +% FD% EB% E5% EC% E5% ED% F2% EE% E2 ">. Основне навантаження по генерації такого псевдо-тексту в цьому випадку ляже на серверну частину, а значить можна говорити про кросбраузерності.
Цей же підхід може бути втілений і на клієнтському рівні. Серед численних методик заміни тексту зображенням, для нашого випадку можна застосувати популярний sIFR - замінити текст флеш-роликом, або скористатися здатністю передових браузерів генерувати SVG-зображення. Останній прийом я і вирішив продемонструвати як приклад рішення.
В цьому випадку, наша задача фактично зводиться до створення SVG-розмітки, якою ми замінимо текст в потрібних нам осередках. Включити SVG-зображення в HTML-документ можна так:
<object type = "image / svg + xml" data = "filename.svg" width = "100" height = "100"> </ object>, або так <object type = "image / svg + xml" data = " data: image / svg + xml; <svg xmlns = 'http: //www.w3.org/2000/svg'> ... (SVG-розмітка) ... </ svg> "width =" 100 "height =" 100 " > </ object> Нижче, приклад JavaScript-коду, що містить відповідну SVG-розмітку і виполняеющего необхідну заміну (функцію GetVerticalLayout () необхідно прив'язати до події onload сторінки): function GetVerticalLayout () {/ * Параметри * / var fontFamily = "Arial" ; / * Задаємо шрифт * / var fontSize = 12; / * Задаємо розмір шрифту * / var notIE =! (Navigator.appVersion.indexOf ( "MSIE")! = -1 && navigator.systemLanguage); var supportSVG = document.implementation.hasFeature ( "http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1"); if (notIE && supportSVG) {/ * Збираємо все осередки * / var td = document.getElementsByTagName ( "td"); / * Знаходимо осередки з класом vertical і замінюємо в них текст svg-зображенням * / var objElement = document.createElement ( "object"); for (i = 0; i <td.length; i ++) {if (td [i] .className.match (/ vertical / i)) {var text = td [i] .innerHTML; var h = td [i] .clientHeight; var w = td [i] .clientWidth; var obj = objElement.cloneNode (true); obj.height = (h> w)? h: w; obj.type = "image / svg + xml"; obj.width = fontSize + 2; obj.data = "data: image / svg + xml; charset / windows-1251, <svg xmlns = 'http: //www.w3.org/2000/svg'> <text x = '" + (- obj. height / 2) + " 'y ='" + fontSize + " 'style =' font-family:" + fontFamily + "; font-size:" + fontSize + "px; text-anchor: middle 'transform =' rotate (-90) '> "+ text +" </ text> </ svg> "; td [i] .replaceChild (obj, td [i] .firstChild); }}}}Якщо браузер підтримує SVG, то у відповідних осередках текст відобразиться належним чином. Так відбувалося в Opera 9 і в Gecko, починаючи з версії 1.8. В Internet Explorer замену не виробляємо, так як для цього веб-провідника існує згадане вище просте рішення, крім того, для відображення SVG в IE потрібні зовнішні плагіни, які, швидше за все, не будуть встановлені у користувача.
Робочий приклад можна подивитися тут .
Залишити відгук | Коментарі (9)
Що ж, будемо чекати світлих часів, проте що заважає нам поекспериментувати і спробувати знайти рішення вже зараз?» Може бути замінений на що-небудь на зразок <img src = "?
Text = Hello + World% 21">, або «Вміст основних клітинних елементів» - на <img src = "?
Height = (h> w)?
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
