Re: [css3-gcpm] Re: conditional floats on paged media

Also sprach Cameron McCormack:

 > I like the idea of being able to declaratively alter my references to 
 > figures and sections based on where they end up.

Me, too. At least in principle.

 > > But it's stretching the declarative model. JavaScript seems to offer
 > > the required escape hatch for these cases. Or, how would you spec this
 > > output in CSS:
 > >
 > >    The figure is on this page.
 > >    The figure is on the next page.
 > >    The figure is on the previous page.
 > >    The figure is on page 6.
 > >
 > >>From this HTML code:
 > >
 > >    The figure is <a href=#figure>here</a>.
 > 
 > .figure {
 >    float: snap;
 > }
 > 
 > a:target-matches(attr(href, url), .figure)
 >   :target-counter(attr(href, url), page, same) {
 >    content: "on this page";
 > }

Hmm. I don't understand why you select children of <a>; <a> has no
children. Perhaps you meant:

 a:target-matches(attr(href url), #figure):target-counter(attr(href url), page, same) {
    content: "on this page";
 }

(In addition to removing the space, I've also removed two commas (to
align with the new css3-values syntax), and changed the .class into an
#id selector (to match the sample HTML code))

This would presumably select certain <a> elements, depending on two conditions:

  1) that the <a> element points to the figure
  2) that the <a> element and its target are laid out on the same page

Intiuitively, I understand (1) and the proposed syntax.

I'm struggling a bit more with (2). You're using the
"target-counter()" function which, in GCPM, returns a numeric value
for the 'content' property. Like this:

  a::after { content: "(see page " target-counter(attr(href url), page, decimal) ")" }

In your example, though, it's a boolean function, which queries where
a element appears, right? Perhaps we could find a better name for it.
E.g.:

  :target-placement(attr(href url), page, same)
  :target-layout(attr(href url), page, same)
  :target-place(attr(href url), page, same)

This I could more easily understand.

Then we would (e.g.) have:

  a:target-matches(attr(href url), #figure):target-layout(attr(href url), page, same) {
     content: "on this page";
  }

or even:

  a:target-matches(attr(href url), #figure):target-layout(attr(href url), same, page) {
     content: "on this page";
  }

which reads slightly better.

In most cases, the syntax would be even simpler; (1) isn't really
needed if the styling is the same for all <a> elements, or a class of
<a> elements. E.g., we could write:

  a:target-layout(attr(href url), same, page) { content: "on this page"  }

or:

  <a class=desc href="...">..</a>
  a.desc:target-layout(attr(href url), same, page) { content: "on this page"  }

Adding the other conditions, we would get:

  a:target-layout(attr(href url), same, page) { content: "on this page"  }
  a:target-layout(attr(href url), next, page) { content: "on the next page"  }
  a:target-layout(attr(href url), previous, page) { content: "on the previous page" }

which even I can read without incurring excessive heachaches. 

We could also do:

  a:target-layout(attr(href url), same, page) { content: "on this page" }
  a:target-layout(attr(href url), same, spread) { content: "on the opposing page" }

... if 'same, spread' is defined to only be true if the content is not
on the same page, but on the other page of the same spread.

Adding columns to the mix also seems natural:

  a:target-layout(attr(href url), same, column) { content: "in this column" }
  a:target-layout(attr(href url), next, column) { content: "in the next column" }
  a:target-layout(attr(href url), next, page) { content: "on the next page" }

but we can't easily generate these:

  "in the first column on the next page"
  "in column 2 on the next page"

That's probably ok.

In conclusion, I think (2) is within scope of GCPM and the proposed
solution seems reasonable. I'm happy to write it up and add it to the
editor's draft. 

I'm less convinced about (1). First, I don't think it's neeeded in
most cases. Second, if we need it, it probably belongs in a selectors
draft. Third, selectors within selectors are somewhat scary.

 > Being able to tell whether the figure was floated in the end or not 
 > would also be useful.
 > 
 > a:target-matches(attr(href, url), .figure:not(:floating)) {
 >    content: "below";
 > }
 >
 > That does invite you to wonder what
 > 
 >    :floating { float: none; }

Yes, tricky.

 > and
 > 
 >    a:target-counter(attr(href, url), page, same) {
 >      counter-reset: page;
 >    }
 > 
 > might mean, though.

I don't think page counters should play into this: even if each
chapter of a book resets the page counter, the chapter heading would
still be on different page. So we should probably be able to process
the code above.

Cheers,

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome

Received on Saturday, 18 August 2012 09:53:20 UTC