Module:Block diagram/doc

This function takes a long string of text and tags in angle brackets to output a set of HTML  elements. This allows you to block out a diagram with arbitrarily placed rectangular elements. The main point of the module is that it allows some attributes to be applied in a "sticky" manner, so that once you set the color or position of a div, the divs coming after it will have the same values unless you change them. Though the text may still be pretty lengthy, it is much shorter than a full specification of all the divs.

Parameters

 * width and height are the width and height of the total block diagram output.
 * nowiki returns the output as nowiki source text for debugging or copying.
 * debug may return some debuglog data (very little use except when making changes to the module)
 * The first unlabelled parameter contains a large amount of text and tags to be interpreted as described below.
 * Warning: if your text contains or may in the future contain an = character, you must begin this text with 1=

Tags

 * The module takes several html attribute names and sets them to the value given. The colon and semicolon you'd use in the style must not be given.


 * The tags currently supported are left, right, top, bottom, border-style, border-width, border-color, color, background-color, text-align, vertical-align, and vcentertext


 * Some values are altered by the module:
 * A "%" is automatically added to the position attributes. Px values are not supported.  This is intentional --- the intent is that the initial width and height parameters can be changed without having to rewrite the contents.
 * The right and bottom values are given as percents from the left or top, not from the right or bottom as in the HTML. This means that boxes from top 60 to bottom 80 and top 80 to bottom 100 will adjoin each other.


 * Vertical centering is special, and relies on Template:vertical center to position the text within the boxes with two additional divs inside the boxes. That template accepts a third parameter that applies to the outer div of that template, which can be fine-tunes with vcentertext.  To be clear, this is a dirty way of solving the last few pixels of misalignment encountered with small text in small boxes.


 * Don't forget that you can include and elements, or even images, in your text.  This allows you to cover any eventualities not yet implemented as tags here.  Only the special tags listed above are interpreted by the module; normal Wiki tags will be ignored by it, so they should be interpreted properly.  [frame:preprocess is used on the module output]


 * Currently no effort is made to try to figure out how to size the text to fit in the boxes - you have to make sure the diagram is big enough or the text small enough on your own.


 * You may find it convenient to wrap up the output from this module in Template:Pseudo image, which can make it look like a thumbnail preview, complete with link to a file or page with more detail about its contents.

Example
is produced by:

In this example:


 * Border-width 0 0 0 1px is applied to two divs at 30 and 70 which inherit the default 0 and 100 top and bottom values. These include a   each because if there is no text at all nothing is drawn (so you can specify multiple tags without drawing a div every time).


 * The next two divs are completely specified on top, bottom, left, right. The background-color sets the shade of each box.  Wikilinks are brought in with the text itself.


 * Each row uses a and that carries on to several divs in the row until they are reset.