Help requested for HTML5/CSS ...

If I want to make a page that has a few boxes, each with some text, laid out on the page and with arrows between them, what's the easiest, most basic way to do that.

puzuvuku I would have done this with tables and it would have been easy enough, but people tell me I'm not allow to use tables any more.

· · Web · 5 · 1 · 0

@ColinTheMathmo Who says you're not allowed to, and is there any reason to listen to them if tables work well for you?

@icecolbeveridge Well, this would be a table of about 600 by 800 cells, only about 1200 would have content, so there has to be an easier way, and I really ought to learn it.

@ColinTheMathmo Fair enough! I would probably knock up an SVG in graphviz. I've also seen jsPlumb mentioned, but not used it.

@icecolbeveridge I'm currently using SVG, but that's proving problematic. When someone downloaded the SVG from my server, where it rendered perfectly, and uploaded it to another service, it no longer rendered correctly. none of us know why.

But I'd like more facilities in each node than I know how to get with SVG, but do know how to get with HTML, so actually rendering in HTML seems like a "Good Thing(tm)" ... if only I knew how to do it.

@ColinTheMathmo Hm, awkward. I suspect there's a way to hack it with cleverly-positioned divs, but I would hope there's an easier way I don't know of.

@icecolbeveridge There are things that do dynamic layout, such as D3, but the problem is that (a) the layout then tend to wobble and make me seasick, and (b) no one has adequately explained to me what's really going on so I can actually use it for anything other than the examples I've seen.

It's all quite horribly unless you decide to devote your life to front-end programming.

@icecolbeveridge But you replied ... thank you.

Have you tried the Chartodon 'bot?

(Rhetorical question, I could check the logs)

@ColinTheMathmo @icecolbeveridge You can put SVG directly in your HTML5 or XHTML document. You can also put XHTML in your SVG document.

Only empirical experiments can tell you what combinations of elements turn out non-surprising on which browsers.

@ColinTheMathmo Don't you love the way things that are easy get redesigned to be too difficult for ordinary people to do them any more? (Maybe draw on paper and post a pic?)

@wendyg In this case I'd be doing something that can't be done on paper. See here:

That's a small example compared with some.

CC: @icecolbeveridge

@shironeko When you're laying out an actual table, nothing. When you're doing something completely different, tables might not be the right thing to use.

Consider this:

That's a small example. it would be nice to have the capability to render it in HTML/CSS, and one feels that it should be possible.

@ColinTheMathmo actually there does seems to be some pretty good looking tree diagrams in just html/css

@shironeko Yeah, although my diagrams can be pretty large and crowded, and not always DAGs.

But yes, this should be out there, I just can't find something that fits well.

Still looking.


@ColinTheMathmo oof, generating general graph embeddings that looks good is really hard.

@shironeko I'm not looking for totally general layout, so maybe it's not so bad. But it is graph layout, and that is difficult.

@ColinTheMathmo if you want it to be responsive then it has to be described pragmatically. probably just go with js, it would be saner.

@shironeko But then we still have the question ...

I have a medium sized chart, each node should have some text and multiple areas that link to URLs. How can I easily lay that out in a browser?

Let's assume it won't be pathological, and let's assume it doesn't need to be dynamic. Just:

Here's a graph, draw it for me.

I'd assume it's possible in HTML/CSS, I don't mind using js although it would be sub-optimal.

I've just never seen *any* way of doing it.

@ColinTheMathmo with html/css the only way I can think of is have fix position text boxes and have lines joining them with css transform. this will be a big pain if you need to write it by hand.

SVG would be the best option. With SVG you can also have links to other site and it'll look good, but you want to create accessibility hints for those that needs it.

with js there's loads of graph drawing libraries, and libraries that can convert graph in whatever format you had into them. D3 I think is a big one.

@ColinTheMathmo Not sure if it's the "most basic", but if you're OK with DOT/Graphviz I think d3-graphviz could be useful:

The sample usage looks simple enough:

@nikola I need to investigate, but my nodes have to have text and clickable URLs, so I'm not sure that's going to be powerful enough.

But I'll check it out ... thanks.


Your chart is ready, and can be found here:

Things may have changed since I started compiling that, and some things may have been inaccessible.

The chart will eventually be deleted, so if you'd like to keep it, make sure you download a copy.

Sign in to participate in the conversation

The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!