Using an absolute font size instead of a relative one

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.

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

    const editor = openDefaultEditor({
        src: './my-image.jpeg',

        // Show annotate plugin
        util: 'annotate',

        // Set custom style control options
        markupEditorShapeStyleControls: createMarkupEditorShapeStyleControls({
            // set absolute font size values
            fontSizeOptions: createDefaultFontSizeOptions(),

            // set absolute line height values
            lineHeightOptions: createDefaultLineHeightOptions(),
        }),
    });

    // Show resulting image preview
    editor.on('process', ({ dest }) => {
        const preview = new Image();
        preview.src = URL.createObjectURL(dest);
        document.body.appendChild(preview);
    });
</script>