Change font size for headings

Developers
1

Hello,

I want to change the font size for parts of my texts so they can be used as heading.
I have already increased the default font size but I don’t know how to add an option to select text as heading so its font size will be bigger than normal texts font size.

Right now it looks like this:
image

I want it to look like this:
Heading

Does someone know how to do this?

Thanks in advance for any tips!

2

This needs to be implemented as part of your custom renderer.

3

Can you be a bit more specific please?

4

Looking at what your custom element looks like you must be using a custom renderer. Or am I mistaken?

5

Yes indeed. My customRenderer looks like this:

export default class CustomRenderer extends BaseRenderer {
    constructor(config, eventBus, bpmnRenderer, textRenderer, styles) {
        super(eventBus, HIGH_PRIORITY);

        this.bpmnRenderer = bpmnRenderer;

        this.computeStyle = styles.computeStyle;
        this.textRenderer = textRenderer;

        this.defaultFillColor = config && config.defaultFillColor;
        this.defaultStrokeColor = config && config.defaultStrokeColor;
        this.defaultLabelColor = config && config.defaultLabelColor;
    }
    canRender(element) {...}
    drawShape(parentNode, element) {...}
    getShapePath(shape) {...}
    renderEmbeddedLabel(...){...}
    ...
}
6

In your custom renderer you can decide what is going to be rendered and how. So when you’re drawing your custom shape you can render two labels with different styles instead of one.

7

That sounds quite promising but I am still a bit confused. You are propably talking about this function here:

renderEmbeddedLabel(parentGfx, element, align) {
    var semantic = getSemantic(element);

    return renderLabel(this.textRenderer, parentGfx, semantic.name, {
        box: element,
        align: align,
        padding: 5,
        style: {
            fill: getLabelColor(
                element,
                this.defaultLabelColor,
                this.defaultStrokeColor
            )
        }
    });
}

But how can I modify this to render two labels instead of one?

Besides, even if I am able to render a second label, how should I make it clear to the application that it now has to switch to the second label type (heading)?

And wouldn’t a second label hide the first one?

8

It is as I feared: the labels are on top of each other.
I have tried to use “align” but that doesn’t bring the results I want either:
two labels
The textboxes are on top of each other, which results in the same value for both of them.

drawShape(...){
    ...
    if(customElementTypes[i] === blueBox) {
        this.renderCustomEmbeddedLabel(
            parentNode,
            element,
            ALIGN_LEFT_TOP,
            getLabelColor(element, this.defaultLabelColor, this.defaultStrokeColor)
        );
        this.renderEmbeddedLabel(
            parentNode,
            element,
            ALIGN_CENTER_MIDDLE,
            getLabelColor(element, this.defaultLabelColor, this.defaultStrokeColor)
        );
    }
}

Is there a way to change the size of parts of the same label text to a different size than the rest?
Or can you explain in more detail how to render two labels and not have them render over each other (but instead to have one label take for example the upper half of the element and the other label take the lower half)?

9

Please have a look at diagram-js/Text.js at develop · bpmn-io/diagram-js · GitHub. There are a couple of options that should give you enough flexibility.