OblomovMar 31, 2023

I love the #SVG format. It's not perfect, but it has some amazing features, and with all the issues in its support across different browsers, it still remains a solid vector graphics format.

One of the things I love the most about #SVG is that it allows interaction and dynamic content without requiring #JavaScript. This isn't actually an #SVG feature _per se_, but it's related to the spec integrating support for #SMIL, and XML language for dynamic content.

Show threadOblomovMar 31, 2023
#SVG also supports and incredibly powerful element: #switch. The combination of switch and #SMIL allows some impressively sophisticated things do be achieved in SVG without using #JavaScript or serverside funkiness, and honestly, I love these features SO MUCH that I really wish HTML was extended to support them too.
Show threadOblomovMar 31, 2023
In fact, there was an attempt to add #SMIL support in #HTML: it was called #TIME (Timed Interactive Multimedia Extension)
https://en.wikipedia.org/wiki/HTML%2BTIME
proposed by #Microsoft and #Macromedia and, after being submitted to the #W3C, evolved into the W3C Note (not even a recommendation) for XHTML+SMIL
https://en.wikipedia.org/wiki/XHTML%2BSMIL
No other browser than #InternetExplorer ever added support for it, and honestly, I see that as a loss.
HTML+TIME - Wikipedia

Show threadOblomovMar 31, 2023
WIth the integration of #MathML and #SVG standards into #HTML5, there is actually some of things moving forward in this direction, although I doubt any of the existing implementation actually plans on investing resources in it. One of the benefits of having more competition in this area would be better chances of a growth in this regard.
Show threadOblomovMar 31, 2023
I actually wonder if some kind of #JavaScript polyfill could be created to implement support for these features without UA support. It would be suboptimal, similarly to how #MathJax is inferior to UA support for #MathML, but could work as a stopgap solution to promote the adoption and standardization of these extensions.
Show threadOblomovMar 31, 2023

I've tried a quick test to see if you can exploit the #HTML5 inclusion of #SVG to have a <switch>. It doesn't really work as expected, so you have to do a double wrapping:

svg > switch > [foreignObject > your HTML here]+

which obviously doesn't work as expected …

Show threadOblomovMar 31, 2023

You can _almost_ implement the #SVG `switch` element in pure #HTML + #CSS with something like:

switch > * {
display: none;
}
switch > *:lang(...) {
display: initial
}

with only one issue: there's no way to put in that :lang() pseudo-class “whatever the user asked for”. So you still need some #JavaScript or server-side assistance to bridge the gap between the user language selection and the styling.

So close …

Show threadPetterOfCatsMar 31, 2023

@oblomov are you trying to use `systemLanguage`?

```
<switch>
<text systemLanguage="en">Hello World</text>
<text systemLanguage="fr">bonjour le monde</text>
</switch>
```

Show threadOblomovMar 31, 2023
@PetterOfCats I was trying to do it in HTML though.
Show threadPetterOfCats

@oblomov It's part of SVG.

"systemLanguage is often used in conjunction with the <switch> element. If the attribute is used in other situations, then it represents a simple switch on the given element whether to render the element or not."

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/systemLanguage

systemLanguage - SVG: Scalable Vector Graphics | MDN

The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.

Mar 31, 2023 at 7:44pmWeb
Show threadOblomovMar 31, 2023

@PetterOfCats I know (did you miss the rest of the thread? <https://sociale.network/@oblomov/110118920134217081>)

What I'm doing now is testing if you could achieve a similar effect in HTML without using JavaScript.

Oblomov (@[email protected])

I love the #SVG format. It's not perfect, but it has some amazing features, and with all the issues in its support across different browsers, it still remains a solid vector graphics format. One of the things I love the most about #SVG is that it allows interaction and dynamic content without requiring #JavaScript. This isn't actually an #SVG feature _per se_, but it's related to the spec integrating support for #SMIL, and XML language for dynamic content.

sociale.network
Show threadPetterOfCatsMar 31, 2023
@oblomov Sorry, maybe I'm missing something. I thought you were trying to display an HTML element inside SVG based upon language, which the attribute systemLanguage would accomplish. No JS involved.
Show threadOblomovMar 31, 2023
@PetterOfCats no, I'm trying to implement something like the SVG switch, but directly in HTML. The html > svg > foreignObject is a hack that kind-of works, but with several limitations (sizing, interaction with floats, etc).
Show threadPetterOfCatsMar 31, 2023
@oblomov oh ok, I don't think that will ever happen. unfortunately, HTML is very static, by design, which is why we have JS, etc. If it wasn't, we wouldn't need them.