JSFiddle - React, Tailwind, and code Playground

by Bouh

HTML

<script src="https://pixijs.download/fix/text-line-height/pixi.min.js"></script>

<script>
 PIXI.TextMetrics.measureText = function (text, style, wordWrap, canvas) {
          if (canvas === void 0) { canvas = PIXI.TextMetrics._canvas; }
          wordWrap = (wordWrap === undefined || wordWrap === null) ? style.wordWrap : wordWrap;
          var font = style.toFontString();
          var fontProperties = PIXI.TextMetrics.measureFont(font);
          // fallback in case UA disallow canvas data extraction
          // (toDataURI, getImageData functions)
          if (fontProperties.fontSize === 0) {
              fontProperties.fontSize = style.fontSize;
              fontProperties.ascent = style.fontSize;
          }
          var context = canvas.getContext('2d');
          context.font = font;
          var outputText = wordWrap ? PIXI.TextMetrics.wordWrap(text, style, canvas) : text;
          var lines = outputText.split(/(?:\r\n|\r|\n)/);
          var lineWidths = new Array(lines.length);
          var maxLineWidth = 0;
					let lineHeight = 0;
					let height =0;
	     
          for (var i = 0; i < lines.length; i++) {
              var lineWidth = context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing);
              lineWidths[i] = lineWidth;
              maxLineWidth = Math.max(maxLineWidth, lineWidth);
						lineHeight = 100-(fontProperties.ascent+fontProperties.fontSize-fontProperties.descent) || fontProperties.fontSize + style.strokeThickness;

					
					height = Math.max(lineHeight*i, (fontProperties.fontSize) + style.strokeThickness)
            + ((lines.length) * (lineHeight + style.leading))+(lineHeight*i); 
						
          }
          var width = maxLineWidth + style.strokeThickness;
          if (style.dropShadow) {
              width += style.dropShadowDistance;
          }



          if (style.dropShadow) {
              height += style.dropShadowDistance;
          }
					
          return new...

CSS

.htmlversion {
  width: 800px;
  background: #0f0;
  height: 300px;
}

.htmlversion .multi,
.htmlversion .single {
  background: white;
  font-family: Arial;
  font-size: 36px;
  line-height: 100px;
  display: inline-block;
  margin-left: 50px;
  margin-top: 50px;
  vertical-align: top;
}

.htmlversion .multi {
  width: 372px;
}

JavaScript

const htmlVersion = document.createElement('div');
htmlVersion.classList.add('htmlversion');
document.body.appendChild(htmlVersion);

const text = document.createElement('span');
text.textContent = "Basic text in HTML";
text.classList.add('single');
htmlVersion.appendChild(text);

const multiText = document.createElement('span');
multiText.textContent = "Basic text in HTML with more linesBasic text in HTML with more lines";
multiText.classList.add('multi');
htmlVersion.appendChild(multiText);


const app = new PIXI.Application({
	backgroundColor: 0xff0000,
  height: 300,
  width: 800
});
document.body.appendChild(app.view);

const graphics = new PIXI.Graphics()
	.beginFill(0xFFFFFF)
	.drawRect(50, 50, 302, 100)
	.drawRect(402, 50, 372, 200);

app.stage.addChild(graphics);

const basicText = new PIXI.Text('Basic text in PIXI', {
    fontFamily: 'Arial',
    fontSize: '36px',
    lineHeight: 0,
    fill: '#000000',
    wordWrap: true,
    wordWrapWidth: 440,
    lineJoin: 'round'
});
basicText.x = 50;
basicText.y = 50;
app.stage.addChild(basicText);

const compText = new PIXI.Text('Basic text in PIXI with more linesBasic text in HTML with more lines',{
    fontFamily: 'Arial',
    fontSize: '36px',
    lineHeight: 0,
    fill: '#000000',
    wordWrap: true,
    wordWrapWidth: 372,
    lineJoin: 'round'
});
compText.x = 402;
compText.y = 50;
app.stage.addChild(compText);