I use FastWordQuery to import definitions from local stardict dictionaries to Anki. But the same dictionary looks pretty on Koreader (right) & but not so pretty on Ankidroid (left): (device onyx eink reader)
The .lua script inside the dictionary folder contains the following code:
return function(html)
html = html:gsub('<rref[^>]*>[^<]*%.wav</rref>', '🔊')
html = html:gsub('<rref[^>]*>[^<]*%.jpg</rref>', '⛶')
html = html:gsub('<k[^>]*>[^<]*</k>', '')
html = html:gsub('<c>', '<span>')
html = html:gsub('</c>', '</span>')
html = html:gsub('<c c="', '<span style="color:')
html = html:gsub('"color:indigo"', '"color:#4B0082"')
html = html:gsub('"color:darkgray"', '"color:#A9A9A9"')
html = html:gsub('"color:lightcoral"', '"color:#F08080"')
html = html:gsub('"color:lightseagreen"', '"color:#20B2AA"')
html = html:gsub('"color:darkgoldenrod"', '"color:#B8860B"')
html = html:gsub('"color:orangered"', '"color:#B8860B"')
html = html:gsub('"color:sienna"', '"color:#B8860B"')
html = html:gsub('"color:darkred"', '"color:#B8860B"')
html = html:gsub('"color:navy"', '"color:#B8860B"')
html = html:gsub('"color:red"', '"color:#B8860B"')
return html
end
This code changes the .wav / .jpg text to icons, changes the color of some annoying words to grey etc. But this does not work on Anki.
How can I use the same .lua script to make it look as good as Koreader?
Anki does not support styling your HTML with lua. So your options are:
Translating your lua script to JavaScript. This might include one or more of the following:
Learn enough about lua and JavaScript to be able to do this by hand.
Use a lua to js transpiler. With a quick search i found lua.js, but i have not used it and cannot say if it is up for the task.
Use AI™. Paste in the lua script and ask for a JavaScript equivalent. Or past in your own translation efforts and ask for improvements. Or paste in the transpilation from lua.js and ask for improvements. In general, expect some errors and some nonsense code. But it might still be useful.
Throw your existing lua script away, and start from scratch with JavaScript and CSS.
Thanks for the suggestions. I am trying ChatGPT to conver the lua file to js. It is telling me to put this code in styling tab:
<script>
function convertHtml(html) {
html = html.replace(/<rref[^>]*>[^<]*\.wav<\/rref>/g, '🔊');
html = html.replace(/<rref[^>]*>[^<]*\.jpg<\/rref>/g, '⛶');
html = html.replace(/<k[^>]*>[^<]*<\/k>/g, '');
html = html.replace(/<c>/g, '<span>');
html = html.replace(/<\/c>/g, '</span>');
html = html.replace(/<c c="/g, '<span style="color:');
html = html.replace(/"color:indigo"/g, '"color:#4B0082"');
html = html.replace(/"color:darkgray"/g, '"color:#A9A9A9"');
html = html.replace(/"color:lightcoral"/g, '"color:#F08080"');
html = html.replace(/"color:lightseagreen"/g, '"color:#20B2AA"');
html = html.replace(/"color:darkgoldenrod"/g, '"color:#B8860B"');
html = html.replace(/"color:orangered"/g, '"color:#B8860B"');
html = html.replace(/"color:sienna"/g, '"color:#B8860B"');
html = html.replace(/"color:darkred"/g, '"color:#B8860B"');
html = html.replace(/"color:navy"/g, '"color:#B8860B"');
html = html.replace(/"color:red"/g, '"color:#B8860B"');
return html;
}
</script>
It is also telling me to use something like this in front / back back template:
The javascript code you got was correctly converted, but the anki template seems completely hallucinated by AI. {{#name}} is used to conditionally show a part of your template, it will not invoke a function, and the template is nonsense.
The dictionary entrees are already converted in some way - anki does not understand the elements used in it, yet it still shows some formating - so a script that converts from them would have no use in your templates, you would have to somehow run it in koreader, before adding it to anki.
Can you please show the html code of your anki flashcard? On desktop it’s the <> button in the editor and ankidroid should just show it.
Wow thats… a mess. It’s not remotely valid html! I don’t know why is koreader (or whatever plugin this is) is not performing at least a rudimentary conversion to html…
I was able to slightly clean it up with this code, but you might need to tinker with it a bit more. Put this in styling alongside the rest of your flashcard styles:
