Text Layouts

Rows, columns, and els are great, but what if you want some good ol'fashion text in your app?

Well, we have text, but we can go farther.

A paragraph

A paragraph will layout all children as wrapped, inline elements.

paragraph MyParagraphStyle [] 
    [ text "lots of text ....", el Bold [] (text "this is bold"), text "lots of text ...."]

This is really useful when you want to markup text by having some parts be bold, or some be links, or whatever you so desire.

Also, if a child element has alignLeft or alignRight, then it will be moved to that side and the text will flow around it, (ah yes, float behavior).

This makes it particularly easy to do something like a dropped capital.

paragraph MyParagraphStyle [] 
    [ el DropCap [ alignLeft, padding 5 ] (text "S")
    , text "lots of text ...."
    ]

A textLayout

Now that we have a paragraph, we need someway to attach a bunch of paragraph's together.

A textLayout is actually very similar to column, which is great because usually when doing text layout we want to have a column of paragraphs.

The main difference between a column and a textLayout is that textLayout will flow the text around elements that have alignRight or alignLeft, just like we just saw with paragraph.

So, in the following example, we have a textLayout where one child has alignLeft.

textLayout MyText [ spacing 10, padding 10 ]
  [ paragraph Paragraph [] [ text "lots of text ...." ]
  , el GreenBox [ alignLeft ] empty
  , paragraph Paragraph [] [ text "lots of text ...." ]
  ]

You might notice, we've also set padding and spacing. These properties work as you'd imagine, spacing is the space between the elements in the layout.

For textLayout you might find spacingXY useful if you need to specify the vertical and horizontal spacing separately.

The full element

There's a pretty common case in text layout where you want a section that needs to expand beyond the parent's padding.

The full element will do that. It will expand to consume any parent's padding that it is adjacent to.

Here's an example where we have a green section of text in our layout.

textLayout MyText [ spacing 10, padding 10 ]
  [ paragraph Paragraph [] [ text "lots of text ...." ]
  , el Box [ alignLeft ] empty
  , paragraph Paragraph [] [ text "lots of text ...." ]
  , full GreenSection [ padding 10 ] <|
       paragraph Paragraph [] [ text "lots of text ...." ]

  ]