CODEWITHSUNDEEP
htmlcssletter-spacingright-align
Chris
Chris

Reputation: 6095

Right align text in <input> with letter-spacing

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?

Upvotes: 7

Views: 1913

Answers (2)

Huangism
Huangism

Reputation: 16448

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

Upvotes: 3

Etheryte
Etheryte

Reputation: 25321

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

Upvotes: 5

Related Questions