Box Formatting
Boxes are rectangular containers with optional borders and padding. They
align their content either horizontally or vertically, and can justify that content
in flexible ways.

View on YouTube
HBoxes
Enclose content in a horizontally aligned box using the
HBox
formatter.
Outline
=
new
Edge
(
Gap
*
0.5, 0,
OutColor
);
DigitBox
(
i
)
=
HBox
(
null
,
null
,
new
Edge
(0,
Gap
)) {
Background
:
Colors
.
Green
;
TextColor
:
Colors
.
White
;
HAlign
:
Center
;
Space
;
i
;
Space
;
};
HBoxSet
=
HBox
(
null
,
null
,
Outline
) {
VAlign
:
Center
;
DigitBox
(
each
'A'
..
'C'
);
};
A
B
C
VBoxes
Enclose content in a vertically aligned box using the
VBox
formatter.
VBoxSet
=
VBox
(
null
,
null
,
Outline
) {
HAlign
:
Center
;
DigitBox
(
each
1
..
3);
};
1
2
3
Separation
Space between each element can be added with the
Separation
property.
BoxesWithSeparation
=
Paragraph
{
HBoxSet
{
Separation
:
Gap
;
};
Space
;
VBoxSet
{
Separation
:
Gap
;
};
};
A
B
C
1
2
3
Separators
New separator elements can be automatically added between each existing element of the box by
using the
Separator
property. Notice that the same separator revision is used to modify two
different box formatters.
PlusEquals
=
{
Separator
:
" + "
;
LastSeparator
:
" = "
;
};
BoxesWithSeparators
=
Paragraph
{
VBoxSet
PlusEquals
;
Space
;
HBoxSet
PlusEquals
;
};
1
+
2
=
3
A
+
B
=
C
Justification
Change the justification of items inside the box using the
Justify
property.
JustifiedBox
=
HBox
(50%,
null
,
Outline
) {
Justify
:
Justifiers
.
SpaceBetween
;
1
..
5
step
1;
};
1
2
3
4
5
Justification Examples
Use a loop to create a chart of all the
Justify
options.
JustifiedBoxes
=
VBox
{
Separation
:
1%;
foreach
(
var
j
in
Justifiers
)
{
HBox
{
HBox
(20%) {
HAlign
:
Right
;
Margin
:
PadR
(2%);
j
};
HBox
(50%,
null
,
Outline
) {
Justify
:
j
;
1
..
5
step
1;
};
}
}
};
None
1
2
3
4
5
Start
1
2
3
4
5
End
1
2
3
4
5
Center
1
2
3
4
5
SpaceBetween
1
2
3
4
5
SpaceAround
1
2
3
4
5
SpaceEvenly
1
2
3
4
5
Margins
Use the
Margin
property to put distance between the box and adjacent content.
MarginPadding
=
HBox
(
null
,
null
,
new
Edge
(0.5%, 0,
OutColor
)) {
HBox
{
Margin
:
Gap
;
Background
:
90%;
" Inner box with outside margin "
;
};
};
Inner box with outside margin
Margin Examples
Here are some examples of different combinations of
Margin
settings.
MarginBox
(
name
,
l
,
t
,
r
,
b
)
=
HBox
(
null
,
null
,
new
Edge
(0.5%, 0,
OutColor
)) {
HBox
{
Margin
:
new
Thickness
(
l
,
t
,
r
,
b
);
Background
:
90%;
Space
;
name
;
Space
;
};
};
BoxesWithMargins
=
Paragraph
{
Separator
:
Space
*
4;
MarginBox
(
"LTRB"
,
Gap
,
Gap
,
Gap
,
Gap
);
MarginBox
(
"T"
, 0,
Gap
, 0, 0);
MarginBox
(
"B"
, 0, 0, 0,
Gap
);
MarginBox
(
"L"
,
Gap
, 0, 0, 0);
MarginBox
(
"R"
, 0, 0,
Gap
, 0);
MarginBox
(
"LR"
,
Gap
, 0,
Gap
, 0);
MarginBox
(
"TB"
, 0,
Gap
, 0,
Gap
);
};
LTRB
T
B
L
R
LR
TB
Padding
Set the border padding using the Padding parameter of the
Edge
constructor. This puts distance
between the border and its contents.
EdgePadding
=
HBox
(
null
,
null
,
new
Edge
(0.5%,
Gap
,
OutColor
)) {
"Padding between content and edge"
;
};
Padding between content and edge
Padding Examples
Here are some examples of
Border
padding applied in different combinations.
PaddingBox
(
n
,
l
,
t
,
r
,
b
)
=
HBox
(
null
,
null
,
new
(
new
(1,
l
),
new
(1,
t
),
new
(1,
r
),
new
(1,
b
)
)) {
HBox
{
Background
:
90%;
Span
{
Space
;
n
;
Space
};
};
};
BoxesWithPadding
=
Paragraph
{
Separator
:
Space
*
4;
PaddingBox
(
"LTRB"
,
Gap
,
Gap
,
Gap
,
Gap
);
PaddingBox
(
"T"
, 0,
Gap
, 0, 0);
PaddingBox
(
"B"
, 0, 0, 0,
Gap
);
PaddingBox
(
"L"
,
Gap
, 0, 0, 0);
PaddingBox
(
"R"
, 0, 0,
Gap
, 0);
PaddingBox
(
"LR"
,
Gap
, 0,
Gap
, 0);
PaddingBox
(
"TB"
, 0,
Gap
, 0,
Gap
);
};
LTRB
T
B
L
R
LR
TB
Border Radius
Rounded corners can be specified using the
BorderRadius
property.
RoundedBorders
=
HBox
(
null
,
null
,
new
Edge
(1%, 3%,
Colors
.
Blue
)) {
BorderRadius
:
Gap
*
2;
TextHeight
:
200%;
HAlign
:
Center
;
"Rounded Corners"
;
};
Rounded Corners
Border Radius Examples
Here are some examples of rounded corners with different values for each corner.
Chicklet
(
text
)
=
HBox
(
null
,
null
,
new
Edge
(0.5%, 0,
Colors
.
Blue
)) {
TextHeight
:
200%;
HAlign
:
Center
;
Background
:
Colors
.
AliceBlue
;
Space
;
text
;
Space
;
};
AllChicklets
=
Paragraph
{
Separator
:
Space
*
3;
Chicklet
(
"Rounded"
) {
BorderRadius
:
Gap
};
Chicklet
(
"Flat"
) {
BorderRadius
:
new
Size
(2
Gap,
Gap
)};
Chicklet
(
"TL-BR"
) {
BorderRadius
:
new
BorderRadius
(
Gap
, 0,
Gap
, 0)
};
Chicklet
(
"Top"
) {
BorderRadius
:
new
BorderRadius
(
Gap
,
Gap
, 0, 0)};
Chicklet
(
"Right"
) {
BorderRadius
:
new
BorderRadius
(0,
new
Size
(
Gap
, 2
Gap
),
new
Size
(
Gap
, 2
Gap
), 0)};
};
Rounded
Flat
TL-BR
Top
Right
Background
The
Background
property sets the fill pattern for the box.
Back
=
new
RadialGradient
(20%, 30%, 20%, 30%, 20%, 40%,
[
new
(0,
Colors
.
White
),
new
(100%,
Colors
.
LightGreen
)]
);
BoxWithBackground
=
HBox
(
null
,
null
,
new
Edge
(0.5%, 1%)) {
Background
:
Back
;
BorderRadius
:
Gap
;
TextHeight
:
150%;
" Start "
;
};
Start
Shadows
Use the
Shadow
property to add a raised look to a box.
ShadowBox
=
BoxWithBackground
{
Shadow
:
new
Edge
(0.4%, 0,
Colors
.
DarkGray
);
};
Start