Ответить на комментарий
Вертикальный текст в ячейках
Необходимо, чтобы текст в ячейках с классом "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>3</td>
-
<td>6</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>
-
</tr>
-
<tr>
-
<td>Левосин</td>
-
<td>43.4</td>
-
<td>25.3</td>
-
</tr>
-
<tr>
-
<td>Левосин + прополис</td>
-
<td>32.5</td>
-
<td>22.3</td>
-
</tr>
-
<tr>
-
<td rowspan="3" class="vertical">Макрофаги</td>
-
<td>Хлоргексидин</td>
-
<td>1.0</td>
-
<td>1.4</td>
-
</tr>
-
<tr>
-
<td>Левосин</td>
-
<td>2.1</td>
-
<td>1.3</td>
-
</tr>
-
<tr>
-
<td>Левосин + прополис</td>
-
<td>4.1</td>
-
<td>3.8</td>
-
</tr>
-
<tr>
-
<td rowspan="3" class="vertical">Лимфоциты</td>
-
<td>Хлоргексидин</td>
-
<td>1.1</td>
-
<td>3.5</td>
-
</tr>
-
<tr>
-
<td>Левосин</td>
-
<td>1.9</td>
-
<td>2.9</td>
-
</tr>
-
<tr>
-
<td>Левосин + прополис</td>
-
<td>6.6</td>
-
<td>2.7</td>
-
</tr>
-
<tr>
-
<td rowspan="3" class="vertical">Фибробласты</td>
-
<td>Хлоргексидин</td>
-
<td>1.0</td>
-
<td>1.0</td>
-
</tr>
-
<tr>
-
<td>Левосин</td>
-
<td>1.8</td>
-
<td>2.3</td>
-
</tr>
-
<tr>
-
<td>Левосин + прополис</td>
-
<td>4.1</td>
-
<td>3.9</td>
-
</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,<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);
-
}
-
}
-
}
-
}
-
-
window.onload = GetVerticalLayout();
-
</script>
Если браузер поддерживает SVG, то в соответствующих ячейках текст отобразится должным образом. В Internet Explorer замену не производим, так как для него существует упомянутое выше простое решение, кроме того, для отображения SVG в IE нужны внешние плагины.
Источник: http://perkoka.ru/