Right alignment text in <input> with letter spacing

Question

If you left the alignment of the text in the input, it remains to the left, regardless of how you set the spacing between the letters. If you align the text correctly in the input, the distance between the letters may push it away from the right edge. Example (displayed 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 a way to increase the distance between letters while remaining fully aligned to the right?

Answer 1

You can use Javascript and the shadow DOM in browsers that support it ( Can I use: shadow DOM , not many browsers at the moment). You can also use WebComponentsMonkeyPatch for a reliable implementation.

Jsfiddle example.

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; } 

Answer 2

You can hack it for Firefox

http://jsfiddle.net/LF7UU/6/

 <input class="right" value="gnicaps" /> 

CSS

 .right { text-align:right; unicode-bidi:bidi-override; direction:rtl; } 

https://developer.mozilla.org/en-US/docs/Web/CSS/direction

I don’t think there is any other way to do this than this monster. This hack will have unpleasant consequences if browsers in the future decide to set the spacing based on text alignment