ImgIX.Text

Adds a text overlay to your image, with positioning and a full range of formatting properties.

example hello world!

The Text Type

Text

text : String -> Text

The text string to overlay on the image. This value must be supplied for text to be rendered—all other text parameters are ignored if it isn't set.

imgix has full support for UTF-8 characters, and will appropriately render non-Latin character sets and emoji. This means that you can easily pipe in localized text to a base image instead of creating a different master image for each language you want to support.

Text has the following defaults if none of the other text parameters are set:

Position: Lower right corner
Font: Helvetica
Size: 12px
Color: #000 (Opaque Black)
Padding: 10px

Text Font

serif : Text

Set the font to a "CSS-Style" category (e.g font-family: serif;)

sansSerif : Text

Set the font to a "CSS-Style" category (e.g font-family: sans-serif;)

monospace : Text

Set the font to a "CSS-Style" category (e.g font-family: monospace;)

cursive : Text

Set the font to a "CSS-Style" category (e.g font-family: cursive;)

fantasy : Text

Set the font to a "CSS-Style" category (e.g font-family: fantasy;)

font : String -> Text

Set the font to use an explicit typeface.

See the ImgIX documentation Text Font for a list of available typefaces.

Text Style

bold : Text

Make the font style bold

italic : Text

Make the font style italic

Text Font Size

fontSize : Int -> Text

Sets the font size of the text, in pixels.

The value must be a number greater than 0. The default value is 12.

Text Color

color : Color -> Text

Sets the color of the text.

The default is opaque black, 000.

colour : Color -> Text

Alias of color

Text Padding

padding : Int -> Text

The amount of spacing (in pixels) to add around the text.

The default is 10.

Text Width

width : Int -> Text

The width (in pixels) to restrict the width of the text to.

The default value is calculated by the width of the output image, minus any padding on the left and right.

If the text exceeds the value of txtwidth, it will be clipped on a per-character basis; the maximum number of characters that will fit in the specified width will be displayed.

The location of the clipping is determined by the value of the Text Clipping Mode.

Text Position

alignLeft : Text

align text to the left

alignCenter : Text

align text to the center

alignRight : Text

align text to the right

alignTop : Text

align text to the top

alignMiddle : Text

align text to the middle

alignBottom : Text

align text to the bottom

Text Clipping Mode

Sets the region of the string that will be clipped if the string extends beyond the defined width of the text.

The ellipsis input adds an ellipsis on the region where the text is clipped, and can be combined with one of the other clipping methods.

If no value is set, the default value is end.

The padding and width functions are used to control the bounding region.

clippingModeStart : Text

Clip text to the start

clippingModeMiddle : Text

Clip text to the middle

clippingModeEnd : Text

Clip text to the end

clippingModeEllipsis : Text

Clip text using ellipsis

Text Fit Mode

fitModeMax : Text

Presently, only the max fit mode is supported by ImgIX. With no fit mode, the text will be clipped if it exceeds the contraints of the text bounds. With fitModeMax, the text will be scaled down to fit within the bounds rather than clipping the text contents.

The default is to not set a fit mode.

The padding and width parameters are used to control the bounding region.

Text Ligatures

Enables support for ligatures in the text, if the selected font supports them.

requiredLigatures : Text

Enables typographically-required ligatures present in non-English languages.

commonLigatures : Text

Enables common ligatures in the selected typeface.

This is the default

allLigatures : Text

Enables all of the ligatures that are available in the selected typeface.

Text Outline

outline :

{ width : Int

, color : Color

}

-> Text

Sets the width and color of the outline to draw around the text.

Text Shadow

shadow : Float -> Text

A number indicating the strength of a shadow to place on the text.

The default is no shadow, and the range is from 0 – 10.

Applying

toQueryParameters : List Text -> List QueryParameter

Takes a list of text options and turns it in to a list of query parameters that ImgIX understands

raen79/elm-imgix/1.0.0