elm-i18n / translatable-html / Translatable.Html

This file is organized roughly in order of popularity. The tags which you'd expect to use frequently will be closer to the top.

Conversion

toHtml : (userText -> String) -> Html userText msg -> Html msg

Convert Translatable.Html.Html back into core Html.Html.

import Html
import Translatable.Html

view : Html.Html msg
view =
    Translatable.Html.toHtml translate typedView

typedView : Translatable.Html.Html Translatable msg
typedView =
    "Hello"
        |> text
        |> Translatable.Html.text

type Translatable
    = Translatable String

text : String -> Translatable
text =
    Translatable

translate : Translatable -> String
translate (Translatable userText) =
    userText

core : Html msg -> Html userText msg

This escape hatch lets you mix core Html.Html with Translatable.Html.Html when it cannot be avoided. For example, if you use a 3rd party package that gives you core Html.Html or Html.Attributes.Attribute this allows you to continue using the 3rd party package.

import Html
import Markdown
import Translatable.Html

view : Html.Html msg
view =
    Translatable.Html.toHtml translate typedView

typedView : Translatable.Html.Html Translatable msg
typedView =
    Html.div
        [ "Hello"
            |> text
            |> Translatable.Html.text
        , "_world_."
            |> Markdown.toHtml []
            |> Translatable.Html.core
        ]

type Translatable
    = Translatable String

text : String -> Translatable
text =
    Translatable

translate : Translatable -> String
translate (Translatable userText) =
    userText

Primitives


type alias Html userText msg =
Internal.Html userText msg

The core building block used to build up HTML. Here we create an Html value with no attributes and one child:

hello : Html userText msg
hello =
    div [] [ text "Hello!" ]


type alias Attribute userText msg =
Internal.Attribute userText msg

Set attributes on your Html. Learn more in the Translatable.Html.Attributes module.

text : userText -> Html userText msg

Just put plain text in the DOM. It will escape the string so that it appears exactly as you specify.

text "Hello World!"

node : String -> List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

General way to create HTML nodes. It is used to define all of the helper functions in this library.

div : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg
div attributes children =
    node "div" attributes children

You can use this to create custom nodes if you need to create something that is not covered by the helper functions in this library.

map : (a -> msg) -> Html userText a -> Html userText msg

Transform the messages produced by some Html. In the following example, we have viewButton that produces () messages, and we transform those values into Msg values in view.

type Msg
    = Left
    | Right

view : model -> Html userText msg
view model =
    div []
        [ map (\_ -> Left) (viewButton "Left")
        , map (\_ -> Right) (viewButton "Right")
        ]

viewButton : String -> Html ()
viewButton name =
    button [ onClick () ] [ text name ]

This should not come in handy too often. Definitely read this before deciding if this is what you want.

Tags

Headers

h1 : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

h2 : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

h3 : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

h4 : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

h5 : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

h6 : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Grouping Content

div : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a generic container with no special meaning.

p : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Defines a portion that should be displayed as a paragraph.

hr : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a thematic break between paragraphs of a section or article or any longer content.

pre : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Indicates that its content is preformatted and that this format must be preserved.

blockquote : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a content that is quoted from another source.

Text

span : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents text with no specific meaning. This has to be used when no other text-semantic element conveys an adequate meaning, which, in this case, is often brought by global attributes like class, lang, or dir.

a : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a hyperlink, linking to another resource.

code : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents computer code.

em : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents emphasized text, like a stress accent.

strong : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents especially important text.

i : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents some text in an alternate voice or mood, or at least of different quality, such as a taxonomic designation, a technical term, an idiomatic phrase, a thought, or a ship name.

b : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a text which to which attention is drawn for utilitarian purposes. It doesn't convey extra importance and doesn't imply an alternate voice.

u : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a non-textual annotation for which the conventional presentation is underlining, such labeling the text as being misspelt or labeling a proper name in Chinese text.

sub : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represent a subscript.

sup : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represent a superscript.

br : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a line break.

Lists

ol : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Defines an ordered list of items.

ul : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Defines an unordered list of items.

li : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Defines a item of an enumeration list.

dl : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Defines a definition list, that is, a list of terms and their associated definitions.

dt : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a term defined by the next dd.

dd : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents the definition of the terms immediately listed before it.

Embedded Content

img : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents an image.

iframe : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Embedded an HTML document.

canvas : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a bitmap area for graphics rendering.

math : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Defines a mathematical formula.

Inputs

form : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a form, consisting of controls, that can be submitted to a server for processing.

input : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a typed data field allowing the user to edit the data.

textarea : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a multiline text edit control.

button : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a button.

select : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a control allowing selection among a set of options.

option : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents an option in a select element or a suggestion of a datalist element.

Sections

section : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Defines a section in a document.

nav : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Defines a section that contains only navigation links.

article : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Defines self-contained content that could exist independently of the rest of the content.

aside : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Defines some content loosely related to the page content. If it is removed, the remaining content still makes sense.

header : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Defines the header of a page or section. It often contains a logo, the title of the web site, and a navigational table of content.

footer : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Defines the footer for a page or section. It often contains a copyright notice, some links to legal information, or addresses to give feedback.

address : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Defines a section containing contact information.

main_ : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Defines the main or important content in the document. There is only one main element in the document.

Figures

figure : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a figure illustrated as part of the document.

figcaption : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents the legend of a figure.

Tables

table : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents data with more than one dimension.

caption : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents the title of a table.

colgroup : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a set of one or more columns of a table.

col : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a column of a table.

tbody : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents the block of rows that describes the concrete data of a table.

thead : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents the block of rows that describes the column labels of a table.

tfoot : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents the block of rows that describes the column summaries of a table.

tr : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a row of cells in a table.

td : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a data cell in a table.

th : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a header cell in a table.

Less Common Elements

Less Common Inputs

fieldset : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a set of controls.

legend : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents the caption for a fieldset.

label : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents the caption of a form control.

datalist : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a set of predefined options for other controls.

optgroup : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a set of options, logically grouped.

output : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents the result of a calculation.

progress : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents the completion progress of a task.

meter : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a scalar measurement (or a fractional value), within a known range.

Audio and Video

audio : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a sound or audio stream.

video : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a video, the associated audio and captions, and controls.

source : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Allows authors to specify alternative media resources for media elements like video or audio.

track : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Allows authors to specify timed text track for media elements like video or audio.

Embedded Objects

embed : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a integration point for an external, often non-HTML, application or interactive content.

object : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents an external resource, which is treated as an image, an HTML sub-document, or an external resource to be processed by a plug-in.

param : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Defines parameters for use by plug-ins invoked by object elements.

Text Edits

ins : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Defines an addition to the document.

del : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Defines a removal from the document.

Semantic Text

small : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a side comment, that is, text like a disclaimer or a copyright, which is not essential to the comprehension of the document.

cite : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents the title of a work.

dfn : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a term whose definition is contained in its nearest ancestor content.

abbr : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents an abbreviation or an acronym; the expansion of the abbreviation can be represented in the title attribute.

time : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a date and time value; the machine-readable equivalent can be represented in the datetime attribute.

var : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a variable. Specific cases where it should be used include an actual mathematical expression or programming context, an identifier representing a constant, a symbol identifying a physical quantity, a function parameter, or a mere placeholder in prose.

samp : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents the output of a program or a computer.

kbd : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents user input, often from the keyboard, but not necessarily; it may represent other input, like transcribed voice commands.

s : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents content that is no longer accurate or relevant.

q : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents an inline quotation.

Less Common Text Tags

mark : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents text highlighted for reference purposes, that is for its relevance in another context.

ruby : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents content to be marked with ruby annotations, short runs of text presented alongside the text. This is often used in conjunction with East Asian language where the annotations act as a guide for pronunciation, like the Japanese furigana.

rt : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents the text of a ruby annotation.

rp : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents parenthesis around a ruby annotation, used to display the annotation in an alternate way by browsers not supporting the standard display for annotations.

bdi : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents text that must be isolated from its surrounding for bidirectional text formatting. It allows embedding a span of text with a different, or unknown, directionality.

bdo : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents the directionality of its children, in order to explicitly override the Unicode bidirectional algorithm.

wbr : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a line break opportunity, that is a suggested point for wrapping text in order to improve readability of text split on several lines.

Interactive Elements

details : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a widget from which the user can obtain additional information or controls.

summary : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a summary, caption, or legend for a given details.

menuitem : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a command that the user can invoke.

menu : List (Attribute userText msg) -> List (Html userText msg) -> Html userText msg

Represents a list of commands.