Re: Two CSS challenges

In second case (see my original post below) that anonymous box is created 
anyway.
So there is no additional work needs to be done by the UA.

As of the first case then UA is not creating additional boxes by default 
indeed.

But if to use either one of these properties on the element then UA will be 
forced
to create such boxes:

a) display-model: block-inside;
    - hypothetical property that used to be in CSS once but disappeared.
b) box-orient: vertical;
    - property from proposed http://www.w3.org/TR/css3-flexbox
c) flow: <any value but not 'default'>;
    - property from my proposal 
http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm

So with 'flow' solution will look like this:

span
{
   display: inline-block;
   flow: vertical;
   border:1px solid;
   padding:3px;
   vertical-align:baseline;
}

span:active::text
{
   position:relative;
   left: 1px;
   top: 1px;
}


-- 
Andrew Fedoniouk

http://terrainformatica.com




-----Original Message----- 
From: François REMY
Sent: Saturday, December 25, 2010 12:57 PM
To: Andrew Fedoniouk ; www-style@w3.org
Subject: Re: Two CSS challenges

I kinda like the proposal. It has however some drawbacks (it forces
browsers to create virtual elements around text nodes...). Is it really
worth the pain? (it's a question, not an affirmation).

Maybe would it simply better to ask the developer to add an external span if
he really need it. As for the "button" problem, you may want to achieve the
same effect even if it's an image and not text in the button. Maybe the
::inner proposal better fulfill the need.

Regards,
Francois

-----Message d'origine----- 
From: Andrew Fedoniouk
Sent: Saturday, December 25, 2010 9:31 PM
To: www-style@w3.org
Subject: Two CSS challenges

Here are two challenges that have no solutions in modern CSS.

1. Consider this simple markup:

<p> Something <span>Like a Button</span></p>

I would like to define the span above to behave (visually) as a button - on
span:active I would like to shift/offset its text from its normal position
by 1px. Here is its style:

span {
   display:inline-block;
   border:1px solid;
   padding:3px;
   vertical-align:baseline;
}
span:active { ???? }

Straightforward solution of using something like padding:4px 2px 2px 4px;
will not work here because of vertical-align:baseline ...

2. Consider another markup:

<div>
    text 1
    <p>text 2</p>
</div>

By definition [1] "text 1" is wrapped into so called anonymous box -
block element of appropriate type. If I want to draw 1px solid red;
border around that box how would I do so?

...

I suspect that both cases above can be solved if CSS would have ::text
pseudo-element that will match such anonymous text boxes.

In this case solution for case #1 will look like:

span:active::text { position:relative; top:1px; left:1px; }

The ::text is a direct analogy of other pseudo-elements like
::first-letter and ::first-line and matches any
anonymous (synthetic) children of the element.

Happy Holidays.

[1] http://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level

-- 
Andrew Fedoniouk

Terra Informatica Software, Inc.

Received on Saturday, 25 December 2010 23:08:16 UTC