HTML view tweaks

[coltonoscopy]

Hey Seth :) (btw, spaces fix you did works beautifully, thank you!)

Like you, I find myself relying on rikaikun for a lot of lookup (particularly related to Kanji and Kanji compounds). The HTML view feature you implemented is a fantastic start, but I feel like a couple of small changes would help this tremendously:

1) Add a max-width: 100% or width: 100% to the image CSS (and corresponding Japanese text overlay) so that it doesn't overflow the screen; currently I have a few browser windows open side by side, so on windows not at fullscreen size that the HTML export opens out to, I have to scroll horizontally to view the entire screenshot (probably exacerbated by the fact that I'm playing on a 4k monitor as well, so the images may be larger than what you work with typically if you're working with 1080p or smaller).

2) Add the English translation to the page as well, to make it easier to compare side-by-side. Currently, I have to consult the game window itself with the translation overlay and the HTML export separately to be able to see them, but the English imo should just be rendered alongside the HTML exported original text, even if just below (a direct side-by-side might be kind of tricky). This is primarily an issue because I play with two monitors, with one typically being borderless fullscreen and the second being the one with the actual browser windows, but even if one were playing on the same monitor I feel this would be easier on the eyes :)

Thanks for your hard work as always! お疲れ様です！

[SethRobinson]

I agree these would be good changes... My original plan was an html button that toggles the untranslated/translated text, but I wasn't sure of the javascript or whatever needed to get that to work elegantly so I put it off, maybe can sneak that in the next version.

I can try the sizing changes mentioned, hoping it won't mess with the x/y pixel text overlay positioning.

If you're in a hurry you can experiment yourself by editing the files: header_insert.txt/footer_insert.txt and text_overlay_template.txt (this one is applied to each of the text overlays). (all in the exporthtml directory)

Seth A. Robinson www.rtsoft.com

On Fri, Apr 9, 2021 at 1:52 PM Colton Ogden @.***> wrote:

Hey Seth :) (btw, spaces fix you did works beautifully, thank you!)

Like you, I find myself relying on rikaikun for a lot of lookup (particularly related to Kanji and Kanji compounds). The HTML view feature you implemented is a fantastic start, but I feel like a couple of small changes would help this tremendously:

1. Add a max-width: 100% or width: 100% to the image CSS (and corresponding Japanese text overlay) so that it doesn't overflow the screen; currently I have a few browser windows open side by side, so on windows not at fullscreen size that the HTML export opens out to, I have to scroll horizontally to view the entire screenshot (probably exacerbated by the fact that I'm playing on a 4k monitor as well, so the images may be larger than what you work with typically if you're working with 1080p or smaller).

[image: image] https://user-images.githubusercontent.com/3724177/114129835-36736700-98b4-11eb-8c3e-ed3f9e3182cf.png

1. Add the English translation to the page as well, to make it easier to compare side-by-side. Currently, I have to consult the game window itself with the translation overlay and the HTML export separately to be able to see them, but the English imo should just be rendered alongside the HTML exported original text, even if just below (a direct side-by-side might be kind of tricky). This is primarily an issue because I play with two monitors, with one typically being borderless fullscreen and the second being the one with the actual browser windows, but even if one were playing on the same monitor I feel this would be easier on the eyes :)

Thanks for your hard work as always! お疲れ様です！

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/SethRobinson/UGT/issues/18, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADAKM775TSJW7INKAUUNCDTH2BXBANCNFSM42UHEXQQ .

[SethRobinson]

0.69 has been released with some backend support that SHOULD make it possible to do the fancier stuff now. It supports more tags. There is a readme.txt in the htmlexport dir with info on them now:

header_insert.txt - added to the index.html first
footer_insert.txt - added to the index.html last
export_view.css - The .css file the default header_insert.txt references

text_overlay_template.txt - this html is added for each text overlay. Certain keywords will
be replaced by data:

[X] = top left X coordinate in pixels where the text overlay should start
[Y] = topleft left Y coordinate in pixels where the text overlay should start
[END_X] = bottom right X coordinate in pixels where the text overlay should end
[END_Y] = bottom right Y coordinate in pixels where the text overlay should end
[WIDTH] = Width in pixels this text block should take
[HEIGHT] = Height in pixels this text block should take
[FONT_SIZE] = Html font size the text should be as guessed by UGT
[TEXT] = Original untranslated text (will use <BR> instead of linefeeds)
[TRANSLATED_TEXT] = Translated text, if it exists.  (will use <BR> instead of linefeeds, but probably won't have linefeeds so text wrapping is needed)

Seth sucks at html so if you know how to add a button to toggle between translated/untranslated text
that'd be like, great.