W3C home > Mailing lists > Public > www-style@w3.org > February 2016

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

From: Sebastian Zartner <sebastianzartner@gmail.com>
Date: Tue, 2 Feb 2016 15:37:40 +0100
Message-ID: <CAERejNbkP58VXgNzZT5M6ZZTBjNvPStrQuvm7Y5_WPke6+DDhA@mail.gmail.com>
To: public-html@w3.org, www-style list <www-style@w3.org>
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:30 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:00 UTC