Вверх

Блог
 RSS лента

Помогите выиграть конкурс.
Займет не больше минуты!
ТЫЦ на ссылку

Ответить на комментарий

Вертикальный текст в ячейках

Необходимо, чтобы текст в ячейках с классом "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-разметки, которой мы заменим текст в нужных нам ячейках.

  1. <style type="text/css">
  2. table.preview { border-collapse: collapse; }
  3.  
  4. table.preview td
  5. {
  6. font-family: verdana;
  7. font-size: 12px;
  8. color: #000;
  9. padding: 5px;
  10. border: solid 1px #d1d1d1;
  11. text-align: center;
  12. vertical-align: middle;
  13. background: #fff;
  14. }
  15.  
  16. table.preview td.vertical
  17. {
  18. writing-mode: tb-rl;
  19. filter: flipH flipV;
  20. }
  21. </style>
  22.  
  23. <table class="preview">
  24. <tr>
  25. <td colspan="3">Сроки наблюдения, сут</td>
  26. <td>3</td>
  27. <td>6</td>
  28. </tr>
  29. <tr>
  30. <td rowspan="12" class="vertical">Содержание основных клеточных элементов, %</td>
  31. <td rowspan="3" class="vertical">Нейтрофилы</td>
  32. <td>Хлоргексидин</td>
  33. <td>49.3</td>
  34. <td>31.5</td>
  35. </tr>
  36. <tr>
  37. <td>Левосин</td>
  38. <td>43.4</td>
  39. <td>25.3</td>
  40. </tr>
  41. <tr>
  42. <td>Левосин + прополис</td>
  43. <td>32.5</td>
  44. <td>22.3</td>
  45. </tr>
  46. <tr>
  47. <td rowspan="3" class="vertical">Макрофаги</td>
  48. <td>Хлоргексидин</td>
  49. <td>1.0</td>
  50. <td>1.4</td>
  51. </tr>
  52. <tr>
  53. <td>Левосин</td>
  54. <td>2.1</td>
  55. <td>1.3</td>
  56. </tr>
  57. <tr>
  58. <td>Левосин + прополис</td>
  59. <td>4.1</td>
  60. <td>3.8</td>
  61. </tr>
  62. <tr>
  63. <td rowspan="3" class="vertical">Лимфоциты</td>
  64. <td>Хлоргексидин</td>
  65. <td>1.1</td>
  66. <td>3.5</td>
  67. </tr>
  68. <tr>
  69. <td>Левосин</td>
  70. <td>1.9</td>
  71. <td>2.9</td>
  72. </tr>
  73. <tr>
  74. <td>Левосин + прополис</td>
  75. <td>6.6</td>
  76. <td>2.7</td>
  77. </tr>
  78. <tr>
  79. <td rowspan="3" class="vertical">Фибробласты</td>
  80. <td>Хлоргексидин</td>
  81. <td>1.0</td>
  82. <td>1.0</td>
  83. </tr>
  84. <tr>
  85. <td>Левосин</td>
  86. <td>1.8</td>
  87. <td>2.3</td>
  88. </tr>
  89. <tr>
  90. <td>Левосин + прополис</td>
  91. <td>4.1</td>
  92. <td>3.9</td>
  93. </tr>
  94. </table>

  1. <script type="text/javascript">
  2. function GetVerticalLayout()
  3. {
  4. var fontFamily = "verdana";
  5. var fontSize = 12;
  6.  
  7. var notIE = !(navigator.appVersion.indexOf("MSIE") != -1 && navigator.systemLanguage);
  8. var supportSVG = document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#SVG", "1.1");
  9.  
  10. if (notIE && supportSVG)
  11. {
  12. var td = document.getElementsByTagName("td");
  13. var objElement = document.createElement("object");
  14.  
  15. for(i = 0; i < td.length; i++)
  16. {
  17. if (td[i].className.match(/vertical/i))
  18. {
  19. var text = td[i].innerHTML;
  20. var h = td[i].clientHeight;
  21. var w = td[i].clientWidth;
  22.  
  23. var obj = objElement.cloneNode(true);
  24. obj.height = (h > w) ? h : w;
  25. obj.type = "image/svg+xml";
  26. obj.width = fontSize + 2;
  27. 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>";
  28. td[i].replaceChild(obj, td[i].firstChild);
  29. }
  30. }
  31. }
  32. }
  33.  
  34. window.onload = GetVerticalLayout();
  35. </script>

Если браузер поддерживает SVG, то в соответствующих ячейках текст отобразится должным образом. В Internet Explorer замену не производим, так как для него существует упомянутое выше простое решение, кроме того, для отображения SVG в IE нужны внешние плагины.

Источник: http://perkoka.ru/

Ваша оценка: Пусто Средняя: 3 (2 голосов)
Чт, 11/19/2009 - 14:33 — X3M-Slider

Ответить

 
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. Beside the tag style "<foo>" it is also possible to use "[foo]".
  • Image links with 'rel="lightbox"' in the <a> tag will appear in a Lightbox when clicked on.
  • Image links from G2 are formatted for use with Lightbox2
  • Image links with 'rel="lightshow"' in the <a> tag will appear in a Lightbox slideshow when clicked on.
  • Links to HTML content with 'rel="lightframe"' in the <a> tag will appear in a Lightbox when clicked on.
  • Links to video content with 'rel="lightvideo"' in the <a> tag will appear in a Lightbox when clicked on.
  • Links to inline or modal content with 'rel="lightmodal"' in the <a> tag will appear in a Lightbox when clicked on.

Подробнее о форматировании
Главная | Портфолио | Услуги | Контакты | Блог