[css] explicit baseline position control

• From: Andrew Fedoniouk <andrew.fedoniouk@live.com>
• Date: Fri, 9 Sep 2011 20:44:58 -0700
• To: <www-style@w3.org>
• Message-ID: <BLU165-ds7D4BDBE0D9ED989A178CCF8000@phx.gbl>

Let's consider compound widget like <input type=number> that is 
rendered for example as: 
http://terrainformatica.com/w3/input-number.png

Under the hood this widget is defined as

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

and styled as 

input[type=number] 
{  
   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:*; 
    line-height:1.2em; 
    baseline:principal;  }

Any comments, objections?

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

-- 
Andrew Fedoniouk

http://terrainformatica.com

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