Number: 2054
Title: Verbose and non-accessable SVG markup for tooltips
Submitter: Tobias Schultze
Date: Wed Oct 13 00:32:29 2010
Subsys: Output generation
Version: 2.26.3
System: *-*-
Severity: minor
Problem:
Hello,

the generated SVG markup has two problems.

First, it's verbose because it has comments for every node and edge. Example:


<!-- 802967 -->
<g id="node1" class="node"><title>802967</title>
<ellipse fill="none" stroke="black" cx="3757" cy="-3210" rx="38.2368" ry="18"/>
<text text-anchor="middle" x="3757" y="-3205.4" font-family="Times New Roman,serif" font-size="14.00">802967</text>
</g>
<!-- 111975 -->
<g id="node3" class="node"><title>111975</title>
<ellipse fill="none" stroke="black" cx="3230" cy="-3138" rx="38.2368" ry="18"/>
<text text-anchor="middle" x="3230" y="-3133.4" font-family="Times New Roman,serif" font-size="14.00">111975</text>
</g>
<!-- 802967&#45;&gt;111975 -->
<g id="edge2" class="edge"><title>802967&#45;&gt;111975</title>
<a xlink:title="802967 vs 111975&#10;1 matches&#10;Wins: 1&#8211;0">
<path fill="none" stroke="black" d="M3718.78,-3208.98C3636.74,-3206.08 3438.12,-3195.24 3277,-3156 3274.04,-3155.28 3271.01,-3154.42 3267.99,-3153.47"/>
<polygon fill="black" stroke="black" points="3269.06,-3150.14 3258.46,-3150.22 3266.8,-3156.77 3269.06,-3150.14"/>
</a>
<a xlink:title="1 wins for 802967 over 111975">
<text text-anchor="middle" x="3709.55" y="-3208.24" font-family="Times New Roman,serif" font-size="14.00">1</text>
</a>
</g>

The comments are useless and only bloat document size. They should be removed.

Second, the markup uses non-accessable elements for tooltips. When you do not specify tooltips (with the attributes tooltip, headtooltip or tailtooltip) in your dot file, it's ok to generate <title></title> elements for each node and edge as it is done now. But when you specify tooltips these title elements should instead contain the tooltip content. At the moment a new <a xlink:title="..."> gets included which is not the proper way for tooltips. See also http://www.w3.org/TR/SVG/struct.html#DescriptionAndTitleElements In fact WebKit is the only browser layout engine which understands xlink:title (but still uses <title></title> when there's no xlink:title). Gecko (Firefox) and Presto (Opera) display the <title></title> content for tooltips. So changing it would make it work for all browsers.

Greets Tobias
Input:

digraph SportResultsGraph {
    802967 -> 111975 [weight=1,penwidth=1,arrowsize=1,tooltip="802967 vs 111975&#10;1 matches&#10;Wins: 1&#8211;0",taillabel="1",tailtooltip="1 wins for 802967 over 111975",headtooltip="0 wins for 111975 over 802967"];
}
Comments:
[erg]

>
> The comments are useless and only bloat document size. They should be removed.
>
Comments are not useless, and don't add that much to the size. There must be tools that will filter out comments.

> Second, the markup uses non-accessable elements for tooltips.
> When you do not specify tooltips (with the attributes tooltip, headtooltip or tailtooltip) in your dot file,
> it's ok to generate <title></title> elements for each node and edge as it is done now.
> But when you specify tooltips these title elements should instead contain the tooltip content.
> At the moment a new <a xlink:title="..."> gets included which is not the proper way for tooltips.
> See also http://www.w3.org/TR/SVG/struct.html#DescriptionAndTitleElements
> In fact WebKit is the only browser layout engine which understands xlink:title (but still uses <title></title> when there's no xlink:title).
> Gecko (Firefox) and Presto (Opera) display the <title></title> content for tooltips.
> So changing it would make it work for all browsers.
>
Well, this is a problem. I agree that the svg spec says:


  In general it is preferable to use a `title' child element rather than a `title' attribute.

On the other hand, I find that, as you say, Opera ignores xlink:title but uses <title></title>, but Firefox uses xlink:title and ignores <title></title>. (Safari uses xlink:title but if it is not there, it falls back to <title></title>.)

I suppose one solution would be to put the tooltip in both.

[tobias] I think you misunderstood my report concerning comments. Comments are indeed not useless but I was referring to the comments that are auto-generated without specifying a comment attribute in dot. These should not be included. Furthermore, specified comments in dot are mapped to additional SVG comments with <!-- -->. I suggest to map them to <desc></desc> elements which is there for exactly such use cases.

You are right that Firefox 3.6 uses xlink:title and ignores <title></title>. I was testing with Firefox 4 which uses <title></title>. So yes, the best solution would be to put the tooltip in both at the moment.

One more thing. I wondered why the dash character (-) is nonsensically escaped into a Unicode character reference (&#45;) everywhere in SVG. I found the problem in the source code. In file labels.c line 479 to 482:


else if (*s == '-') {	/* can't be used in xml comment strings */
	    sub = "&#45;";
	    len = 5;
}

Dash can be used in XML and it doesn't belong to the XML entities to be escaped (<,>,&,",'). But some dash-combinations may not be used in comments only.

"For Compatibility, the string "--" (double-hyphen) MUST NOT occur within comments. Parameter entity references MUST NOT be recognized within comments. Note that the grammar does not allow a comment ending in --->. The following example is not well-formed. <!-- B+, B, or B--->" http://www.stylusstudio.com/w3c/xml11/sec-comments.htm

So this is a bit tricky. I propose to add a parameter like "iscomment" to the xml_string() function. So dashes get only escaped in comments and <,>,&,",' do not get escaped there. This would allow "-" inside IDs etc.

Anyway, as stated above I would remove these system-comments away and put user-comments inside <desc></desc>.

[erg]


>
> I think you misunderstood my report concerning comments.
> Comments are indeed not useless but I was referring to the comments that are
> auto-generated without specifying a comment attribute in dot.
> These should not be included. Furthermore, specified comments in dot are
> mapped to additional SVG comments with <!-- -->.
> I suggest to map them to <desc></desc> elements which is there for exactly
> such use cases.
>
Not exactly. I know the default node and edge comments are very helpful for a human reading the SVG output. If no human is going to read it, then we could presumably do away with newlines as well.

The code could be altered to make the use of node/edge comments an option, with an attribute or -Tsvg-no-comment, but it doesn't seem worth it.


> You are right that Firefox 3.6 uses xlink:title and ignores <title></title>.
> I was testing with Firefox 4 which uses <title></title>.
> So yes, the best solution would be to put the tooltip in both at the moment.
As for this and the escaped dash, and converting comments into <desc></desc>, I will plead quasi-ignorance and leave this to John or Stephen, who are more familiar with our SVG renderer and why it is the way it is.
Owner: *
Status: *