letter-spacing

CSS text justify with letter spacing

by

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); … Read more

Letter-spacing wrong text center alignment

by

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; … Read more

How can I remove letter-spacing for the last letter of an element in CSS?

by

You can set your element to have a right margin of -1.2em, which would counteract the letter spacing. e.g. .menu-header-selector { display:block; letter-spacing:1.2em; margin-right:-1.2em; text-align:right; } To answer your question regarding pseudo-selector, there isn’t a per character pseudo-selector as far as I’m aware. (EDIT: Scratch that, there’s the :First-Letter selector, which Jonas G. Drange pointed … Read more

Letter spacing in canvas element

by

You can’t set the letter spacing property, but you you can accomplish wider letter spacing in canvas by inserting one of the various white spaces in between every letter in the string. For instance ctx.font = “3em sheepsans”; ctx.textBaseline = “middle”; ctx.textAlign = “center”; ctx.fillStyle = “rgb(255, 255, 255)”; var ctext = “Blah blah text”.split(“”).join(String.fromCharCode(8202)) … Read more

tech