Akira Script HTML, CSS, JavaScript (and XSLT)

[ebeshero]

I've added @quantum-satire 's HTML web form and structure elements to the XSLT that outputs the Akira Script. And I experimented a little with the CSS, considering about what to do with @Pomilui's notes. Originally you'd wanted to make those available like mouseover pop-up notes, but the way they're outputting is in their own block (and that makes sense): Usually these are encoded in their own distinct lines and aren't really like what we think of as footnotes. Really, they are more like stage directions in a play, or meta-commentary.

I experimented with simply outputting them in a different color font set in italics. See what you think: Here's a preview of the page here in the GitHub repo using the htmlpreview.github.io/? feature:

Perhaps you might add a checkbox on your form to toggle these off or on for display, or just leave them alone--they seem to add perspective! On the other hand, people might well want to decide whether they want the commentary view or not, so you could just toggle it to display:none; or display:inline;.

One thought: you could add more of these helpful notes: they are useful to people who can't see or hear the movie and require narration. You don't have to do this for the semester project (you've done so much to enhance the available info on Akira already!), but it's just a thought for continuing the project. As minimal additions, though, I was thinking you might want a note to start the script and a note to end it simply describing the setting: when and where we are. (NeoTokyo, 2019, etc.) Or you might just provide that information elsewhere on your site!

@Pomilui @MarkTheShark01 @quantum-satire

[ebeshero]

@quantum-satire @Pomilui @MarkTheShark01 One other thing: I was experimenting a little with CSS and bumbled my way into learning CSS Grid (a little more controlling than CSS Flexboxes): I used the grid layout only in the div.sp elements which contain a span.speaker and a p containing the speech. With flexboxes I couldn't quite control the alignments and I wanted something more like a grid structure, and I followed a tutorial: it did help, but the layout may not be the way you want it. Anyway there's a little, simple example of CSS Grid in your CSS file now, treating div.sp as the grid container and the other two elements I mentioned as the grid areas. I followed this fun little CSS Grid tutorial for impatient people.

[ebeshero]

One thought I had this morning was, the Akira script is long to read on the screen: If a reader might want to change a viewing setting to see highlights or gifs or notes, there is not an easy way to get back all the way to the top of the page without scrolling and losing one’s place. So, what if you treated the little fieldset area with the web form (checkboxes) as something that always stays visible and moves down the screen with the reader? You can do that easily by setting CSS position:fixed on the element containing your checkbox form. If you think of that form as a readily available handy reading aid, maybe it also has a quick way to jump back to the beginning or anything else that might be helpful to reach. How big/small should it be?

Read more about CSS position properties here: https://css-tricks.com/almanac/properties/p/position/

@quantum-satire @Pomilui @MarkTheShark01

[Pomilui]

@ebeshero @quantum-satire @MarkTheShark01

Yes, we were thinking about having the checkbox area stay with the user as he or she scrolls. Thanks for adding the structure to the XSLT. I like the color you chose for the notes, and I may just keep them there.