search

skishore / makemeahanzi

Free, open-source Chinese character data
https://www.skishore.me/makemeahanzi/
Other
1.85k stars 464 forks source link

Animation doesn't start on Firefox #13

Closed parsimonhi closed 7 years ago

parsimonhi commented 7 years ago

Hello,

First at all, congratulations for the great job you did.

It seems that animation doesn't start when using Firefox and svg files (i tested it using a simple page containing <body><embed src="31119.svg" width="200px" height="200px"/></body>).

To solve the issue, i just removed the "scoped" attribute from the "style" tag from the svg files. May be Firefox has this strange behavior because it does something with this attribute et is buggy while other browsers just ignore it.

skishore commented 7 years ago

Thanks for your note! It looks like scoped was dropped from the HTML spec around January: https://github.com/whatwg/html/issues/552

Unfortunately, without some kind of scoping, it's no longer possible to include multiple animations on the same page without their CSS conflicting with each other. I thought about including the character in the animation names so that at least different characters would have separate CSS rules, but that kind of fix is a poor band-aid that could cause a site to break if it tried to render, say, 妈妈.

Having multiple animations on the same page will require some custom Javascript until HTML supports better scoping than it does currently. If you have any ideas, I'd be happy to hear them!

parsimonhi commented 7 years ago

Even if it is not absolutely required, it is a good idea to give a unique name to css data (and also to tag identifiers).

About the possible conflicts, it depends of the way you include svg files in your pages. If you include svg files as is (using for instance the php "include" instruction), css names (and also tag identifiers) have to be all different, otherwise the result is impredictable. But if you include svg files using embed (or iframe) tags, there is no conflict because css names and tag identifiers of svg will not be visible at the page level. See http://gooo.free.fr/animCJK/test/visibility.php for a sample.

Anyway, in all cases, you have to change animation-delay values or to delay animation using javascript.

So i include svg using php that reads svg files, and modifies their contents (css names, tag identifiers and animation delays) before including them in the page. See http://gooo.free.fr/animCJK/test/several.php for a sample.

Note 1: i don't use your svgs but a simplified version of them (i prefer to use a constant animation duration for all strokes, so that simplifies a lot the code). I also changed median lists, svg tags (use of def tag), css and identifier names (add of the prefix hvg+decimal code of the character). Note 2: the php code of visibility.php and several.php is very simple (roughly 20 lines of code which read, parse and replace data in svg files), but i can provide them if you want.

skishore commented 7 years ago

You're absolutely right that its important to have unique ids for all of these CSS rules. My point was just that I can't provide those in the SVG files alone, since the user might want to include the same character twice on a page with different offsets. A solution like your ID renaming code is what I had in mind, but the iframe approach is new to me. Thanks for the tip!

I think the main takeaway for me is that it would be nice to include a small Javascript that does what my animation library and your PHP code do. For example, it could take a DOM element, a delay, and the character data, and render a character animation there with a unique ID. That would make it much easier for people to include this stuff if all they want are animations.

parsimonhi commented 7 years ago

Well! Try this one: http://gooo.free.fr/animCJK/test/jsInSvg.php

In the calling page, one only need something like <iframe src='nnnnn.svg'></iframe>. A javascript included in every svg does the rest (same code for all svg). No php required, and no javascript in the calling page.