W3C home > Mailing lists > Public > www-style@w3.org > September 2011

[css] explicit baseline position control

From: Andrew Fedoniouk <andrew.fedoniouk@live.com>
Date: Fri, 9 Sep 2011 20:44:58 -0700
Message-ID: <BLU165-ds7D4BDBE0D9ED989A178CCF8000@phx.gbl>
To: <www-style@w3.org>
Let's consider compound widget like <input type=number> that is 
rendered for example as: 

Under the hood this widget is defined as

<input type=number>
   <button .plus />
   <button .minus />

and styled as 

   display: inline-block;
   flow: row(1 2)
            row(1 3);

input[type=number] > text { size:*; line-height:1.2em; }
input[type=number] > button { width: sys-scrollbar-width; height:*; }

Now consider that such input is placed inside line box context
like this:

   Enter your age: <input type=number>

Ideally baselines of "Enter your age:" text and input>text child
element should be aligned - placed on the same line.

I believe there is a need of some explicit declaration of which
child element of the widget should be used as a "baseliner".

I am thinking about adding something like 

  baseline: principal | none | <length>;

that will allow to declare child as baseline:principal  or
by using length to define baseline offset "manually".

Thus CSS rule above can be defined as:

input[type=number] > text 
{   size:*; 
    baseline:principal;  }

Any comments, objections?

I believe we have to have something like this, especially 
in light of flexbox & friends.

Andrew Fedoniouk

Received on Saturday, 10 September 2011 03:45:38 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 11 February 2015 12:34:57 UTC