Re:Building a Hexagonal Grid in CSS
by chrisshroba on Friday June 19, 2020 @05:32PM
(#23579065)
If you wanted arbitrary HTML content in the hexagons, would you be able to use SVG? I know you could hack together similar output since SVG supports images, links, text formatting, etc., but I can see people liking the idea of the hexagonal containers being plain divs that you can put whatever content you want into.
[ Parent
| on HN ]
You can put arbitrary HTML elements inside an SVG element embedded in an HTML page:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
I wonder what the accessibility for html in svg is like. But really, isn't this just an iframe with a different name?
Re:Building a Hexagonal Grid in CSS
by chrismorgan on Saturday June 20, 2020 @03:40AM
(#23582466)
No. An iframe is a separate browsing context which as a developer you can’t interact with perfectly, and is segregated from the rest as a user, which has implications on keyboard interactivity especially. Essentially, <iframe> is an accessibility headache. <foreignObject> is just the opposite of <svg>, so it’s no trouble at all.
Shameless plug. https://github.com/SpeciesFileGroup/waxy is coded based on Red Blob Games' incredible tutorials. We use it for visualizations in Rails.
Putting nice markup (or even OK formatted text) into SVG has been a pain for me.
I put an SVG background, then layer the HTML over it.
It works but, I'm not happy about it.
Re:Building a Hexagonal Grid in CSS
by uhoh-itsmaciek on Friday June 19, 2020 @09:23PM
(#23580684)
Check out the sibling answer above, you can embed HTML in svg and it generally works well: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
I'm familiar with those docs. That method was a poor experience for my mobile users. SVG support on mobile is not that great. Sadly FF had the most issues so I'm stuck with my workaround for now.
This example doesn't even show how it would place content inside the grid... and I suspect any attempt to do so with anything more than trivial text excerpts would result in the layout shattering, or the content clipping. And attempting to fit hexagonally-shaped content into the exact elements of the grid seems even less likely, here.