[css-pseudo][css-ui] Allow to control selection width related to letter-spacing

Use case: I have an input field, which has a background image visually
putting each character into a box. When the text cursor is moved to the end
of the field, i.e. after number 9, it moves the display of the numbers to
the left, so that they don't fit into the boxes anymore. See this example:

data:text/html,<input maxlength="5"
style="box-sizing:content-box;width:17.1ch;border:1px solid
black;background-image:repeating-linear-gradient(to right, transparent,
transparent 1.72ch, gray 1.72ch, gray 1.82ch);padding:0
0.4ch;font-family:monospace;font-size:6ch;letter-spacing:0.8ch;"
value="0123456789">

So, what would be needed to get a better UX, could be either:
- define that the letter spacing doesn't affect the last character within a
line (maybe in combination with maxlength)
- define that the 'viewport' within the input is moved in controllable steps

I hope I expressed the issue clearly enough. I am cross-posting, because
I'm not sure whether this can already be achieved in some way, or should be
solved in HTML or CSS, or should be left up to the user agent. I'm aware
that this is an edge case (literally :-) ).

Sebastian

Received on Tuesday, 2 February 2016 14:38:29 UTC