Small CSS improvements

[ghost]

These are tiny and work for me. I have not done too much browser testing, only with a recent Firefox.

585350d makes sure that SVGs are at most 75% of the viewport height.

Before:

After:

231d2cb allows breaking words (or long regexes, as it were) within the attribute tables (or any other table cells).

Before:

After:

@jloehel Do you want to review? (The descriptions in the bugs were rather short, so I guess it would make sense to know I am actually fixing the bug in question rather than something random.)

[jloehel]

Hi Stefan,

thanks for asking. I tested it quickly against the docbook.rng. Huge graphs get really tiny, hard to read. I am not sure about the change. I had the idea to make the graphs interactive with https://github.com/d3/d3. But it's also some kind of overhead. Something like that in example: https://observablehq.com/@d3/collapsible-tree. Anyway, I haven't had the time for it.

[ghost]

Thanks for checking, Jürgen! It worked for me, but I guess my RNG schema is not quite as large as DocBook. Ultimately, I guess this may not have an easy (universal) CSS-based solution then :/ Maybe the generator could classify SVG images by their rough (vertical) size and add an HTML class to them?

Making graphs interactive sounds like a very good idea as well though. (One [unrelated] interactivity option that I was missing was being able to click links within the SVG. Not sure if it's possible to embed links with Graphviz.)

I am going to pick 231d2cb off here and merge it, I think that one works suitably well.

[jloehel]

Thanks for checking, Jürgen! It worked for me, but I guess my RNG schema is not quite as large as DocBook. Ultimately, I guess this may not have an easy (universal) CSS-based solution then :/ Maybe the generator could classify SVG images by their rough (vertical) size and add an HTML class to them?

That's true. The DocBook schema has really large graphs. The idea sounds good. I guess we can use the size from here:

rng2doc/src/rng2doc/rng.py

Lines 156 to 158 in dfdc888

	svg = etree.fromstring(graph.create_svg())
	svg.attrib.pop("width")
	svg.attrib.pop("height")

instead of throwing it away. I am not even sure why I did it. The commit message does not help. My mistake.

Making graphs interactive sounds like a very good idea as well though. (One [unrelated] interactivity option that I was missing was being able to click links within the SVG. Not sure if it's possible to embed links with Graphviz.)

Linking should be possible with the URL attribute. But we can move the discussion to #23.

I am going to pick 231d2cb off here and merge it, I think that one works suitably well.

👍