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

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

From: Jonathan Kew <jfkthame@gmail.com>
Date: Tue, 2 Feb 2016 14:55:29 +0000
To: Sebastian Zartner <sebastianzartner@gmail.com>, public-html@w3.org, www-style list <www-style@w3.org>
Message-ID: <56B0C361.3050900@gmail.com>
On 2/2/16 14:37, Sebastian Zartner wrote:
> 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

FWIW, CSS Text already says[1] that "[l]etter-spacing must not be 
applied at the beginning or at the end of a line".

But AFAIK neither Gecko nor Blink currently implements this correctly 
per spec.


[1] https://www.w3.org/TR/css-text-3/#letter-spacing-property

> 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:56:14 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:56 UTC