Browser compatability issues with Twine [SugarCube 2.18.0]

Question

I've loaded up a draft version of a game I've been working on here: https://www.dublininquirer.com/games/index.html. Eventually, I'm going to embed it in a post but at the moment I'm just trying to test it on different browers.

And I'm having compatibility issues. It seems to work on Google Chrome and Safari. But the buttons don't work on Firefox. Any idea why that might be and how to fix it? Thanks.

Answer 1

Yeah, doesn't work for me in Firefox... I noticed this on the side when I inspected the button. I haven't seen that 'moz-user-select: none' on my own buttons, so... maybe that's a clue in the right direction? Not sure.

Comments

Hey, thanks. That's interesting, I tried to override that with the following to see if it would change anything:

.fixed-buttons button {
-moz-user-select:text;
}

But all it does is mean that I can select the text within the button, to cut and paste. It doesn't change whether I can click on it. :-\

Answer 2

You have an <a> element inside a <button> element.  That means you did something like this:

<<button 'text'>>
    [[link]]
<</button>>

or 

<<button 'text'>>
    <<link 'text'>>...<</link>>
<</button>>

This creates the html structure:

<button ...>
    <a ...>...</a>
</button>

Which is invalid HTML5.  That it works at all in any browser is just because some browsers are more tolerant of malformed html than others, but it is incorrect, and isn't officially supported by any browser.

Comments

Haha, so I made all my buttons wrong and some browsers just happen to be idiot-proof? That's kind of hilarious and embarrassing. I did them like this:

<div class="wrapper">
<span class="fixed-buttons">\
<<button "[[Test of the passage link here]]">>...<</button>>
</span>
</div>

---

Oh, that's not so bad. Just lose the quotes around the [[link]]; they aren't strings; the link markup is accepted directly by the macro when passed as an argument.

<<button '[[link]]'>>....
-> bad; creates <button><a></a></button>

<<button [[link]]>>...
-> good; creates <button></button>

 

Answer 3

As explained by @Chapel you shouldn't use both quotes and square brackets when passing the link information to the <<button>> (or <<link>>) macro.

I personally would remove the square brackets instead of the quotes and used the <<button link_text [passage_name]>> format of the macro, because I believe it saves the macro having to extract the link-text and target passage-name from the wiki / markup-based link itself. This also allows you to add punctuation characters to the link-text is you want, which is generally not a good idea to do to Passage names.

<<button "Off to work we go!" "Off to work we go">>

 

Comments

[…] I believe it saves the macro having to extract the link-text and target passage-name from the wiki / markup-based link itself.

While there is a very small savings there. it's not enough to worry about.  All double square bracketed links are processed by the same code, regardless of where they appear, so it's not like using them as a macro argument is different from using them solo.

The only reason I'd, personally, ever warn someone off of using a double square bracketed link is because of forced automatic passage creation when the target isn't a regular passage name.

Answer 4

As has already been noted, you've quoted the double square bracketed links that you're passing to the <<button>> macro.  Don't do that.

Beyond that, another issue.  The passage "If you owned land in Dublin, what would you do?" has a script tag.  It really should not.  While the script and stylesheet tags are not special to Twine 2, you shouldn't blithely use them.

Comments

Thanks so much for all your help, guys. Yes, I was trying something out with the script tag and then forgot to take it out! I've done that now.

Thanks again, you're lifesavers.