A library for styling and displaying text.
While the String library focuses on representing and manipulating strings of characters, the Text library focuses on how those strings should look on screen. It lets you make text bold or italic, set the typeface, set the text size, etc.
Be aware that this module is intended for small chunks of text on one line. Using a newline character in a text chunk will simply have no effect. Alignment and placement should be done using the Collage or Layout modules.
To add some text to your collages, follow the next steps:
fromString
.Collage.rendered
.
From this point, you cannot style your text any more.
What you can do however is...So the most important thing to remember is that after you have turned your text into a collage, you cannot style it anymore!
Note: Function and type names in this module clash with those from Collage and Collage.Layout. Best way to use is a qualified import like:
import Collage.Text as Text exposing (Text, fromString)
Collage.Core.Text Style
Opaque type representing styled text.
fromString : String -> Text
Convert a string into text which can be styled and displayed.
To show the string "Hello World!" on screen in large, dark red, italics, you could say:
fromString "Hello World!"
|> size large
|> color Color.darkRed
|> shape Italic
|> Collage.rendered
empty : Text
Text with nothing in it.
empty = fromString ""
Possible typefaces for text.
Serif
, Sansserif
, and Monospace
correspond to the default browser fonts of the user.
Use Font
to specify a concrete typeface.
typeface : Typeface -> Text -> Text
Set the typeface of some text.
fromString "Text in my favorite font"
|> typeface (Font "Lato")
color : Color -> Text -> Text
Set the color of some text.
Use the Color module to specify colors.
fromString "Nice blue text"
|> color Color.blue
The predefined font sizes below are spaced sqrt (sqrt 2)
of each other.
which gives a balanced view.
This idea is bluntly stolen from LaTeX,
which does something quite similar.
Off course, you can always specify your own font size explicitly.
size : Basics.Int -> Text -> Text
Set the size of some text.
fromString "Big text"
|> size huge
tiny : Basics.Int
11 px
small : Basics.Int
13 px
normal : Basics.Int
16 px
large : Basics.Int
19 px
huge : Basics.Int
23 px
enormous : Basics.Int
27 px
Possible shapes for a piece of text.
shape : Shape -> Text -> Text
Set the shape of some text.
fromString "Italic text"
|> shape Italic
Possible weights for a piece of text.
weight : Weight -> Text -> Text
Set the weight of some text.
fromString "Bold text"
|> weight Bold
Styles for lines on or over some text.
line : Line -> Text -> Text
Put lines on text.
This allows you to add an underline, an overline, or strike out text:
line None (fromString "normal text")
line Under (fromString "underline")
line Over (fromString "overline")
line Through (fromString "strike out")
{ typeface : Typeface
, size : Basics.Int
, color : Color
, shape : Shape
, weight : Weight
, line : Line
}
Specifies the styling (color, typeface, weight, etc.) of text.
style : Style -> Text -> Text
Give some text a predefined style.
For example, if you design a style called heading
that is specifically for heading text,
you could apply it to text like this:
heading =
{ typeface = Sansserif
, size = huge
, color = Color.darkBlue
, shape = Upright
, weight = Bold
, line = Nothing
}
fromString "Welcome to Elm Collage!"
|> style heading
defaultStyle : Style
Plain black text.
It uses the browsers default typeface and text height. No decorations are used.
defaultStyle =
{ typeface = Sansserif
, size = normal
, color = Color.black
, shape = Upright
, weight = Regular
, line = None
}
width : Text -> Basics.Float
The width of the text when displayed on the user screen.
height : Text -> Basics.Float
The height of the text when displayed on the user screen.
This is equal to the text size:
fromString "Hello World!"
|> size 16
|> height
== 16
(Now you know why newlines are a bad idea...)