Negative letter-spacing cut off text in input when right aligned

Question

I'm trying to display numbers inside an <input> field using a negative letter-spacing value and text-align: right. However, the last character gets clipped (not fully rendered), even when zooming the browser in or out.

input {
    font-family: "MS-Mincho";
    font-size: 11pt;
    letter-spacing: -1pt;
    text-align: right;
}

<input type="text" value="09530610" />

I want to keep both the current letter-spacing and text-align values, but still prevent the last character from being visually cut off.

Is there a reliable CSS-only solution to avoid this clipping issue without changing the font or letter-spacing value? Any suggestions would be greatly appreciated!

P/S: Things I've already tried (but didn't work): padding-right, text-indent,...

Answer 1

You can fix this issue by setting text-indent: 1px; on your input, and then change the direction of the element's text using the dir global attribute. dir does the same thing as direction but MDN recommends using dir whenever possible.

input {
  font-family: "MS-Mincho";
  font-size: 11pt;
  letter-spacing: -1pt;
  text-align: right;
  text-indent: 1px;
}

<input type="text" value="09530610" dir="rtl"/>