0. Постановка проблемы

 

Работая с документами формата HTML (в частности, на веб-сайтах), я пришёл к выводу, что требуется расширение языка разметки HTML на графические форматы.

В настоящее время графические объекты вставляются в HTML-документ двумя способами. Во-первых, как внешние посредством элемента <IMG SRC=источник> (вариант - элемент <OBJECT> ), когда рисунок не является частью документа. Во-вторых, как внутренний код посредством атрибута TYPE="/IMAGE"; при этом рисунок опять же выпадает из языка разметки.

Похоже, настала пора внедрять рисунки не просто в документ, а и в сам язык разметки, при желании структурируя само изображения и распространяя на него тем самым DOM-структуру - мощное средство оперирования данными в документе.

Предлагается вариант расширения языка HTML на графически объекты.

 

1. Векторная графика

 

Работа с векторной графикой может быть построена по образцу элемента <AREA>. А именно, в элемент <IMG> добавляются атрибуты: SHAPE со значениями RECT, CIRCLE, POLY, LINE, ARC (для прямоугольника, круга, многоугольника, линии и дуги); COORDS для указания координат и, возможно, COLOR для указания цвета границы (хотя этот атрибут можно задать через стиль). Новыми здесь являются атрибуты LINE для обозначения линии в паре с атрибутом COORDS="x_нач, y_нач, x_кон, y_кон" и ARC  с атрибутом COORDS="x_нач, y_нач, x_кон, y_кон, отклонение" (максимальное отклонение дуги от базовой линии). (Хотя, возможно, атрибут LINE излишний, поскольку может быть выражен через атрибут POLY с двумя парами значений в COORDS.)

Тогда, скажем, японский флаг в верхнем углу документа (взятый для примера как одно из самых простых графических обозначений) может быть изображён помещением в соответствующее место следующего кода:

 

<IMG SHAPE=RECT COORDS="0, 50, 150, 0" STYLE="position: relative; color: black; background-color: white; border-width: thin">

<IMG SHAPE=CIRCLE COORDS="75, 25, 20" STYLE="position: relative; background-color: red; border-width: none">

 

А вот предполагаемый код для рисования перечёркнутой окружности:

 

<AREA NAME=имя>

<IMG SHAPE=CIRCLE COORDS="10, 10, 10">

<IMG SHAPE=LINE COORDS="0, 0, 10, 10" STYLE="position: relative">

</AREA>

 

(Элемент AREA будет объяснён далее.)

 

2. Растровая графика

 

Понятно, что векторной графикой можно изобразить лишь достаточно примитивные вещи; даже простое изображение обычно требует растрового представления.

Растр в своей основе представляет собой таблицу; поэтому логично было бы использовать для его представления элемент TABLE с подчинёнными элементами TR и TD (последний при этом становится неконтейнерным, поскольку текста внутри нет); границы ячеек растра, разумеется, нулевой толщины. Для этого следует элемент IMG, наоборот, сделать контейнерным, т.е. способным содержать подчинённые элементы: <IMG>...</IMG>.

 

<IMG>

<TABLE>

  <TR HEIGHT=высота>

    <TD ROWSPAN=22 BGCOLOR=цвет/>

    ...

    <TD BGCOLOR=цветWIDTH=ширина/>

  </TR>

  ...

  <TR>

    <TD COLSPAN=8 BGCOLOR=цвет/>

    ...

    <TD BGCOLOR=цвет/>

  </TR>

</TABLE>

</IMG>

 

3. Тиражирование графических элементов

 

Рисунок может не только внедряться "живьём", но и вставляться посредством ссылки. Скажем, выше приведён пример, когда два элемента IMG помещены внутрь элемента AREA с атрибутом NAME. Предполагается, что AREA группирует подчинённые элементы в единый комплекс; этот комплекс может быть вызван посредством кода <IMG SRC="#имя">, где имя - это имя комплекса AREA. Использование <IMG SRC="#имя"> позволяет размещать один и тот же графический элемент в разных местах документа.

Одним из важных применений такого метода может быть воспроизведение экзотических символов, например, из старинных текстов. Скажем, приведённую выше перечёркнутую окружность можно считать изображением буквы Ø. Для использования встроенной графики в таком качестве имеет смысл снабдить элемент IMG ещё атрибутом SIZE со значениями либо "ширина, высота" (т.е. совмещение пары "WIDTH, HEIGHT"), либо со специальным значением FONT, означающим, что рисунок по ширине и высоте вписывается в базовый размер символа текущего шрифта.

 

4. Дополнительные рассуждения

 

В отношении растровых рисунков можно предвидеть очевидное возражение: внедрять в документ такую графику нецелесообразно, поскольку обработка многочисленных тэгов табличного типа должно сильно затормозить его загрузку. Ну, во-первых, на это можно сказать, что в иных документах (например, в письмах) рисунки записываются в коде Base64, по рациональности тоже не особенно оптимальном, но достаточно легко обрабатываемым. Во-вторых, всё хорошо в меру; широкоформатные фотографии с большим разрешением, действительно, вряд ли имеет смысл запихивать внутрь документа, тогда как схемы, эмблемы, иконки и т.п. вполне можно туда поместить. Особенно это будет рационально для одноразовых рисунков, т.е. предназначающихся только для данного документа, которые не имеет смысла помещать отдельно.

В отношении же рисунков вообще можно возразить, что создание графических кодов - это весьма трудоёмкая работа. Но ведь никто и не предлагает создавать такие коды вручную; как только стандарт графических кодов будет утверждён, возникнут и программы для перевода графики в коды гипертекста.

Внедрение внуренней графической разметки для гипертекстовых документов таит в себе новые большие возможности для манипулирования рисунками. Главным моментом новизны становится разделение рисунка на составные части и всключение этих частей в структуру DOM.

Например, следующим образом можно схематически нарисовать рожицу,  ухмыляющуюся при наведении на неё курсора мыши.

 

<IMG SHAPE=CIRCLE COORDS="50, 50, 50" STYLE="border-width: thin">

<IMG SRC="#point_5" STYLE="left: 40; top: 60"><IMG SRC="#point_5" STYLE="left: 60; top: 60">

<IMG SHAPE=ARC COORDS="30, 20, 80, 20, 0" STYLE="position: relative; background-color: black" ONMOUSEOVER="VBSCRIPT: Me.coords.height = 10" ONMOUSEOUT="VBSCRIPT: Me.coords.height = 0">

<!-- Предполагается, что coords.height - это высота дуги, 5-я позиция атрибута COORDS -->

 

...

<IMG SHAPE=CIRCLE COORDS="5, 5, 5" STYLE="position: relative; background-color: black" NAME="point_5">

 

Кроме того, встроенный в документ рисунок нельзя будет ни сохранить, ни "личить", т.е. получить его адрес, чтобы дать где-то в другом документе на него ссылку (актуально для некоторых озабоченных товарищей).