Making It Look Good

Now that you know how tags work, it's time to make your output look the way you want. This chapter covers styling text, choosing colours, and arranging content in boxes. By the end you'll be able to build something like this:

Ada Lovelace Mathematician and writer First published program: 1843

Two ways to hold content: span and box

Most of the styling in this chapter works with either of two tags:

A span tag styles a stretch of text within the flow of the surrounding text. If the text wraps onto the next line, the span wraps with it. Use it to make a word bold, or a heading big.
A box tag puts its contents in a rectangle. The rectangle sits in the flow like a single large character, and its contents stay inside it. Use a box when you want borders, a fixed size, or a block of content kept together.

print('''
Some text with a <span bold=true {bold span}> in it.</p>
Some text with a <box {box}> in it.
''')

Some text with a bold span in it. Some text with a box in it.

Styling text

Field	Example	Effect
bold	`bold=true`	Bold text
italic	`italic=true`	Italic text
underline	`underline=true`	Underlined text
size	`size=24,pt`	Larger text
font	`font={monospace}`	Typewriter-style text

You can combine as many as you like in one tag:

<span bold=true italic=true size=18,pt {Important!}>

Sizes and units

The size field, like every field that measures a distance, takes a number followed by its units:

Units	Meaning	Example
px	pixels (used if you give no units)	`size=20` or `size=20,px`
pt	points, as in a word processor	`size=12,pt`
em	a multiple of the current text size	`size=2,em` (twice as big)
%	a percentage (of the containing area, for widths and heights)	`width=50,%`

em is handy because it scales with the text around it. A box with a margin of 1,em stays well proportioned whatever the text size.

In C's printf, % has a special meaning, so write 50,%% to print 50,%.

Fonts

The font field takes a font name, as text. The safest choices are the general font families, which always map to something suitable:

{serif}
{sans-serif}
{monospace}
{fantasy}

Colour

Two fields control colour:

color sets the colour of the text.
backgroundColor sets the colour behind it.

You can name a colour, as text:

<span color={red} {Danger!}>
<span backgroundColor={yellow} color={black} {highlighted}>

There are about 150 colour names to choose from, including obvious ones like {red} and {navy}, and more exotic ones like {honeydew} and {seagreen}. These are the same names used on the web, so any list of "SVG colour keywords" or "CSS colour names" will show you them all.

For exact control, give the colour as a number instead. Colour numbers are written in hexadecimal: an x followed by six digits, two each for the amount of red, green and blue (from 00 for none to FF for full):

<span color=xFF0000 {pure red}>
<span color=x2E8B57 {sea green}>

Colour pickers online usually show colours like #2e8b57. To use one in ioL, swap the # for an x and write the letters in UPPERCASE: x2E8B57. And because it's a number, not text, don't put braces around it.

Boxes

Borders

border sets the thickness of the line around a box, and borderColor its colour. A border of 0 removes it.

<box border=3 borderColor={orange} {A thick orange border}>

To give one side a different thickness, use borderTop, borderRight, borderBottom or borderLeft.

Margin and spacing

Two fields add empty space around a box's contents:

margin is the space inside the border, between the border and the contents.
spacing is the space outside the border, between the box and whatever is around it.

If you've seen web design before, watch out: what ioL calls margin, the web calls padding, and what ioL calls spacing, the web calls margin.

Both have versions for individual sides, such as marginLeft or spacingTop.

Width, height and alignment

A box normally grows to fit its contents. Set width and height to choose its size instead:

<box width=300 height=80 border=1 {300 by 80 pixels}>
<box width=50,% border=1 {half as wide as the space it's in}>

align positions the contents inside the box. Give it a horizontal value ({left}, {center}, {right} or {justify}), and optionally a vertical one ({top}, {middle} or {bottom}):

<box width=150 height=80 border=1 align={center},{middle} {dead centre}>

Styling the whole console

The console itself can be styled too. Print these at the start of your program:

<console.title {My Program}>
<console.backgroundColor {white}>
<console.color {black}>

The first sets the window's title. The others set the colours for everything in the console that doesn't choose its own. These tags look a little different from the ones so far: they change a field of something that already exists (the console), rather than creating something new. You'll learn how that works in the chapter on instance names. For now, just use them as shown.

Putting it all together

Here's the program behind the card at the top of this chapter:

print('''
<console.title {My Profile}>
<console.backgroundColor {white}>
<console.color {black}>

<box
    width=20,em  border=3  borderColor=x2E8B57
    margin=1,em  spacing=1,em
    backgroundColor={honeydew}  align={center}
{
    <span size=24,pt bold=true color=x2E8B57 {Ada Lovelace}></n>
    <span italic=true {Mathematician and writer}></p>
    <span font={monospace} {First published program: 1843}>
}>
''')
input()

Try it

Make a card like the one above for yourself, or for a famous person you admire.
Find a colour scheme you like using an online colour picker, and use its colours in your card.
Make a row of three boxes of different colours, each exactly 100 pixels square, with their text centred both ways.
Give the console a dark background and light text. Do your boxes still look good? What do you need to change?