Re: [CSS3] horizontal/vertical-align ?

On Wed, Apr 21, 2010 at 11:46 PM, Andrew Fedoniouk
<news@terrainformatica.com> wrote:
> Are there any plans to
> a) fix 'vertical-align' property  b) and to introduce something like
> 'horizontal-align' ?
>
> Consider this:
>
> span {
>  display: table-cell; /* or display:inline-block */
>  vertical-align: bottom; /* ?????? */
> }
>
> It is not clear what vertical-align: bottom means here.
>
> vertical-align  has completely different meanings in different  contexts.
>  In display:table-cell it means alignment of element's content and in inline
> context - alignment of the element itself.
>
> I am considering this as a bug of specification.
>
> In principle it has to be separate property like content-vertical-align
> or vertical-align should accept two values: self-alignment and
> content-alignment.

vertical-align is the way it is for mysterious legacy reasons, and
can't be changed at this point.  Far too much content depends on
vertical-align acting the way it does for table-cells and inlines.
CSS2.1 does define exactly what it means to use it in the two
contexts, though; in the vertical-align entry, it specifically calls
out that the property has a different meaning on table cells, and
points you to the table chapter for details.


> There is also a need for horizontal-align with the meaning of content
> alignment.
>
> Consider this:
>
> div {  horizontal-align: right; overflow-x: hidden; }
> div > p {  width: 200px; }
>
> P elements inside the div should "stick" to right side of the div.
> If content of the div overflows (e.g. its used width is less than 200 px)
> then we should see right sides of  P elements. Currently all UAs exhibit
>  left alignment when content overflows
> and there is simply no way to change this in CSS.
> overflow-y/vertical-align should demonstrate the same behavior.
>
> There are cases, e.g. while animating when such overflow/align beahvior is
> highly desirable.
> And yet, having it we can define in default CSS of HTML the following:
>
> [dir="rtl"]
> {
>  direction: rtl;
>  text-align: right;
>  horizontal-align: right;
> }
> [dir="ltr"]
> {
>  direction: ltr;
>  text-align: left;
>  horizontal-align: left;
> }

The main use-cases for horizontal-align are addressed by flexbox,
which is a layout mode very similar to static layout, but designed
more for the layout of blocks than of text.

~TJ

Received on Thursday, 22 April 2010 15:18:53 UTC