"Invisiclues" effect in a PDF file

[Robert_Rothman]

Instead of incorporating a built-in hint system into my game, I’m preparing a separate cheatbook as an electronic feelie. I’m doing the layout work in InDesign and then exporting to a PDF file.

What I’d like to do is simulate the effect of the old Invisiclues system, so that each hint is invisible (i.e., white-on-white text) until the reader drags the mouse over it, whereupon it shows up. Getting white-on-white text is easy; what’s hanging me up is how to set it so that highlighting the text (by dragging the mouse) makes it visible. What seems to be happening is that when you drag the mouse over the white-on-white text, it turns to some other color, but the text and background remain the same (so its still invisible). I’m sure there must be a simple way to do this, but my InDesign experience has been limited to straightforward typesetting.

Any suggestions would be appreciated.

Robert Rothman

[Trumgottist (Rikard Peterson)]

I could be mistaken, but I believe that’s simply how PDFs work. (Or to be more exact, how Adobe Reader work.) Maybe a html file would be better suited for what you want to do?

[Grueslayer]

I’m using a Word file for the same purpose. Can be pimped with tables and pictures, doesn’t look much worse than .pdf.

[Robert_Rothman]

Grueslayer, were you able to achieve the effect of invisible type which becomes visible when highlighted in Word? Thanks.

Robert Rothman

[tove]

@Grueslayer

doesn’t look much worse than .pdf.

Ouch. In my experience, Word files are the worst of the various worlds about this, because they give the illusion of layout/aesthetic control to the author, but are actually almost totally non-portable. Word files render in subtly-to-not-so-subtly different ways depending on the version of Word, much less the version of other non-Word programs that people might use to open your document.

I’d second the HTML suggestion. Or, if you want to get fancy, Juhana’s website has a Javascript hint system you can copy from: nitku.net/if/clues.html There might even be a good way to make that sort of thing screenreader-friendly.

[Robert_Rothman]

Unfortunately, HTML is far beyond my technical skills, and my knowledge of Java is limited to being able to brew a damn good cup of coffee.

I was hoping to be able to achieve the effect I wanted using tools with which I have some basic familiarity. If I can’t do that, I may just make it fully visible, on the theory that if you’re using the cheatbook you’ve already voluntarily ventured into spoiler country anyway. I suppose one could always print it out and use a blank piece of paper to cover the page and expose one line at a time – low-tech, but it does the job.

I’m a little surprised that pdf files do not support some control over the way highlighted text looks on screen. Although originally designed for print work, the more recent versions of the system do cover other electronic-only features (such as internal links) and overall its a sufficiently powerful system that I would expect someting like this to be available.

Robert Rothman

[maga (Sam Kabo Ashwell)]

@Robert Rothman

Unfortunately, HTML is far beyond my technical skills, and my knowledge of Java is limited to being able to brew a damn good cup of coffee.

The minimum HTML necessary to do this could be picked up in approximately ten minutes by a gibbon (I say, as someone whose coding skills are decidedly gibbon-like). If you can handle BBcode, you can manage this. (You might make a web developer or two cry, but what the hell.)

[Afterward (Ryan Veeder)]

I think the hints for Savoir-Faire were in just that style; you could probably steal that HTML source and only violate one or two patents.

And oh hey speaking of which, here is that thing I just mentioned. emshort.home.mindspring.com/savoirhints.htm

[Robert_Rothman]

The minimum HTML necessary to do this could be picked up in approximately ten minutes by a gibbon

Hmm, that’s a bit of a problem. My own sophistication is this area doesn’t even rise to the level of a gorilla, much less a gibbon.

Yes, the effect I’m after is exactly like the Savoir Faire hints.

(Sorry, got to go get a banana now).

Robert Rothman

[Grueslayer]

@Afterward

I think the hints for Savoir-Faire were in just that style; you could probably steal that HTML source and only violate one or two patents.

And oh hey speaking of which, here is that thing I just mentioned. emshort.home.mindspring.com/savoirhints.htm

Is that all? Dragging the cursor over text to make it visible? If I may mention Word again…

[tove]

I seriously bet that if you can handle Inform, you can handle HTML. CSS can be a giant timesink and n-dimensional puzzle, and I wouldn’t recommend you get into anything involving tables, but if you just want to change some font attributes (such as color!), it’s really not too bad. Especially compared to Word.

Here’s what I suggest you try:
-Save the Savoir Faire hints as HTML: while on that webpage in your browser, go File>Save.
-Open in in a text-only editor. If you’ve got a Mac, you can use TextEdit, but you’ll have to go TextEdit>Preferences>Open&Save>“Ignore Rich Text Commands in HTML files” before opening it. I believe the equivalent on Windows is called Notepad or Textpad, but someone else should correct me if I’m wrong.
-At the same time, also open the document in a browser window.
-Try replacing some of the text between sets of angled brackets and see what happens: Change some text in the editing program, save the document, then hit Refresh in your browser to see what changed. If you don’t fiddle with anything inside a < and a >, you should be fine. In the case of the Savoir Faire page, you should see some definite patterns that should help you copy and paste entire sections of the page to make your hint lists longer or shorter as necessary.

As you might guess by its similarity to the BBCode for this forum, you start an attribute-change with something like and end it with the same thing but with a slash:

In the specific case of Emily’s markup for those hints, the important ones for you are:
means “bold”
and

and

are for headings and paragraphs. Different browsers have different ideas about how to format a heading (and you can override that with some CSS), but in general, an h2 section will be bigger and bolder than a paragraph, and an h will be bigger yet.
is how you change elements of the font without using a pre-defined style. Its use is a bit deprecated for big fancy-pants webpages with CSS (since the idea there is that everything is a pre-defined style), but if you just want to change the color in some plain vanilla HTML like this, it’s the way to go. As you can see, is the magic here. You can also use hex color values; google around for more information.
Two of those tags don’t need to be closed, because they just mean “insert an element here”:

---

means "horizontal rule" and it's the line across the page that distinguishes between different parts of the page.
means line break, just like in Inform.

And the less important ones for you (as in, you don’t really need to use them as well) are:

and
• are for making formatted lists, with the little indent and the bullets. ul begins an "unordered list" (as in, the items in it have bullets instead of numbers or letters) and
• denotes each "list item". You do need to close the
  tag (at the end of the list), but do not need to close the li tags. tags are about making and using anchors, which means links to things within the page or on external pages. Emily's using them to create links within her document to later parts of the document, as a user interface convenience.

  Just as an aside, using Juhana’s page as a template would be very much a similar experience; the difference is that the Javascript is defining another legitimate attribute for you to call on. It’s just like using an Inform extension: you just include it at the top of the page, then use its magic words instead of the built-in HTML ones.

  I hope that’s useful and doesn’t sound too scary!

[Robert_Rothman]

Thanks. I’ll try to get up the courage to give it a try.

One question (and the very fact that I’m asking this probably highlights just how unsophisticated I am in these matters): I do not have a website; if I wind up releasing the game (and accompaniments such as the cheatbook) I would just post the files on the IF Archive. My question is, can an HTML-coded page work as a stand-alone (i.e., can one read it independently of a web site)? This is probably a stupid question, but I really am that clueless about these things.

Robert Rothman

[maga (Sam Kabo Ashwell)]

Yes, HTML files can be saved like normal files and opened in a browser even if it’s offline.

[tove]

Yep, browsers can just as easily display local (that is, on the computer of the person looking at them) files as those on the internet. This is the way you’ll be looking at the file in between edits.

[Greeny]

Here’s a simple HTML file (heavily ‘borrowed’ from Emily Short’s Savoir Faire hints) that might help get you started.
It adds boxes around the invisiclues to help see where to Click ‘n’ drag.

You can just alter the text & cut & paste lines to add new hints.

It won’t let me upload an HTML file, so here it is as code.
Just Select & copy it into a text editor & save as an .htm file eg GameHints.htm.
A good editor like the great (&free) Notepad++ that has synatx colouring etc. makes things a lot easier.

Cheers
Greeny

<!--  This is a comment and is ignored,  as are blank lines  -->
<html>
<title>My Game Hints</title>  <!--  This is the document title it's not visible -->
<body bgcolor = WHITE font color = BLACK>

<h1>My Game Hints</h1>  <!--  the <h1></h1> tags enclose a large heading -->
<p>Here are the hints to my game</p>    <!--  the <p> </p> tags enclose a paragraph, -->
<p>The hints are invisible(White text on a white background). Click & drag the mouse to select and reveal each hint.</p>


<!-- This is an list you can add as many items as you like, copy & paste a line then change it to your requirements   -->
<UL>
<LI><a href = "#Hints1">Hints 1 Text</a>  <!-- <a href = "#Hint1"> specifies a link to a corresponding  <a name = "Hint1"> Tag  later in the document    -->
<LI><a href = "#Hints2">Hints 2 Text</a>
<LI><a href = "#Hints3">Hints 3 Text</a>
</UL>

<!--  Begin Hint 1 -->
<hr> <!-- Add a horizontal line  -->
<h2><a name = "Hints1">This is Hint 1</a></h2>   <!-- This is where you go when you click on the #Hints1 link,  The <h2></h2> tags enclose a secondary heading  -->
<p><b>Heres a useful hint</b></p>    <!-- The <p></p>  tags enclose a paragraph , The <b></b>  make any text they enclose bold  -->
<div style="border:1px solid black;">   <!-- This adds a border around the invisible hint text so the user can see where to click 'n' drag -->
<p><font color = WHITE>Never go against a Sicilian when death is on the line</font></p>   <!-- The <font></font> Tags specify the font they enclose  -->
<p><font color = WHITE>And to think, all that time it was your cup that was poisoned</font></p> 
</div>

<p><b>Here's another useful hint</b></p>
<div style="border:1px solid black;">
<p><font color = WHITE>Because iocane comes from Australia</font></p>
</div>
<!--  End hint1 -->


<!--  Begin Hint 2 -->
<hr> <!-- Add a horizontal line  -->
<h2><a name = "Hints2">This is Hint 2</a></h2>   <!-- This is where you go when you click on the #Hints2 link  -->
<p><b>Heres a useful hint 2</b></p>   
<div style="border:1px solid black;">
<p><font color = WHITE>He's only MOSTLY dead</font></p>  <!--  InvisiClue line -->
</div>

<p><b>Here's another useful hint 2</b></p>
<div style="border:1px solid black;">
<p><font color = WHITE>The flame spurt - no problem. There's a popping sound preceding each; we can avoid that.</font></p> 
<p><font color = WHITE>The lightning sand, which you were clever enough to discover what that looks like, so in the future we can avoid that too. </font></p> 
<p><font color = WHITE>The rodents of uynusual size? I don't think they exist</font></p> 
</div>
<!--  End hint2 -->


<!--  Begin Hint 3 -->
<hr> <!-- Add a horizontal line  -->
<h2><a name = "Hints3">This is Hint 3</a></h2>   <!-- This is where you go when you click on the #Hints2 link  -->
<p><b>Heres a useful hint 3</b></p>   
<div style="border:1px solid black;">
<p><font color = WHITE>Useful Hint Goes Here</font></p>  <!--  InvisiClue line -->
</div>

<p><b>Here's another useful hint 3</b></p>
<div style="border:1px solid black;">
<p><font color = WHITE>Another useful Hint Goes Here</font></p> 
<p><font color = WHITE>Another useful Hint Goes Here</font></p> 
<p><font color = WHITE>Another useful Hint Goes Here</font></p> 
<p><font color = WHITE>Another useful Hint Goes Here</font></p> 
</div>
<!--  End hint3 -->


</body>
</html>

[Bainespal (Paul Lee)]

@Robert Rothman

I’m a little surprised that pdf files do not support some control over the way highlighted text looks on screen. Although originally designed for print work, the more recent versions of the system do cover other electronic-only features (such as internal links) and overall its a sufficiently powerful system that I would expect someting like this to be available.

I’m assuming that by “the system” you mean Adobe InDesign, right? I had a computer graphics/design course last semester, and we barely scratched the surface of InDesign near the end of the semester in order to use it to make our portfolios (the class was mainly about using Photoshop and Illustrator). Anyways, my limited impression of InDesign is that it is indeed designed almost exclusively for print. I think Adobe has other software for advanced PDF creation (Acrobat).

You don’t need to know anything about HTML in order to make an HTML document for your invisiclues hint page if you use HTML-editing software. If you have the full Adobe suite (and not just InDesign) you probably also have DreamWeaver. But you can even use Microsoft Word to make an HTML document! You can simply set your text and background colors in Word, and then save the file as a web document instead of the default .doc/.docx format. And if you don’t have Microsoft Word, you can do it with OpenOffice (or the knock-off LibreOffice), which is free.

[Robert_Rothman]

Thanks.

I see the tags which set the type color to white (which I can also do quite easily in a pdf file), but I don’t see (or am not recognizing) any code which instructs it to show up as visible when highlighted. Is that just the way browsers automatically work (unlike Acrobat Reader)? In other words, is the issue not really whether the formatting is coded in HTML or in PostScript, but rather in whether the file is ultimately being read in a broswer or in Acrobat?

I think I can probably manage to get the effect we’re talking about by following these examples, but it would be a fair amount of work and ultimately the formatting and overall layout would wind up looking far less professional than I can achieve easily with InDesign and pdf output. (I’m assuming that achieving the level of mastery of HTML that would be necessary to approximate the pro-looking formatting would require a level of commitment that’s beyond what I’m prepared to devote to it.) I think I need to give some serious thought to which is more important to me. I may decide to go with a cool-looking printable booklet, and just give up on the invisibility idea. In terms of spoiler potential, its still no worse than a plain walk-through.

Robert Rothman

[Afterward (Ryan Veeder)]

The fact that you can see the text when it’s highlighted is part of it’s being displayed in a browser, yeah. It’s pretty weird, actually, that pdfs don’t work the same way.

One thing that I guess hasn’t been brought up yet is a “click to reveal spoiler”-style method for clues, which again would have to be in HTML and not a pdf, and might not look as nice as you’d want it to anyway, and now that I’m looking at examples for how to code them they look really scary. I’m sorry I brought it up.

[jacksonmead]

I know you didn’t ask for alternate methods of providing hints/clues, but I felt I should point out how Leadlight dealt with this. You can see the plain-text version here: http://leadlightgame.com/hsheet/hsheet.html. It doesn’t rely on any special behavior of various programs, and I found it pretty neat. (Note: I’m not an old-school person, so I don’t know if this method was used in some old games or if Wade invented it for this game.)

-Kevin

[tove]

@Afterward

One thing that I guess hasn’t been brought up yet is a “click to reveal spoiler”-style method for clues, which again would have to be in HTML and not a pdf, and might not look as nice as you’d want it to anyway, and now that I’m looking at examples for how to code them they look really scary.

This is what Juhana’s template for JavaScript-y hints pages (which I linked to earlier in the thread as well) does, and if you just grab his JS and look at his example, you’ll find that he’s done the scary work for you.

I suspect that if you wanted to do something fancy, jQuery would be not-too-bad, but that is definitely not what I am suggesting to Robert.