- 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