HTML [SOLVED] CSS gets all messed up when it switches to a passage with an embedded video and I cant figure out why. Any help? [Twine/SugarCube]

[Deleted member 1382246]

Solved: if you're having similar problems just read this response by stevejackhamst and follow along with the video they link. Very much worth it!
Im on day 2 of trying to fix this UI bug but i just cant seem to figure out how to fix it. First heres some pictures to show whats happening. CSS is definitely my weak suit so id appreciate some help.

Heres how the formatting looks on a regular scene without an embedded video:


And heres what the formatting changes to when there is an embedded video on the passage.


Google hasnt been much help and I honestly dont really even know where to begin to figure this out. Currently the margin-left for the passage is set to auto but even if i hard code in some value to make it look like the first image this still happens.

Im gonna attach a zip with the game's html (just make sure you read the authors note on the start page before you just hop right into it lol), the scss files im working with, as well as the resulting css files that my scss compiler is producing but ill also include them here in this post in a spoiler tag below in case you dont feel like downloading it. I just started with scss today so my scripts are probably a bit messy but its worth noting that this still wasnt working when i was just doing pure css yesterday.

Lastly these videos are being embedded by some javascript that just essentially injects "<video src=\'" + video + "\' width='670' height='400' autoplay loop muted />" into the passage where a video is needed. Ive messed around with the width settings here as well but that hasnt helped at all.

Spoiler: style.scss

You don't have permission to view the spoiler content. Log in or register now.

Spoiler: _ui.scss

You don't have permission to view the spoiler content. Log in or register now.

Spoiler: Resulting css after compiling

You don't have permission to view the spoiler content. Log in or register now.

 

[stevejackhammer]

Yeah, you got issues.




Your passage div contains your topbar, your sidebars, and your paragraphs. But the topbar is positioned "absolute", so it doesn't track with the movement of the passage div, even though it is inside it. And your sidebars aren't "absolute" but "fixed". Now you get that drifting with each element following different rules. Right sidebar is in place because you created a big ol' margin to push it over, instead of using a layout that causes the boxes themselves to push each other out of the way. Because of that, the passages div is tracking the right sidebar, instead of being pushed by (and aligned with) the left sidebar.

Put aside all the content that you are eager to create. You're not ready to be doing that. Start with creating a clean and logical layout. Sugarcube is great because you have things like ui-bar already there, but either repurpose them or remove them. Your layout ought to be "body", a container div ("story" with "display:flex"), then inside that top-bar, side-bar-left, side-bar-right, and "passages". Or maybe a container div, the bar elements, then story and then passages inside story. Gotta play with it until you get it right.

Then grab that browser corner and start messing the window size. Tall and skinny, wide and short, maxed out, everything. Your layout should remain readable across a whole range of reasonable sizes and aspect ratios.

When I opened the browser debug window, the main window shrunk a bit. Not by much. And this happened:



Why did that happen? Like I said, the boxes aren't properly related to each other. The passages div is tracking to the right sidebar, instead of being pushed by the left sidebar. And the right sidebar is where it is because of a margin, instead of because the left sidebar and the passages needed space. Because of that, when the aspect ratio changed, there was no rule that kept the passages div from just overlaying onto the left sidebar. Their positioning aren't related to each other.

Take a look at flex layout. It's a big topic, but it's your friend. You layout the elements in such a way as they grow or shrink relative to each other, occupying the space you define for them and causing other elements to elastically reshape themselves in the spaces remaining.

Get the layout under control. Start with a simple div, and then add bars and nav boxes one at a time, checking each to make sure it works in the presence of the others. Then start writing!

(I'm good at this sort of thing. Been doing it for a long time. And yet it took me a week to get my Twine layout to where I was satisfied. It's daunting, I know.)

 

[stevejackhammer]

I should add that you ought to put Twine aside. Just do the HTML and CSS layout work first using Notepad or VSCode or whatever. Put some dummy text into the divs and work on it until you have a clean HTML file and a matching CSS.

At that point, go back to Twine/Sugarcube and do the edits needed to get your compiled game to create exactly that layout you developed and debugged. Add the bit of glue to shive the Twine-y bits into the boxes you've created for them. But for now, forget you're creating a VN. Just figure out how to create a classic web page design with headers and side bars and an area in the middle with the main content. Tons of examples out there to help you do that.

 

[Deleted member 1382246]

Yeah, you got issues.

View attachment 1543919


Your passage div contains your topbar, your sidebars, and your paragraphs. But the topbar is positioned "absolute", so it doesn't track with the movement of the passage div, even though it is inside it. And your sidebars aren't "absolute" but "fixed". Now you get that drifting with each element following different rules. Right sidebar is in place because you created a big ol' margin to push it over, instead of using a layout that causes the boxes themselves to push each other out of the way. Because of that, the passages div is tracking the right sidebar, instead of being pushed by (and aligned with) the left sidebar.

Put aside all the content that you are eager to create. You're not ready to be doing that. Start with creating a clean and logical layout. Sugarcube is great because you have things like ui-bar already there, but either repurpose them or remove them. Your layout ought to be "body", a container div ("story" with "display:flex"), then inside that top-bar, side-bar-left, side-bar-right, and "passages". Or maybe a container div, the bar elements, then story and then passages inside story. Gotta play with it until you get it right.

Then grab that browser corner and start messing the window size. Tall and skinny, wide and short, maxed out, everything. Your layout should remain readable across a whole range of reasonable sizes and aspect ratios.

When I opened the browser debug window, the main window shrunk a bit. Not by much. And this happened:

View attachment 1543947

Why did that happen? Like I said, the boxes aren't properly related to each other. The passages div is tracking to the right sidebar, instead of being pushed by the left sidebar. And the right sidebar is where it is because of a margin, instead of because the left sidebar and the passages needed space. Because of that, when the aspect ratio changed, there was no rule that kept the passages div from just overlaying onto the left sidebar. Their positioning aren't related to each other.

Take a look at flex layout. It's a big topic, but it's your friend. You layout the elements in such a way as they grow or shrink relative to each other, occupying the space you define for them and causing other elements to elastically reshape themselves in the spaces remaining.

Get the layout under control. Start with a simple div, and then add bars and nav boxes one at a time, checking each to make sure it works in the presence of the others. Then start writing!

(I'm good at this sort of thing. Been doing it for a long time. And yet it took me a week to get my Twine layout to where I was satisfied. It's daunting, I know.)

Thanks again for your always great and in depth answers.

Sugarcube is great because you have things like ui-bar already there, but either repurpose them or remove them.

I had a temp solution in place with the default side bar initially but since this is supposed to be a port of another game (which is also why it has so much content rn, just cause most of the work so far has just be essentially translating the twee from snowman to sugarcube) i was trying to keep that same style of UI intact which is why im even attempting this in the first place.

When I opened the browser debug window, the main window shrunk a bit. Not by much. And this happened:

Funnily enough the same thing happens in the original game which I know from previous html/css experience really shouldnt be happening but as ill explain with the next quote i had some troubles coming up with a solution that seemed to work aside from copying this same, very rigid approach the original developer took.

Take a look at flex layout.

When I first approached this project way back at the very beginning I tried accomplishing this with a grid over instead of a flexbox but sugarcube really did not seem to want to cooperate with this approach one bit. That being said ive certainly learned a lot more about working with sugarcube since then so hopefully I can have better luck (or maybe a flexbox system will just work better)

I should add that you ought to put Twine aside. Just do the HTML and CSS layout work first using Notepad or VSCode or whatever. Put some dummy text into the divs and work on it until you have a clean HTML file and a matching CSS.

And yeah, youre absolutely right and im just being lazy. I think part of me just wished i could somehow jerryrig the old devs system into something that worked but youre right and im gonna have to go back to the drawing board for this i think lol

Small edit for clarity.

 

[stevejackhammer]

You're not lazy, just eager to get to the good stuff. Look at my UI design at the link in my signature. Like I said, that's been a week in the making. I was still futzing with it today (the "centering woes" post). Thankfully, the changes are getting smaller and smaller, meaning I'm converging on a design. If I was still ripping out whole chunks, then I'd know I was still far from finishing it.

It'll be another week before I'm confident that my UI design is stable enough to really invest in writing.

For you, I'd recommend some YouTube videos to help dispel the mystery surrounding how these web elements work.

You must be registered to see the links

starts with a cat! And the author builds a three column layout, which is what you're aiming for.

Build your layout independently of Twine/Sugarcube. We'll call this the "mockup". Then when you're ready, use JavaScript/JQuery to tear apart the Sugarcube default layout and stitch it back together to match the mockup.

The documentation for Sugarcube includes exactly what

You must be registered to see the links

looks like. In your first function that executes after the page loads, use methods like append, prepend, insertAfter, insertBefore, and so on to move, remove, re-order the elements to match your mockup.

Heck, you could even just blow away the "ui-bar" and "story" divs. Seriously. Then build out your mockup knowing all that other stuff has been deleted. Finally re-insert a "passages" div where it needs to go according to the way the mockup works. The "passages" div the only div I think Twine actually requires to be present. (The SPA [single page application] code that gets injected into the "story data chunk" looks for that div to shove in the passage HTML for the current story page. I suspect that code is unaware of all the rest of the HTML, so it all could be replaced.)

 

[Deleted member 1382246]

You're not lazy, just eager to get to the good stuff. Look at my UI design at the link in my signature. Like I said, that's been a week in the making. I was still futzing with it today (the "centering woes" post). Thankfully, the changes are getting smaller and smaller, meaning I'm converging on a design. If I was still ripping out whole chunks, then I'd know I was still far from finishing it.

It'll be another week before I'm confident that my UI design is stable enough to really invest in writing.

For you, I'd recommend some YouTube videos to help dispel the mystery surrounding how these web elements work.

You must be registered to see the links

starts with a cat! And the author builds a three column layout, which is what you're aiming for.

Build your layout independently of Twine/Sugarcube. We'll call this the "mockup". Then when you're ready, use JavaScript/JQuery to tear apart the Sugarcube default layout and stitch it back together to match the mockup.

The documentation for Sugarcube includes exactly what

You must be registered to see the links

looks like. In your first function that executes after the page loads, use methods like append, prepend, insertAfter, insertBefore, and so on to move, remove, re-order the elements to match your mockup.

Heck, you could even just blow away the "ui-bar" and "story" divs. Seriously. Then build out your mockup knowing all that other stuff has been deleted. Finally re-insert a "passages" div where it needs to go according to the way the mockup works. The "passages" div the only div I think Twine actually requires to be present. (The SPA [single page application] code that gets injected into the "story data chunk" looks for that div to shove in the passage HTML for the current story page. I suspect that code is unaware of all the rest of the HTML, so it all could be replaced.)

Thanks once again!

Heck, you could even just blow away the "ui-bar" and "story" divs. Seriously. Then build out your mockup knowing all that other stuff has been deleted. Finally re-insert a "passages" div where it needs to go according to the way the mockup works.

I could see this being useful but I would imagine this requires making the project either a "custom story format" in twine or your own format.js (i think) to work with tweego right? Certainly possible but it would just have to be another thing id have to look into.

 

[stevejackhammer]

I could see this being useful but I would imagine this requires making the project either a "custom story format" in twine or your own format.js

Nope, it's still Sugarcube. Just that knowing how Sugarcube seems to work and knowing how SPA works means guessing that the only div the story engine cares about is "passages". Everything else done for you so you can start writing a working VN almost immediately. But if you want to wrap a new UI around the passages div, you can. And that's what you're already trying to do. The insight you need is that (I think) the only critical div as far as Sugarcube (actually Twine) is concerned with is the passages div. You can make everything else your own and it will still work. The rest of Sugarcube -- the macros and such -- will work as always.

 

[Deleted member 1382246]

Nope, it's still Sugarcube. Just that knowing how Sugarcube seems to work and knowing how SPA works means guessing that the only div the story engine cares about is "passages". Everything else done for you so you can start writing a working VN almost immediately. But if you want to wrap a new UI around the passages div, you can. And that's what you're already trying to do. The insight you need is that (I think) the only critical div as far as Sugarcube (actually Twine) is concerned with is the passages div. You can make everything else your own and it will still work. The rest of Sugarcube -- the macros and such -- will work as always.

I meant more in terms of compiling to an html file but i might just have to look into this myself sometime tomorrow. Thanks again!

 

[Deleted member 1382246]

Yeah, you got issues.

View attachment 1543919


Your passage div contains your topbar, your sidebars, and your paragraphs. But the topbar is positioned "absolute", so it doesn't track with the movement of the passage div, even though it is inside it. And your sidebars aren't "absolute" but "fixed". Now you get that drifting with each element following different rules. Right sidebar is in place because you created a big ol' margin to push it over, instead of using a layout that causes the boxes themselves to push each other out of the way. Because of that, the passages div is tracking the right sidebar, instead of being pushed by (and aligned with) the left sidebar.

Put aside all the content that you are eager to create. You're not ready to be doing that. Start with creating a clean and logical layout. Sugarcube is great because you have things like ui-bar already there, but either repurpose them or remove them. Your layout ought to be "body", a container div ("story" with "display:flex"), then inside that top-bar, side-bar-left, side-bar-right, and "passages". Or maybe a container div, the bar elements, then story and then passages inside story. Gotta play with it until you get it right.

Then grab that browser corner and start messing the window size. Tall and skinny, wide and short, maxed out, everything. Your layout should remain readable across a whole range of reasonable sizes and aspect ratios.

When I opened the browser debug window, the main window shrunk a bit. Not by much. And this happened:

View attachment 1543947

Why did that happen? Like I said, the boxes aren't properly related to each other. The passages div is tracking to the right sidebar, instead of being pushed by the left sidebar. And the right sidebar is where it is because of a margin, instead of because the left sidebar and the passages needed space. Because of that, when the aspect ratio changed, there was no rule that kept the passages div from just overlaying onto the left sidebar. Their positioning aren't related to each other.

Take a look at flex layout. It's a big topic, but it's your friend. You layout the elements in such a way as they grow or shrink relative to each other, occupying the space you define for them and causing other elements to elastically reshape themselves in the spaces remaining.

Get the layout under control. Start with a simple div, and then add bars and nav boxes one at a time, checking each to make sure it works in the presence of the others. Then start writing!

(I'm good at this sort of thing. Been doing it for a long time. And yet it took me a week to get my Twine layout to where I was satisfied. It's daunting, I know.)

Thanks again for this! I spent some time today following that tutorial you linked and then fucking around with creating a mockup that matched the original UI and was able to set up something that works perfectly.

 

[HiEv]

In your first function that executes after the page loads, use methods like append, prepend, insertAfter, insertBefore, and so on to move, remove, re-order the elements to match your mockup.

Actually, far simpler than that, use the SugarCube

You must be registered to see the links

, and you can just put your HTML layout there. Just remember that you can't put anything inside the "passages" <div>, because that's where the text from your passages will end up, so anything you put inside that there would just get replaced with your game's passages once the game starts.

Enjoy!

 

[stevejackhammer]

Actually, far simpler than that...

Oh heck, I missed that! I got target-locked on JavaScript-ing my way to a better UI. Guess I know what I'll be doing tonight.

And thanks for confirming that "passages" is the one invariant element. It seemed clear to me that the existence of that div was all that the SPA code required in order to work.

[Update: The documentation for this special passage confirms the "passages" thing. Obviously I need to re-read this documentation more carefully!]

 

[stevejackhammer]

Oh heck, I missed that!

Actually, far simpler than that, use the SugarCube

You must be registered to see the links

, and you can just put your HTML layout there. Just remember that you can't put anything inside the "passages" <div>, because that's where the text from your passages will end up, so anything you put inside that there would just get replaced with your game's passages once the game starts.

Enjoy!

Moved my page HTML into the StoryInterface package. Works like a charm. Thanks for highlighting that!