127 lines
2.8 KiB
Elm
127 lines
2.8 KiB
Elm
module Text where
|
|
|
|
{-| Functions for displaying text
|
|
|
|
# Creating Text
|
|
@docs toText
|
|
|
|
# Creating Elements
|
|
@docs leftAligned, rightAligned, centered, justified
|
|
|
|
# Style and Links
|
|
@docs Style, style, Line, link
|
|
|
|
# Convenience Functions
|
|
|
|
There are two convenience functions for creating an `Element` which can be
|
|
useful when debugging or prototyping:
|
|
|
|
@docs plainText, asText
|
|
|
|
There are also a bunch of functions to set parts of a `Style` individually:
|
|
|
|
@docs typeface, monospace, height, color, bold, italic, line
|
|
|
|
-}
|
|
|
|
import Basics (..)
|
|
import String
|
|
import Color (Color)
|
|
import Graphics.Element (Element, Three, Pos, ElementPrim, Properties)
|
|
import Maybe (Maybe)
|
|
import JavaScript (JSString)
|
|
import Native.Text
|
|
|
|
data Text = Text
|
|
|
|
data Line = Under | Over | Through
|
|
|
|
{-| Representation of all the ways you can style `Text`.
|
|
-}
|
|
type Style =
|
|
{ typeface : [String]
|
|
, height : Maybe Float
|
|
, color : Color
|
|
, bold : Bool
|
|
, italic : Bool
|
|
, line : Maybe Line
|
|
}
|
|
|
|
{-| Convert a string into text which can be styled and displayed. -}
|
|
toText : String -> Text
|
|
toText = Native.Text.toText
|
|
|
|
{-| Set the style of some text.
|
|
-}
|
|
style : Style -> Text -> Text
|
|
style = Native.Text.style
|
|
|
|
{-| Provide a list of prefered typefaces for some text.
|
|
|
|
["helvetica","arial","sans-serif"]
|
|
|
|
Not everyone 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. Works the same as the CSS
|
|
font-family property.
|
|
-}
|
|
typeface : [String] -> Text -> Text
|
|
typeface = Native.Text.typeface
|
|
|
|
{-| Switch to a monospace typeface. Good for code snippets. -}
|
|
monospace : Text -> Text
|
|
monospace = Native.Text.monospace
|
|
|
|
{-| Create a link.
|
|
|
|
link "http://elm-lang.org" (toText "Elm Website")
|
|
-}
|
|
link : String -> Text -> Text
|
|
link = Native.Text.link
|
|
|
|
height : Float -> Text -> Text
|
|
height = Native.Text.height
|
|
|
|
color : Color -> Text -> Text
|
|
color = Native.Text.color
|
|
|
|
bold : Text -> Text
|
|
bold = Native.Text.bold
|
|
|
|
italic : Text -> Text
|
|
italic = Native.Text.italic
|
|
|
|
line : Line -> Text -> Text
|
|
line = Native.Text.line
|
|
|
|
leftAligned : Text -> Element
|
|
leftAligned = Native.Text.leftAligned
|
|
|
|
rightAligned : Text -> Element
|
|
rightAligned = Native.Text.rightAligned
|
|
|
|
centered : Text -> Element
|
|
centered = Native.Text.centered
|
|
|
|
justified : Text -> Element
|
|
justified = Native.Text.justified
|
|
|
|
{-| Display a plain string. -}
|
|
plainText : String -> Element
|
|
plainText str =
|
|
leftAligned (toText str)
|
|
|
|
{-| for internal use only -}
|
|
markdown : Element
|
|
markdown = Native.Text.markdown
|
|
|
|
{-| Convert anything to its textual representation and make it displayable in
|
|
the browser:
|
|
|
|
asText == text . monospace . show
|
|
|
|
Excellent for debugging.
|
|
-}
|
|
asText : a -> Element
|
|
asText value =
|
|
leftAligned (monospace (toText (String.show value)))
|