text-align justify by setting letter-space

Question

in the example below is it possible to set letter spacing so all the three lines are justified on both sides automatically?

I believe this is possible using javascript, but I prefer a css only solution

.logo{
position:absolute;
text-align:justify;
text-align-last:justify;
}

<div class='logo'>LOREM IPSUM<br>DOLOR<br>SIT AMET</div>

Does this answer your question? [CSS text justify with letter spacing](https://stackoverflow.com/questions/4355009/css-text-justify-with-letter-spacing) — bowlowl, Nov 29 '20 at 02:11

score 1 · Answer 1 · answered Nov 29 '20 at 02:11

Here' a js solution:

function SplitText(node) {
  var text = node.nodeValue.replace(/^\s*|\s(?=\s)|\s*$/g, "");

  for (var i = 0; i < text.length; i++) {
    var letter = document.createElement("span");
    letter.style.display = "inline-block";
    letter.style.position = "absolute";
    letter.appendChild(document.createTextNode(text.charAt(i)));
    node.parentNode.insertBefore(letter, node);

    var positionRatio = i / (text.length - 1);
    var textWidth = letter.clientWidth;

    var indent = 100 * positionRatio;
    var offset = -textWidth * positionRatio;
    letter.style.left = indent + "%";
    letter.style.marginLeft = offset + "px";

    //console.log("Letter ", text[i], ", Index ", i, ", Width ", textWidth, ", Indent ", indent, ", Offset ", offset);
  }

  node.parentNode.removeChild(node);
}

function Justify() {
  var TEXT_NODE = 3;
  var elem = document.getElementById("character_justify");
  elem = elem.firstChild;

  while (elem) {
    var nextElem = elem.nextSibling;

    if (elem.nodeType == TEXT_NODE)
      SplitText(elem);

    elem = nextElem;
  }
}

#character_justify {
  position: relative;
  width: 20%;
  margin: 0;
  padding: 0;
}

#character_justify * {
  margin: 0;
  padding: 0;
  border: none;
}

<body onload="Justify()">
  <p id="character_justify">
   LOREM IPSUM<br>DOLOR<br>SIT AMET
  </p>
</body>

@qadenza The amount of C/C++ code that goes into browser rending engines... there's probably not a much more concise solution. — Bryan Grace, Nov 29 '20 at 02:28

text-align justify by setting letter-space

1 Answers1