Search code examples
jointjs

JointJS baseline-shift

I'm using JointJS 3.2.0, and I need to have texts like PN=xxx.

How baseline-shift is supposed to be used in JointJS? I tried

 markup: '<g><text>\
                <tspan class="left"></tspan>\
                <tspan class="sub"></tspan>\
                <tspan class="right"></tspan>\
                </text></g>',
         attrs: {
                '.sub': {
                'baseline-shift': 'sub',
                },

but it creates another tspan inside each tspan which all have dy=0. Similar approach with didn't make the correct tspan have the baseline-shift attribute.

I tried another approach where I changed textVerticalAnchor to 'top', but in that case I can't control the spacing between each tspan, and the letters are spaced further apart than just inside one tspan.

Solution

  • Using Text Annotations might help here.

    element.attr('label', {
  text: 'Pn = xxx',
  annotations: [{ start: 1, end: 2, attrs: { 'baseline-shift': 'sub' }}]
});

    Here's a JSFiddle.