Search code examples
javascriptfabricjs

Text height of specific character in Fabric.js

I have a text object in fabric.js that I am creating with: 

     fbText = new fabric.Textbox('@TEST', {
      width: 700,
      fill: '#303846',
      top: 150,
      left: 50,
      fontSize: 150,
      textAlign: 'left',
      fixedWidth: 700,
    // fontWeight: 'bold',
      editable: false,
      originY: 'center',
     styles: {
      // first word of text i.e Test
      0: {
        //first letter of first word i.e T
        0: { fill: '#21bba6', fontSize: 130}
      },
    }
  })

I would like to make the 1st letter higher than the rest of the word. Any thoughts on how that might be possible?

This is what I want to happen:

enter image description here

This is currently happening:

This is what is happening

Solution

  • You can use deltaY negative value. There are more available style properties that can be used, have a look at [http://fabricjs.com/docs/fabric.Textbox.html#_styleProperties][1].

    var fbText = new fabric.Textbox('@TEST', {
    ...,
    styles: {
        0: {
            0: { 
                fill: '#21bba6', 
                fontSize: 130,
                deltaY: -30
            }
        },
    }
})