[css4-ui] Proposal for new property for text overflow on single-line text inputs

Hello,

Developers who work natively on the mac can use a feature in AppKit that allows them to specify how overflow text in text inputs gets truncated. Specifically, they can decide whether the overflow text gets clipped at the bound or truncated with an ellipsis. For them to implement something similar on the web is much more difficult and error-prone.

So, we would like to propose a new property, control-text-overflow, that can be applied to single-line input elements, and selects implemented as menu-list buttons. Its accepted values are the same as text-overflow: "clip" and "ellipsis". Default value is "clip", and reflects the behavior of current browsers.

When the property is set to "ellipsis", text inputs render both their placeholders and their inner text values as if they had "text-overflow: ellipsis" applied, but only do so if they are not focused. When focused they revert back to "clip". Similarly, selects render the value of the selected option with an ellipsis if the text goes beyond its container's bounds.

We believe that because text form controls exhibit special behavior with this property, it is best to not try to fold it into the existing text-overflow property. Also, we don't think that this should be implemented as rules in a default stylesheet (using the :focus pseudo-class, for example), since that opens the possibility of showing an ellipsis while the text input is focused, and complicate the implementation of drag selection.

Thanks!
Jon

Received on Sunday, 15 January 2012 11:17:56 UTC