| Необходимо, чтобы текст в ячейках с классом "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-разметки,
которой мы заменим текст в нужных нам ячейках.
как это выглядит:
| Сроки наблюдения, сут |
3 |
6 |
| Содержание основных клеточных элементов, % |
Нейтрофилы |
Хлоргексидин |
49.3 |
31.5 |
| Левосин |
43.4 |
25.3 |
| Левосин + прополис |
32.5 |
22.3 |
| Макрофаги |
Хлоргексидин |
1.0 |
1.4 |
| Левосин |
2.1 |
1.3 |
| Левосин + прополис |
4.1 |
3.8 |
| Лимфоциты |
Хлоргексидин |
1.1 |
3.5 |
| Левосин |
1.9 |
2.9 |
| Левосин + прополис |
6.6 |
2.7 |
| Фибробласты |
Хлоргексидин |
1.0 |
1.0 |
| Левосин |
1.8 |
2.3 |
| Левосин + прополис |
4.1 |
3.9 |
| Сроки
наблюдения,
сут | 3 | 6 | | Содержание основных клеточных элементов,
% | Нейтрофилы | Хлоргексидин | 49.3 | 31.5 | | Левосин | 43.4 | 25.3 | | Левосин
+
прополис | 32.5 | 22.3 | | Макрофаги | Хлоргексидин | 1.0 | 1.4 | | Левосин | 2.1 | 1.3 | | Левосин
+
прополис | 4.1 | 3.8 | | Лимфоциты | Хлоргексидин | 1.1 | 3.5 | | Левосин | 1.9 | 2.9 | | Левосин
+
прополис | 6.6 | 2.7 | | Фибробласты | Хлоргексидин | 1.0 | 1.0 | | Левосин | 1.8 | 2.3 | | Левосин
+
прополис | 4.1 | 3.9 |
Если браузер поддерживает SVG, то в соответствующих ячейках текст отобразится
должным образом. В Internet Explorer замену не производим, так как для него
существует упомянутое выше простое решение, кроме того, для отображения SVG в IE
нужны внешние плагины.
|
|
