The string component supplies the form with additional information. The below screenshot shows two
responsive sample strings that contain a link
and a current date (e.g. 2019-12-11) in ISO 8601
date format plus 21 days.
The structure view below shows the initial string component as created by
from the toolbar with its symbol, its label (its visual content), its properties cell, and its
tooltip cell. The string type is specified in the
The string component of type "String" represents text with no function, but with an optional tooltip.
The string component of type "Link" represents an HTML link with an optional tooltip.
The string component below is a link with a tooltip.
The URL is set in the resizable properties dialog below (opened by double-clicking the properties cell).
The link styling can be specified in the settings view.
The string component of type "Date" represents the current date with an optional offset in days and an optional
The below string component specifies a current date
(e.g. 2019-12-11) in ISO 8601
date format with an offset of 21 days,
e.g. for a term of payment.
A date offset (-365 ≤ days ≤ 365) can be entered in a properties dialog (opened by double-clicking the
properties cell) to define a relative date in the future or past (negative number).
The date format (default is year-month-date ISO 8601) can be set in the
The string component of type "Container"
- wraps a long string in a multi-line HTML string, or
- embeds substrings with different properties in a single-line
or multi-line HTML string.
Its element symbol is marked with an arrow to indicate that it is a container. The arrow is grayed
if the container is empty.
Below is a sample string container with a link and date. A double-click on the string element symbol expands
or collapses the container view. This approach allows to build strings of any complexity, to decompose them into
manageable building blocks, and to see all properties at a glance.
The expanded container shows the substrings that build the sample string. The substrings can be
separated by leading or trailing blanks.
The sample string was built starting
with an empty string container. Then a …
… string component was dragged and dropped
from the toolbar on the container symbol.
Adding another three string components …
… built the initial container content.
The first substring was turned into a link
… and supplied with content.
The second substring (leading blank).
The third substring was turned into a date
A closing paren and a period complete
A "\-" can be entered where hyphenation is
Hyphens are indicated by grayed dashes
and turned into ­ in the HTML code.
In the layout view, the string container can be styled and
set up multi-line or
single-line. A single-line string can be left-, center-,
Multi-line string container
A string container is multi-line if its height is larger than 1
unit in the
layout view (default).
The multi-line container as initially laid out
by the drawing tool in the layout
Mouse hover displays the container
and content edges.
A mouse click on the container near its border
selects the container and displays …
… the resize handles. A mouse click/drag
near the border moves the container.
The resized container and line-height. The black
circle is the line-height resize handle.
A mouse click on one or more (shift-key
pressed) strings selects content.
A double-click on a substring or a selection ….
… opens its properties dialog.
The container with a border (a rectangle was
dragged and dropped from the toolbar).
A screenshot snippet from Safari. Rendering is a bit
smaller to more predictably fit the string in the container.
Single-line string container
A string container is single-line if its height is set equal to or smaller than 1
unit in the
A multi-line string (height is 1.1 units) is turned
in its single-line equivalent (1 unit) below.
The resize handles allow to change the
container height and thus the font size.
The alignment is indicated by the horizontal
positions of the resize handles.
A double-click on a container or a selection
near a border opens the properties dialog.