7

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

enter image description here

Is there any way to increase letter-spacing while remaining fully right-aligned?

Chris
  • 5,876
  • 3
  • 43
  • 69
  • I don't understand the question, you already have letter spacing and right-aligned, what is your question? – Huangism Jun 03 '14 at 16:53
  • 1
    @Huangism check the image 20px in right side. – super Jun 03 '14 at 16:55
  • The spacing is added to the right of the letters, so it *looks* like it's not right aligned. – TLS Jun 03 '14 at 16:55
  • 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 – Huangism Jun 03 '14 at 16:56
  • 2
    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. – TLS Jun 03 '14 at 17:02
  • 1
    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. – TLS Jun 03 '14 at 17:09
  • Hmm...I want to mark both the Firefox and the Chrome answer as right. Too bad I can't do that... – Chris Oct 01 '14 at 14:06

2 Answers2

5

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;
}
Etheryte
  • 24,589
  • 11
  • 71
  • 116
3

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

Huangism
  • 16,278
  • 7
  • 48
  • 74
  • ha ha! what an awesome hack! – TLS Jun 03 '14 at 17:08
  • 1
    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. – TLS Jun 03 '14 at 17:11
  • 1
    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. – lbstr Jun 03 '14 at 17:27
  • I see the same as @lbstr and when I type in the box it is reversed. Should there be JS to reverse the input as the user types? – Ballbin Jun 03 '14 at 17:30
  • No js, according to https://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! – Huangism Jun 03 '14 at 17:35
  • So for chrome, OP can use the js solution which currently does not affect FF – Huangism Jun 03 '14 at 17:37
  • Impractical but hilarious :) definitely a temp hack since it only works in FF. – Chris Jun 03 '14 at 19:35