Tags and Fields

Plain text only gets you so far. To format text, draw boxes, add buttons, or do almost anything else in ioL, you use tags. This chapter explains how tags are written. The next chapter puts them to work.

---

Your first tag

print('<span bold=true {Here is some bold text}>')
input()

Here is some bold text

Everything from the < to the matching > is one tag. The console doesn't display the tag itself. Instead, it carries out the tag's instructions: in this case, show some text in bold.

Each tag is self-contained. There's no separate "closing tag": the text the tag applies to goes inside the tag itself, between braces.

The parts of a tag

Here's a bigger tag, spread over several lines with a comment explaining each part:

<                        <! 1. the start of the tag !>
  box                    <! 2. the tag type !>
  color={black}          <! 3. a field !>
  {What time is it?}     <! 4. the primary field !>
  visible=true           <! 5. another field !>
  rotate=7,{deg}         <! 6. a field with two values !>
>                        <! 7. the end of the tag !>

Normally you'd write it on one line:

<box color={black} {What time is it?} visible=true rotate=7,{deg}>

1. The start of the tag. A < tells the console that a tag is beginning.
2. The tag type comes first, straight after the <, and says what kind of tag this is. A box tag puts its contents in a rectangular box on the screen. Tag types are case-sensitive: box is a tag type, but Box and BOX aren't.
3. A field sets one property of the tag. The field's name goes on the left of the =, and its value on the right. Here the color field sets the text colour. Its value is in braces because it's text.
4. The primary field. This value has no name and no =. Every tag has one primary field that holds its main content, and a value without a field name goes there. For a box, the primary field is what the box contains.
5. Another field. visible says whether the box can be seen. Its value is true, with no braces, because it's a yes/no value rather than text.
6. A field with two values. rotate tilts the box. It takes a number and, optionally, the units to measure it in. The two values are separated by a comma.
7. The end of the tag. A > closes it.

All the fields other than the primary field are called secondary fields. Each tag type has its own set of fields. The Language Reference lists the fields each tag supports.

Rules for writing tags

Lay tags out however you like

As with ordinary text, the console doesn't care about spaces and line breaks inside a tag. Spaces around the = are fine too. The order of the fields doesn't matter either, except that the tag type must come first. These two tags do the same thing:

<span bold=true italic=true {Hello}>

<span
    {Hello}
    italic = true
    bold = true
>

In Python, triple-quoted strings make it easy to print a tag laid out over several lines:

print('''
<box
    border=2
    backgroundColor={lightyellow}
    color={black}
    {What is your name?}
>
''')
input()

Separate multiple values with commas

When a field has more than one value, put a comma between each pair. Leave a comma out, and the next value is no longer part of that field. Instead it goes into the primary field:

<box rotate=7,{deg} {Hello}>    <! rotated by 7 degrees, containing "Hello" !>
<box rotate=7 {deg} {Hello}>    <! oops: rotated by 7, containing "degHello" !>

The second box still rotates, because degrees happen to be the default unit. But {deg} ended up in the box as text. When two blocks of text end up next to each other like this, they're joined into one.

Put tags inside text

The text inside braces can contain tags of its own. This is how you format part of a block of text:

print('<box {Hello, <span bold=true {World}>!}>')

Hello, World!

Tags can be nested as deeply as you need: a box containing a box containing a span, and so on.

In fact, everything your program prints is treated as one big block of text, as if it were inside a pair of invisible braces. That's why you could print plain text in the last chapter, and why a stray } is an error: there's no block for it to close.

When a tag goes wrong

Get a tag type wrong, and the console reports it in the terminal:

print('<Box {Hello}>')

ioL | invalid reference | Not defined in reference scope: Box.

A value the console can't make sense of becomes the special value invalid. If it ends up in something displayed on screen, it appears as an invalid marker, so you can see where the problem is.

---

Try it

1. Print a sentence with one word in bold and another in italics (the italic field works just like bold).
2. Put a box inside another box. Then give the inner box rotate=-10,{deg}.
3. Take the box from step 2 and lay its tag out over several lines, one field per line, with a comment explaining each field.
4. Leave the comma out of a rotate field on purpose. What appears in the box? What appears in the terminal?