CSS Text Justify with Letter Spacing

CSS text justify with letter spacing

Here's a script which can do it. It isn't pretty, but maybe you can hack it to meet your needs. (Updated to handle resizing)

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: 40%;  border: 1px solid red;  font-size: 32pt;  margin: 0;  padding: 0;}
#character_justify * {  margin: 0;  padding: 0;  border: none;}

<body onload="Justify()">  <p id="character_justify">    Something<br/> Like    <br/> This  </p></body>

Letter-spacing wrong text center alignment

It seems you need to indent the text by the same amount as the letter-spacing. The first letter does not have the spacing applied to the left side

div {  width: 400px;  height: 400px;  background-color: #3b0d3b;  text-align: center;  margin: auto;}
p {  color: #fff;  background: black;  text-align: center;  font-size: 1.2em;  padding: 0;  margin: 0;}
.spacing {  letter-spacing: .4em;}
.spacing-large {  letter-spacing: 0.9em;  text-align: center;  text-indent: 0.9em;}

<div>  <p>- Foo Bar Zan -</p>  <p class="spacing">- Foo Bar Zan -</p>  <p class="spacing-large">- Foo Bar Zan -</p></div>

CSS text align justify big spaces

Consider using hyphenation (manual, CSS, server-side, or client-side JavaScript), see e.g. answers to Can I use CSS to justify text with hyphenating words at the end of a line?
Hyphenation tends to help a lot when there are long words in the text.

You can still keep text-justify: distribute, as it can improve the result on supporting browsers, and it can be expected to gain support, as it in the CSS standardization track (in CSS Text Module Level 3 WD).

How can I justify h1 text so that character spacing is added to stretch to 100% width?

CSS3 has support for the text-justify: newspaper property. It won't be supported in most browsers yet though.

In the mean time, you could try this jQuery Character Justification Plugin.

Does `text-align: justify` stretch all white space characters evenly?

As a knowledgeable person explained to me on Reddit:

I only have easy access to the blink code base and in that it justifies on kSpaceCharacter,
kTabulationCharacter, kNewlineCharacter, and kNoBreakSpaceCharacter (0x0020, 0x0009,
0x000A, 0x00A0). The function is called NGInlineLayoutAlgorithm::ApplyJustify.

As far as I can tell from some very brief tests it looks like it is the same in Firefox as well.

Further:

I found how it works in gecko as well and it is quite complicated. There is a long list of "breaking" characters that depend on if the page is rendered in Japanese, Chinese, or a different language. For non-jp/zh languages it works almost exactly as blink.

You can find it here. aLangIsCJ basically means if it is a Chinese or Japanese document.

Centre align text that has extra letter spacing applied

Can't you just specify padding-left: 1.5em; for your .container h5?

CSS Text Justify with Letter Spacing