Right align text in <input> with letter-spacing

css, html, letter-spacing, right-align

Solution

You can use Javascript and shadow DOM in the browsers that support it (Can I use: shadow DOM, not too many browsers currently). You can also use WebComponentsMonkeyPatch to future-proof the implementation.

Jsfiddle sample.

JS:

var button = document.querySelector('input.right');
var shadowDom = button.webkitCreateShadowRoot();
shadowDom.innerHTML = '<div style="margin-right: -20px;">'+button.value+'</div>';

HTML:

<input class="left" value="spacing" />
<input class="right" value="spacing" />

CSS:

input {
    font-size:24pt;
    letter-spacing: 20px;
    width: 70%;
}
.left {
    text-align:left;
}
.right {
    text-align:right;
}

Problem

If you left align text in an input, it stays left aligned, no matter how you set the letter-spacing. If you right align text in an input, the letter-spacing can push it away from the right edge. Example (shows up in Firefox, Chrome): ``` <input class="left" value="spacing" /> <input class="right" value="spacing" /> ``` CSS: ``` input { font-size:24pt; letter-spacing: 20px; } .left { text-align:left; } .right { text-align:right; } ``` Is there any way to increase letter-spacing while remaining fully right-aligned?

Original source