CODEWITHSUNDEEP
css
Yanick Rochon
Yanick Rochon

Reputation: 53536

Is it possible to horizontally align individual characters with letter-spacing in CSS?

Given a CSS rule of letter-spacing: 16px;, I notice that the characters are left-aligned within their "box", and make the cursor jump ahead to the far right, as if I added an extra space after the character.

Is it possible to use letter-spacing, but having the characters horizontally aligned within their new extended boundaries?

Upvotes: 0

Views: 200

Answers (2)

myf
myf

Reputation: 11283

As have been said, letter-spacing does not have a mean to position the character in the unit, more precisely really just adds "tracking".

From your comment it is apparent what you want to get, and it is kinda achievable, provided you can split your input to multiple one-character ones:

div {
  border: 1px solid black;
  overflow: hidden;
  float: left;
  clear: both;
}

input {
  border: none;
  display: block;
  float: left;
  width: 20px; /* mimics letter-spacing*/
  text-align: center;
}
<div>
  <input name="pin1[]" maxlength=1 oninput="this.nextElementSibling.select()" value="m">
  <input name="pin1[]" maxlength=1 oninput="this.nextElementSibling.select()" value="i">
  <input name="pin1[]" maxlength=1 value="m">
</div>

<div>
  <input name="pin2[]" maxlength=1 oninput="this.nextElementSibling.select()" value="i">
  <input name="pin2[]" maxlength=1 oninput="this.nextElementSibling.select()" value="m">
  <input name="pin2[]" maxlength=1 value="i">
</div>

Upvotes: 0

Soolie
Soolie

Reputation: 1820

It's not possible. The reason is, this will act as a padding / margin but not like a position. But yeah, if you want something like that, you can use inline-flex and use order to reorder.

p {display: inline-flex;}
p span {padding: 3px;}
p span.second {order: 1;}
<p>
  <span class="first">first</span>
  <span class="second">second</span>
  <span class="third">third</span>
</p>

This is just a POC. Please feel free to take it from here.

Upvotes: 2

Related Questions