List of articles   Colour designations   Choose language



Attach broken line to objects

Let's look at typical situation of drafting database scheme.

We put "City" and "Street" in cells of invisible table to set them in page.

idCity (FK)

It's required to fasten a broken line to tables.

I offer to enter tags line , ld (origin of designations: ld = line division) and pack with attribute host , which equal to attribute id of tag td.

      <table id="id1">
        <caption> Street      </caption>
        <tr><td>  idStreet    </td></tr>
        <tr><td>  idCity (FK) </td></tr>
        <tr><td>  name        </td></tr>
      <table id="id2">
        <caption> City   </caption>
        <tr><td>  idCity </td></tr>
        <tr><td>  name   </td></tr>

  <pack host="id1" align="side">
  <pack host="id2" dot="last" align="side">
  <ld x="0" y="0"></ld>
  <ld x="0" y="50"></ld>
  <ld x="100" y="50"></ld>
  <ld x="100" y="100"></ld>

Each section specifies displacement of coordinates of "pencil" (by which line "is drawing") from last point of previous section. If there is no ld inside tag line, then objects are connected by one direct line. If last point of last section does not coincide with object, to which line is attached, then whole line is scaled.

Tag pack ties a point of broken line to object (in this case - to table). Identifier id (if it's absent - serial number, counted from one) of a tied point is specified in attribute dot. Special values of attribute dot are first and last, which specifies, that first or last point of broken line should be tied.

It's possible to fasten broken line (using tag pack) not only for the ends, but also for two intermediate points, or for end and intermediate points.

There are two reasons for existence of tag pack

Attribute align of tag pack specifies, where the end of tied section will be located, and accepts one of the following values: auto (default value), horside, verside, center, into. Dotted line shows an invisible part of a section.

<pack align=auto>
<pack align=horside>
<pack align=verside>
<pack align=center>
<pack align=into>

Attach broken line to picture

It's necessary to specify coordinates of picture's pixel through blank in attribute align of tag pack (beginning of coordinates is left bottom corner of picture), that end of broken line points to this pixel (will be attached to it).

<img id="tiger" src= >

  <pack host="tiger" dot="last"
                     align="110 135">
  <ld x="88"         ></ld>
  <ld x="177" y="173"></ld>

Explanatory inscriptions

Explanatory inscriptions for points and sections are specified in attributes section-note and point-note of tag ld. Location of inscription is clear in the following pictures.

<ld section-note="open">
<ld point-note="open">

Explanatory inscriptions of beginning and end of sections are defined in attributes section-begin and section-end of tag ld.

<ld section-begin="parent"

Help, which pop-up, when mouse is over points and section, is defined in attributes section-title and point-title of tag ld. If roalover help for a point is not specified, then browser shows coordinates of point as roalover help.

<ld section-title="Open">
<ld point-title="Open">

Half-attached broken line

If broken line has only one tag pack, then broken line is tied to object only by one its node (point).

Put object into point of broken line

Any objects can be located in a broken line point (we name their enclosed objects further)

Location of object centre comparatively line point is still specified in attribute align, but it must be used in tag ld. Putting object into point of broken line allows to make compositions

and putting in cascade - to make very complex compositions, for example database schemes

Attach broken line to broken line

It's necessary to specify identifier id (if it's absent - serial number) of point of other broken line in attribute ptr of tag pack for that. Special values of attribute ptr are first and last, which specifies, that it's need to fasten to first or last point of other broken line.

If broken line has only one tag pack (i.e. is half-tied line), then it whole can be rotated by specification new position in attribute align of tag pack: median or antimedian.

<line id="id1">
  <ld></ld> ... <ld></ld>
  <pack host="id1" ptr="2" align="median" dot="first">
<line id="id1">
  <ld></ld> ... <ld></ld>
  <pack host="id1" ptr="2" align="antimedian" dot="first">

Graphic properties

Each tag ld (except for last) responds both for a point and for a section (last tag ld - only for a point).

Property color specifies colour of text in point and equal black by default.

Group of properties LINE

Case, when object, located in a point of broken line, may cover (including cover after drag-and-drop) other objects, located in nodes of the same broken line, is regulated by property line-push of tag line. Value yes means, that objects, intersecting with it, must be moved automatically by browser in a direction, which is clear in the following pictures (medians of respective angles is degisnated by green, direction of moving is designated by arrows). Default value is no.

Group of properties POINT

When contents of tag ld are empty, its property point-type specifies, what geometrical figure will be drawn in a point (this charactetistic is similarly to property list-style-type). Usual values of point-type are: none (default value), disc, circle, square, decimal. I offer to add: arrow (arrow in section end), barrow (backarrow, arrow in section beginning), botharrow (arrows in two section ends), star (asterisk), romb (rhombus), triangle (triangle), hex (hexagon), which will be necessary for writing scientific diagrams. And browser always draws whole (not half ! ) geometrical figure.

Properties point-color specifies colour of geometrical figure in a point. By default it's equal black.

Property point-scale specifies scale of geometrical figure in a point in millimeters (fractional part of number is separated from natural by mark "point") and accepts also special values thin (default value), medium, thick.

Group of properties SECTION

Property section-type specifies type of broken line section and accepts values: null (none) - invisible section, dotted, dashed, solid (default value), double (may be railway), groove, ridge. I offer to add value single as equal to solid, and also values wedge, bwedge, dwedge, bdwedge for drawing any out-going and in-coming line (they are necessary each time, when it's necessary to show, that some lines leave a plane of figure).

(if section-type=thin, then thin-to-medium,
if section-type=medium, then medium-to-thick, etc)
if section-type=thin, then medium-to-thin,
if section-type=medium, then thick-to-medium, etc)
(dottedwedge, wedge & dotted)
(backdottedwedge, backwedge & dotted)

Property section-color specifies colour of broken line section. By default it's equal black.

Property section-width specifies thickness of section in millimeters (fractional part of number is separated from natural by mark "point") and accepts also special values thin (default value), medium, thick.

Properties of group section are similar to properties of group border . And they are not depend of property background-color.

Beveled angles of broken line

Broken lines looks unpleasantly on some pictures - for example, imagine following picture with broken line (concept, showed in figure, is anti-GUI).

We add attribute spline=yes into tag ld for transformation one section into spline, because we already can draw broken line.

Adding this attribute into two next sections will give picture like following


tagattributedefault valuelist of possible values
packhost id
dot, ptr point_id, point_serial_number, first, last
alignauto; nullauto, horside, verside, center, into;
null, median, antimedian
"natural natural"
ldpoint-note, section-note any text
section-begin, section-end any text
point-title, section-title any text
splinenoyes, no

tagpropertydefault valuelist of possible values
lineline-pushnoyes, no
ldpoint-typenonenull (none), disc, circle, square, decimal, arrow, barrow, botharrow, star, romb, triangle, hex
point-color, section-color
blackaqva, black, blue, fuchsia, gold, gray, green, indigo, lime, maroon, navy, olive, orange, purple, red, silver, teal, violet, white, yellow, #FFFFFF
section-typesolidnull (none), dotted, dashed, single (solid), double, groove, ridge, triple, wedge, bwedge, dwedge, bdwedge
point-scale, section-widththinthin, medium, thick, float

Dmitry Turin

List of articles   Colour designations   Choose language