the-sett / svg-text-fonts / TextToSVG

Provides functionality to convert text into SVG paths.

This is implemented on top of the opentype.js library, and uses ports to handle the native code interaction with this library, even though the text conversion functions routines are pure functions and do not really need to work asynchronously.

The update cycle for this module must be linked into code that makes use of it, including its subscriptions.

Types describing SVG diagrams with text.


type alias TextDiagram a =
{ a | labels : List PathSpec
, pathsForLabels : GenericDict.Dict PathSpec Path 
}

Denotes a diagram containing text with a function that can be used to correctly calculate the width of all text in the diagram.


type alias Path =
{ width : Basics.Float
, path : String 
}

Encodes a string as an SVG path describing its outline, which can be used to draw the text in SVG. The width of the text is also given.


type alias PathSpec =
{ text : String
, font : String
, fontSize : Basics.Float 
}

Describes some text as a String along with a named font and size. This is sufficient to describe the SVG path for the text uniquely.


type alias Options =
{ kerning : Maybe Basics.Bool
, letterSpacing : Maybe Basics.Float 
}

Options that can be set to control how text is rendered into SVG paths.

Text to path conversion cycle.


type alias Model a =
{ diagramsToSize : Dict Basics.Int (TextDiagram a)
, textToSize : MultiDict Basics.Int PathSpec
, id : Basics.Int 
}

The internal state of the text conversion. This keeps track of which diagrams are still to complete, and which PathSpecs.


type Msg

Describes the text rendering outcome events from the conversion ports.

subscriptions : TextToSVGResponsePort Msg -> Model a -> Platform.Sub.Sub Msg

Defines the subscription needed to listen for responses on the text conversion response port.

init : Model a

Createa a new empty initial state for the text conversion.

update : Msg -> Model a -> ( Model a, Platform.Cmd.Cmd Msg, List (TextDiagram a) )

Handles updates from the text to SVG return port, that provide text converted to SVG with sizing information.

textToSvg : TextToSVGPort Msg -> List (TextDiagram a) -> Model a -> ( Model a, Platform.Cmd.Cmd Msg )

Given a list of diagrams that need their text converted to SVG, and the current state of the converter Model, produces a new model and a set of commands for the requests on the text to SVG port, to do the conversion work. The new model contains a set of diagrams needing to be sized, updated with the list of diagram requests to be processed.

SVG text rednering functions, with path or browser rendered implmenetations.


type alias TextRenderFunc msg =
PathSpec -> GenericDict.Dict PathSpec Path -> TextAlignment -> Basics.Float -> Basics.Float -> List (TypedSvg.Core.Attribute msg) -> TypedSvg.Core.Svg msg

A type alias for the text rendering functions, as their types are quite longt.

textAsPath : PathSpec -> GenericDict.Dict PathSpec Path -> TextAlignment -> Basics.Float -> Basics.Float -> List (TypedSvg.Core.Attribute msg) -> TypedSvg.Core.Svg msg

Renders a PathSpec as an SVG path. This will be geometrically accurate and stable under motion, but the text rendering will not be hinted and look a bit rough. Use this when animating text.

textAsText : PathSpec -> GenericDict.Dict PathSpec Path -> TextAlignment -> Basics.Float -> Basics.Float -> List (TypedSvg.Core.Attribute msg) -> TypedSvg.Core.Svg msg

Renders a PathSpec as SVG text rendered by the browser. This will be hinted and rendered for maximum legibility. It will look crisp and clear . It will have geometric aberations that show up under animation as a jittering about of the text. Use this for static text.


type TextAlignment
    = LeftAlign
    | CenterAlign
    | RightAlign

The possible horizontal alignments for text.

Ports needed to request/subscribe to text to SVG conversion events.


type alias TextToSVGPort msg =
TextToSVGRequest -> Platform.Cmd.Cmd msg

Defines the type of the text-to-svg port.


type alias TextToSVGResponsePort msg =
(TextPath -> msg) -> Platform.Sub.Sub msg

Defines the type of the text-to-svg response port.