Вертикальный текст в ячейках
Необходимо, чтобы текст в ячейках с классом "vertical" при отображении в браузере имел вертикальное направление "снизу-вверх"
Средствами CSS это возможно реализовать только в Internet Explorer, воспользовавшись свойством writing-mode. Для необходимого направления текста придётся воспользоваться фильтрами flipH и flipV
А как же быть с остальными браузерами, которые не поддерживают ни фильтры, ни свойство writing-mode?
На ум приходит, пожалуй, только одно - заменить текстовое содержимое на картинку. Но уж, конечно, не хочется делать это ручками, воспользуемся способностью основных браузеров генерировать SVG-изображения.
Scalable Vector Graphics (SVG) (масштабируемая векторная графика), язык, основанный на XML, разрабатываемый консорциумом W3C. SVG позволяет создавать анимацию для каждого элемента, позволяет управлять элементами с помощью скриптов через DOM, JavaScript, ECMAScript или с помощью любого другого скриптового языка, который поддерживается SVG-программой. В SVG разработчику доступны многие основные элементы, включая окружности, прямоугольники, эллипсы, многоугольники, кривые и текст. Так же как и в HTML, отображением элементов можно управлять с помощью стилей (CSS2), либо напрямую с помощью атрибутов.
Наша задача фактически сводится к созданию SVG-разметки, которой мы заменим текст в нужных нам ячейках.
-
<style type="text/css">
-
table.preview { border-collapse: collapse; }
-
-
table.preview td
-
{
-
font-family: verdana;
-
font-size: 12px;
-
color: #000;
-
padding: 5px;
-
border: solid 1px #d1d1d1;
-
text-align: center;
-
vertical-align: middle;
-
background: #fff;
-
}
-
-
table.preview td.vertical
-
{
-
writing-mode: tb-rl;
-
filter: flipH flipV;
-
}
-
style>
-
-
<table class="preview">
-
<tr>
-
<td colspan="3">Сроки наблюдения, сутtd>
-
<td>3td>
-
<td>6td>
-
tr>
-
<tr>
-
<td rowspan="12" class="vertical">Содержание основных клеточных элементов, %td>
-
<td rowspan="3" class="vertical">Нейтрофилыtd>
-
<td>Хлоргексидинtd>
-
<td>49.3td>
-
<td>31.5td>
-
tr>
-
<tr>
-
<td>Левосинtd>
-
<td>43.4td>
-
<td>25.3td>
-
tr>
-
<tr>
-
<td>Левосин + прополисtd>
-
<td>32.5td>
-
<td>22.3td>
-
tr>
-
<tr>
-
<td rowspan="3" class="vertical">Макрофагиtd>
-
<td>Хлоргексидинtd>
-
<td>1.0td>
-
<td>1.4td>
-
tr>
-
<tr>
-
<td>Левосинtd>
-
<td>2.1td>
-
<td>1.3td>
-
tr>
-
<tr>
-
<td>Левосин + прополисtd>
-
<td>4.1td>
-
<td>3.8td>
-
tr>
-
<tr>
-
<td rowspan="3" class="vertical">Лимфоцитыtd>
-
<td>Хлоргексидинtd>
-
<td>1.1td>
-
<td>3.5td>
-
tr>
-
<tr>
-
<td>Левосинtd>
-
<td>1.9td>
-
<td>2.9td>
-
tr>
-
<tr>
-
<td>Левосин + прополисtd>
-
<td>6.6td>
-
<td>2.7td>
-
tr>
-
<tr>
-
<td rowspan="3" class="vertical">Фибробластыtd>
-
<td>Хлоргексидинtd>
-
<td>1.0td>
-
<td>1.0td>
-
tr>
-
<tr>
-
<td>Левосинtd>
-
<td>1.8td>
-
<td>2.3td>
-
tr>
-
<tr>
-
<td>Левосин + прополисtd>
-
<td>4.1td>
-
<td>3.9td>
-
tr>
-
table>
-
<script type="text/javascript">
-
function GetVerticalLayout()
-
{
-
var fontFamily = "verdana";
-
var fontSize = 12;
-
-
var notIE = !(navigator.appVersion.indexOf("MSIE") != -1 && navigator.systemLanguage);
-
var supportSVG = document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#SVG", "1.1");
-
-
if (notIE && supportSVG)
-
{
-
var td = document.getElementsByTagName("td");
-
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, + text + "";
-
td[i].replaceChild(obj, td[i].firstChild);
-
}
-
}
-
}
-
}
-
-
window.onload = GetVerticalLayout();
-
Если браузер поддерживает SVG, то в соответствующих ячейках текст отобразится должным образом. В Internet Explorer замену не производим, так как для него существует упомянутое выше простое решение, кроме того, для отображения SVG в IE нужны внешние плагины.
Источник: http://perkoka.ru/
Комментарии
Отправить комментарий