- From: Giovanni Campagna <scampa.giovanni@gmail.com>
- Date: Tue, 20 Jan 2009 18:38:24 +0100
- To: www-style@w3.org
- Message-ID: <65307430901200938l6d3ec299r32e1a544d7ef1eeb@mail.gmail.com>
*Preamble*:
One of the features I like most in Microsoft Excel is the ability to align a
currency symbol on the left, while styling the value on the right. Few days
ago I wanted to reproduce this behaviour in a HTML table and I found a
problem: CSS supports only one alignment per box. So I thought: I'll put the
box with currency before the table-cell, that is:
td::before {
text-align: left;
content: attr(my|currency,string);
}
td {
text-align: ",";
display:table-cell; /* from UA defaults */
}
but this approch has a limit: it introduces a new table cell, that moves all
subsequent cells on the rigth, destroying the whole layout. What I need is
content before cell content, not before cell box itself.
*A clean solution: the ::inside pseudoelement*:
The ::inline pseudo-element represent the content of its superior parent,
instead of representing the superior parent itself.
Pseudo-elements attached to ::inside will be relative to the anonymous box
that contains superior parent's content, so they will be part of ::inside's
superior parent's box.
so td matches the table-cell boxes, td::inside matches the anonymous line
box containing "55,87" and td::inside::before will match an anonymous line
box (since boxes created with ::after and ::before inherit display from
their superior parent, instead of having display:inline by default) inside
the table cell box.
*
Alternative solutions*
- if you think that ::inside is useful only togheter with ::after and
::before, you can put ::after-content and ::before-content: this reduces
complexity but limits the possibility to style ::inside boxes:
use case for direct styling to ::inside:
element {
Received on Tuesday, 20 January 2009 17:40:51 UTC