Re: [CSS3 box] Proposal: content-align

----- Original Message ----- 
From: "Manuel Strehl" <manuel.strehl@stud.uni-regensburg.de>
To: <www-style@w3.org>
Sent: Tuesday, September 12, 2006 11:48 AM
Subject: [CSS3 box] Proposal: content-align


>
> Hi.
>
>
> There was some time ago a discussion about vertical alignment of block 
> elements' content
> ( http://lists.w3.org/Archives/Public/www-style/2005Jun/0039 ).   I looked 
> through CSS 3
> box model and haven't found anything to do this kind of job  (it IS 
> actually working for
> table cells with vertical-align in a quite similar way...):
>
>    |-           width            -|
>
>    +------------------------------+ -
>    |This is some text that        | |
>    |doesn't completely fill       |
>    |a block element               |
>    |                              | height
>    |                              |
>    |                              |
>    |                              | |
>    +------------------------------+ -
>
>                  \   /
>                   \ /
>                    V
>
>    +------------------------------+
>    |                              |
>    |                              |
>    |    This is some text that    |
>    |    doesn't completely fill   |
>    |    a block element           |
>    |                              |
>    |                              |
>    +------------------------------+
>
>
>
> Therefore my proposal:
>
> Name:            content-align
> Value:           [[<percentage> | <length> ]{1,2}
>                    | [[top | center | bottom] || [left | center | 
> right] ]] | auto
> Initial:         0% 0%
> Applies to:      block elements
> Percentages:     refer to width and height of container element
>
> Description:     The bounding box of the content is computed. Afterwards 
> it is aligned
>                  inside  the containing  block element  according to the 
> value  of  the
>                  content-align property.
>
> E.g.,  'content-align: center;'  means  the rendering just like my second 
> example above.
> This property is somewhat similar to 'fit-position', just without the 
> 'fit' part.
>

That could be accomplished (more universally and naturally)
if CSS will have HTML relative units [1] implemented

So vertical alignment inside container can be defined as:

.content-verticaly-aligned-to-bottom
{
   box-sizing: padding-box;
   height: 100px;
   padding-top: *;
   padding-bottom: 0;
}

.content-verticaly-aligned-to-top
{
   box-sizing: padding-box;
   height: 100px;
   padding-top: 0;
   padding-bottom: *;
}

.content-verticaly-aligned-to-middle
{
   box-sizing: padding-box;
   height: 100px;
   padding-top: *;
   padding-bottom: *;
}

.content-verticaly-aligned-proportionally-1-2
{
   box-sizing: padding-box;
   height: 100px;
   padding-top: 1*;
   padding-bottom: 2*;
}

Same apply to horizontal direction.

[1] http://www.w3.org/TR/html4/types.html#h-6.6 -> MultiLength -> relative 
length

Andrew Fedoniouk.
http://terrainformatica.com

Received on Wednesday, 13 September 2006 07:14:32 UTC