v8.38.0

Using an absolute font size

All default markup editor shapes and styles can be customized. To change the shape style controls we can use the createMarkupEditorShapeStyleControls function and override or extend the defaults.

In the example below we import the default absolute font size list and set it to the fontSizeOptions property. This allows us to use pixels instead of percentages to define the font size.

Additionally we also set absolute line height values.

<!DOCTYPE html>

<link rel="stylesheet" href="./pintura.css" />

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import {
        appendDefaultEditor,
        createDefaultFontSizeOptions,
        createDefaultLineHeightOptions,
        createMarkupEditorShapeStyleControls,
    } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        util: 'annotate',
        markupEditorShapeStyleControls: createMarkupEditorShapeStyleControls({
            // Set absolute font size values
            fontSizeOptions: createDefaultFontSizeOptions(),

            // Set absolute line height values
            lineHeightOptions: createDefaultLineHeightOptions(),
        }),
    });
</script>