Re: [css3-gcpm] Controlling alignment of leaders

On Sunday 27 March 2011 18:53:01 Bert Bos wrote:
> The section on leaders says that UAs should try to align the glyphs
> in leaders in multiple lines. That is indeed often what you want,
> especially with the most common of all leaders, the dot leader. But
> sometimes it isn't.
> 
> You may want to have equal space at the start and end of the leader,
> or align the glyphs to the left or right. This is an example where I
> I'd like to get rid of the gap at the right end of the leader:
> 
>     span::after { content: leader("⎯") "→"; font-family: Symbol }
> 
> I was hoping to create an arrow leader by repeating the horizontal
> line extension character (\23AF) and ending with a right-pointing
> arrow (\2192). If you have Prince, you can try my attempt at the
> bottom of http://www.w3.org/Style/Examples/007/leaders
> 
> I haven't thought about a good syntax yet, but maybe an optional
> second parameter on the leader() notation? Or variants of leader()
> itself?
> 
>     content: leader("⎯", right) "→"
> 
>     content: end-leader("⎯") "→"

Thinking a bit more about that: I might also want a double-headed arrow.

The following works, using the attached arrow image:

    span::after {
        content: leader(" ");
        border-image: url(arrow1.png) 0 58 / 0 0.5em;
    }

... but it is not so convenient if I want to change the color.


For comparison: TeX doesn't have leaders that align left or right. 
Instead it adds some negative space before the arrowhead to make sure it 
overlaps the last horizontal bar. But in CSS's 'content' property, we 
have no way to insert negative space.

Maybe we can borrow from MathML instead:

MathML has many stretchy symbols, including several kinds of arrows, 
horizontal curly braces ⏞ and horizontal parentheses ⏜. If you put any 
of these in a <mover> or <munder>, it will intelligently stretch to fill 
the available space. (Here is an example[3].) Any UA that supports 
MathML, such as Firefox, already knows how to do that. But how do you 
put MathML inside CSS?

Or should we define that leader() automatically acts like MathML? I.e., 
whenever it contains exactly one glyph that is stretchy (according to 
MathML's operator dictionary[2]), it stretches the glyph, rather than 
repeats it:

    content: leader(".")     /* Repeated */
    content: leader("→")     /* Stretched */
    content: leader(" →")    /* Repeated, because not a single glyph */
    content: leader("*")     /* Repeated */
    content: leader("↔")     /* Stretched */


> [1] http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/#leaders

[2] http://www.w3.org/TR/2010/REC-MathML3-20101021/appendixc.html#oper-
dict.entries-table
[3] 
http://www.w3.org/Math/testsuite/build/main/Presentation/ScriptsAndLimits/munder/munder2-
plain.xhtml



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France