Right align text in <input> with letter-spacing

Question

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?

Frau

I don't understand the question, you already have letter spacing and right-aligned, what is your question? – Froemming

@Froemming check the image 20px in right side. – Helprin

The spacing is added to the right of the letters, so it looks like it's not right aligned. – Macnair

Oh I see, OP wants the left aligned effect on the right side. I thought he wants spacing for the first letter when left aligned – Froemming

Everything I've read indicates that it's up to the browser to decide how the spacing is applied. Looks like Firefox just adds it to the right of the letters. It at least will be consistent across all inputs with that spacing set. – Macnair

Since input tags don't support styling of specific characters, I think the only way to do this would be to build a special custom rich text control that does exactly what you want. – Macnair

Hmm...I want to mark both the Firefox and the Chrome answer as right. Too bad I can't do that... – Frau

Answer 1

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

Meteor

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 another way to do it other than this monstrosity. This hack will backfire if browsers in the future decided to put spacing based on the alignment of the text

Froemming

ha ha! what an awesome hack! – Macnair

Careful with this. The value is physically reversed, so you'll have to do some special parsing to re-reverse the data when it's posted. You'll also have to reverse the value if it's loaded into the input dynamically. – Macnair

Am I missing something? Your fiddle looks exactly the same as the OP's. I see 20px to the right of the letter g. I'm using Chrome v35. – Tia

I see the same as @Tia and when I type in the box it is reversed. Should there be JS to reverse the input as the user types? – Patnode

No js, according to developer.mozilla.org/en-US/docs/Web/CSS/direction chrome should be supported. You can check on FF and see. Apparently chrome puts the space on the right side no matter what. A hack is a hack! – Froemming

So for chrome, OP can use the js solution which currently does not affect FF – Froemming

Impractical but hilarious :) definitely a temp hack since it only works in FF. – Frau