Pintura Image Editor v8.78.1

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.

index.html

<!DOCTYPE html>

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

<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>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import {
    getEditorDefaults,
    createDefaultFontSizeOptions,
    createDefaultLineHeightOptions,
    createMarkupEditorShapeStyleControls,
} from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                util={'annotate'}
                markupEditorShapeStyleControls={createMarkupEditorShapeStyleControls(
                    {
                        // Set absolute font size values
                        fontSizeOptions: createDefaultFontSizeOptions(),

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

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            util="annotate"
            :markupEditorShapeStyleControls="markupEditorShapeStyleControls"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import {
    getEditorDefaults,
    createDefaultFontSizeOptions,
    createDefaultLineHeightOptions,
    createMarkupEditorShapeStyleControls,
} from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            markupEditorShapeStyleControls:
                createMarkupEditorShapeStyleControls({
                    // Set absolute font size values
                    fontSizeOptions: createDefaultFontSizeOptions(),

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

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

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

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import {
        getEditorDefaults,
        createDefaultFontSizeOptions,
        createDefaultLineHeightOptions,
        createMarkupEditorShapeStyleControls,
    } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        util={'annotate'}
        markupEditorShapeStyleControls={createMarkupEditorShapeStyleControls({
            // Set absolute font size values
            fontSizeOptions: createDefaultFontSizeOptions(),

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

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import {
    getEditorDefaults,
    createDefaultFontSizeOptions,
    createDefaultLineHeightOptions,
    createMarkupEditorShapeStyleControls,
} from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    markupEditorShapeStyleControls: any = createMarkupEditorShapeStyleControls({
        // Set absolute font size values
        fontSizeOptions: createDefaultFontSizeOptions(),

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

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    util="annotate"
    [markupEditorShapeStyleControls]="markupEditorShapeStyleControls"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var {
            createDefaultFontSizeOptions,
            createDefaultLineHeightOptions,
            createMarkupEditorShapeStyleControls,
        } = $.fn.pintura;

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

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