Convert a string into text which can be styled and displayed. To show the string "Hello World!" on screen in italics, you could say:

main = leftAligned (italic (fromString "Hello World!"))

Text with nothing in it.

empty = fromString ""

Put two chunks of text together.

append (fromString "hello ") (fromString "world") == fromString "hello world"

Put many chunks of text together.

concat
  [ fromString "type "
  , bold (fromString "Maybe")
  , fromString " = Just a | Nothing"
  ]

Put many chunks of text together with a separator.

chunks : List Text
chunks = List.map fromString ["lions","tigers","bears"]


join (fromString ", ") chunks == fromString "lions, tigers, bears"

Align text along the left side of the text block. This is sometimes known as ragged right.

Align text along the right side of the text block. This is sometimes known as ragged left.

Center text in the text block. There is equal spacing on either side of a line of text.

Align text along the left and right sides of the text block. Word spacing is adjusted to make this possible.

Create a link by providing a URL and the text of the link.

link "http://elm-lang.org" (fromString "Elm Website")

Represents all the ways you can style Text. If the typeface list is empty or the height is Nothing, the users will fall back on their browser's default settings. The following Style is black, 16 pixel tall, underlined, and Times New Roman (assuming that typeface is available on the user's computer):

{ typeface = [ "Times New Roman", "serif" ]
, height   = Just 16
, color    = black
, bold     = False
, italic   = False
, line     = Just Under
}

Set the style of some text. For example, if you design a Style called footerStyle that is specifically for the bottom of your page, you could apply it to text like this:

style footerStyle (fromString "the old prince / 2007")

Plain black text. It uses the browsers default typeface and text height. No decorations are used.

{ typeface = []
, height = Nothing
, color = black
, bold = False
, italic = False
, line = Nothing
}

Styles for lines on text. This allows you to add an underline, an overline, or a strike out text:

line Under   (fromString "underline")
line Over    (fromString "overline")
line Through (fromString "strike out")

Display a string with no styling.

plainText string = leftAligned (fromString string)

Convert anything to its textual representation and make it displayable in the browser. Excellent for debugging.

asText value = leftAligned (monospace (fromString (show value)))

Provide a list of prefered typefaces for some text.

["helvetica","arial","sans-serif"]

Not every browser has access to the same typefaces, so rendering will use the first typeface in the list that is found on the user's computer. If there are no matches, it will use their default typeface. This works the same as the CSS font-family property.

Switch to a monospace typeface. Good for code snippets.

monospace (fromString "foldl (+) 0 [1,2,3]")

Set the height of some text.

height 40 (fromString "Title")

Set the color of some text.

color red (fromString "Red")

Make text bold.

fromString "sometimes you want " ++ bold (fromString "emphasis")

Make text italic.

fromString "make it " ++ italic (fromString "important")

Put lines on text.

line Under   (fromString "underlined")
line Over    (fromString "overlined")
line Through (fromString "strike out")