After deciding to stop work on the Lone Wolf project and move on to something new, I've hit 2 speed bumps working with Twine and SugarCube. I thought I'd show them here, even though I (sadly) do not have a fix for them. The problem is layout, Twine uses HTML and CSS (hence, you open it as a webpage), so you would think that you could easily use the same to format how your story will look. And you kind of can. And you kind of can't, or at least not easily. Let me illustrate with a few pictures:
Hmmm.... that's an awful lot of whitespace. A lot more than I wanted. I wondered if maybe SugarCube was adding some kind of padding to the <h2> headers elements I was using. So I thought I'd throw a line into my Story Stylesheet that would remove any padding or margins...
That kind of helped, but it still seemed like things were too spaced out. But at this point I started to doubt myself... maybe headers just had more space that I remembered around them? So I decided to copy everything into a plain HTML file and open it in my browser (using Notepad++ to make the file and Firefox to open it)...
Holy....!?!? Where did all that weird stuff come from? Well, apparently it came from the PDF file I was copying...
I'm not an Adobe Acrobat (tm) guy, I use a program called Sumatra PDF Portable. Apparently when you copy and paste text out of a document you can get some extra, hidden characters. While I'm impressed that Twine at least hid all of them, judging by my stand-alone webpage I was still getting a bit too much space from my layout.
I was wondering if this was coming from Twine, or from SugarCube - so I decided to convert my story to a different story format, Snowman, and see how it looked...
That seemed to be better, so I think a SugarCube stylesheet was making all my text so wide-spaced.
Well, I was just doing that project as a test, so I started re-thinking what to do with that project (more on that in a bit). Then, the day after all this, I had a crazy idea for another project - and hit another problem.
This time, what I wanted was a line of boxes that would print out story information along the top of the screen. Something like this...
No problem, that just uses the style="display: inline-block;" so I'll add that to my Passage...
Ummm... okay.... that wasn't what I was hoping for. Well, there's another way to do it, with a style="float: left;" so let's try that...
Nope, no luck with that either. Okay, so much for that layout idea :(
So what does this mean? Well, for you - my advise is to thoroughly test your layout (if you want anything more complicated than plain text). For me, this cements what I was thinking... I like Twine, it's a great program. But, for what I want to do, I'm not sure it's the right fit. In fact, after struggling with this, I'm sure it isn't. So my next project is going to focus on just HTML, CSS and JavaScript - the stuff Twine is built on - but without Twine in the way. I could try the Snowman story format, which is more minimal, but I actually want to go ahead and strike out on my own. That is a stupid decision in some ways, I want to be "Twine-like" so I'm going to have to 'reinvent the wheel' by implementing some of Twine's features on my own. Still, that'll give me a chance to learn a lot more about scripting, so I'm okay with it.
Anyways, not really a lot to learn out of this, but something I thought I'd share. If anybody out there does know how to get these layouts working properly I'd love it if you left a comment below :)
No comments:
Post a Comment