choicecss.html

   1 <!DOCTYPE html>
   2 <html>
   3   <!--
   4   The person who associated a work with this deed has dedicated the
   5   work to the public domain by waiving all of his or her rights to
   6   the work worldwide under copyright law, including all related and
   7   neighboring rights, to the extent allowed by law.
   8
   9   You can copy, modify, distribute and perform the work, even for
  10   commercial purposes, all without asking permission.
  11
  12   See https://creativecommons.org/publicdomain/zero/1.0/ for details.
  13   -->
  14   <head>
  15     <link rel=stylesheet href=choice.css>
  16     <link rel=stylesheet href=yukkuri.css>
  17     <meta name=description content="choice.css is a stylesheet you can use to make CYOA-style gamebooks using plain HTML and no JavaScript.">
  18     <meta name="viewport" content="width=device-width, user-scalable=no">
  19     <title>choice.css - Plain HTML Gamebooks ~ Yukkuri Games</title>
  20   </head>
  21   <body>
  22     <header>
  23       <nav>
  24         <h1><a class=title href="#0">choice.css</a></h1>
  25         <a href='https://yukkurigames.com' style="float: left">&#8962;</a>
  26         <a href='#license' style="float: right" class=flipX>&copy;</a>
  27       </nav>
  28     </header>
  29     <main>
  30       <section id=0>
  31         <p>
  32           This page is powered by a
  33           <a target=_blank href=choice.css>single stylesheet</a> which turns
  34           ordinary HTML into a
  35           <a href="http://en.wikipedia.org/wiki/Choose_Your_Own_Adventure">
  36             <em>Choose Your Own Adventure</em></a>-like
  37           <a href="http://en.wikipedia.org/wiki/Gamebook">gamebook</a>,
  38           and another that describes its colors. No JavaScript is
  39           involved, and the HTML is kept nearly undisturbed.
  40         </p>
  41         <ul>
  42           <li><a href="#how">How do I use it?</a></li>
  43           <li><a href="#why">What's the point?</a></li>
  44           <li><a href="#why-not">What can't it do?</a></li>
  45           <li><a target=_blank href=choice.css>Download <code>choice.css</code></a></li>
  46         </ul>
  47       </section>
  48       <section id=how>
  49         <h1><a href="#0" class=no-print>&#9664;</a> How to Use It</h1>
  50         <p>
  51           To use <code>choice.css</code> you'll need to be at least
  52           a little familiar with CSS and HTML.
  53         </p>
  54         <p>
  55           (If you're not comfortable with HTML, consider trying
  56           <a href="http://twinery.org/">Twine</a> instead. It's got a
  57           graphical interface and a simpler markup format. It's also a
  58           good choice if you want to do something more complicated
  59           than CYOA.)
  60         </p>
  61         <h2>Writing Your HTML</h2>
  62         <p>
  63           The first thing you need is a bare HTML page, including
  64           <code>choice.css</code> as a stylesheet. (You can also include
  65           it inline between a <code>&lt;style>...&lt;/style></code>
  66           block.)
  67         </p>
  68         <pre>&lt;!DOCTYPE html>
  69 &lt;html>
  70   &lt;head>
  71     &lt;link rel=stylesheet href=<a target=_blank href=choice.css>choice.css</a>>
  72     &lt;title>...&lt;/title>
  73   &lt;/head>
  74   &lt;body>
  75     &lt;main>
  76           ...
  77     &lt;/main>
  78   &lt;/body>
  79 &lt;/body></pre>
  80         <p>
  81           Inside the main block, place a series
  82           of <code>&lt;section></code> elements with your writing, and
  83           give them each an <code>id</code>:
  84         </p>
  85         <pre>&lt;section id=example>
  86   This is an example section.
  87 &lt;/section></pre>
  88         <p>
  89           Then inside each section, you can create links to the other
  90           sections with standard HTML links:
  91         </p>
  92         <pre>&lt;section id=other-example>
  93   This is a &lt;a href='#example'>link to that section&lt;/a>.
  94 &lt;/section></pre>
  95         <h2>Transitions</h2>
  96         <p>
  97           The three different transition styles you'll see on this
  98           page (horizontal pop-in, vertical pop-in, and fade) will be
  99           applied automatically to create some variety in transitions.
 100         </p>
 101         <p>
 102           If you'd like more manual control, you can use the
 103           <code>vpop</code>, <code>hpop</code>, and <code>fade</code>
 104           classes on your sections, or write your own using standard
 105           <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS transitions</a>.
 106         </p>
 107         <h2>Styling</h2>
 108         <p>
 109           You can style the rest of the page using CSS normally,
 110           as long as you keep the main display structure
 111           from <code>choice.css</code> &mdash; the absolutely-positioned,
 112           overflow-hiding <code>&lt;main></code> element, and the
 113           selectors for <code>&lt;section></code> elements.
 114         </p>
 115         <p>
 116           You can also add more elements. For example, this page adds
 117           a header with some navigation links. And while JavaScript
 118           isn't required, you can include JavaScript code in your page
 119           for more advanced effects.
 120         </p>
 121         <h2>Errors</h2>
 122         <p>
 123           If you link to a section that doesn't exist, or the
 124           reader types one in manually, you'll see
 125           <a href='#busted'>the last section in the page</a>
 126           even if you didn't give it an ID. You might want to write
 127           your last section with this in mind.
 128         </p>
 129       </section>
 130       <section id=why>
 131         <h1><a href="#0" class=no-print>&#9664;</a> Why Bother?</h1>
 132         <p>
 133           Because...
 134         </p>
 135         <ul>
 136           <li>
 137             Modern websites are too complicated. A decade ago, you
 138             could open up nearly any site and see how it was made. Now
 139             all you get is a mass of minified HTML, CSS, and
 140             JavaScript, patching weird features over each other into
 141             an unintelligible mess. But today's sites
 142             <a onclick='window.open("view-source:" + location.href)'>
 143               can still be intelligible</a> while doing new things.
 144           </li>
 145           <li>
 146             <a href="javascript:window.print()">Pages can be printed
 147               to paper (or PDF) intact</a>.
 148           </li>
 149           <li>
 150             Bookmarks and sharing links always go to the right part.
 151           </li>
 152           <li>
 153             It works, in an CPU/energy-efficient way, on a wide variety of
 154             browser interfaces and input devices.
 155           </li>
 156           <li>
 157             The page's full content can be indexed by search engines,
 158             <a href="https://archive.org/">the Internet Archive</a>,
 159             and other tools and services.
 160           </li>
 161           <li>
 162             It still works with CSS <em>completely disabled</em>, or
 163             in browsers that never supported CSS or JavaScript like
 164             <a href="http://lynx.isc.org/">Lynx</a>.
 165             You'll just see the sections before and after the current
 166             one.
 167           </li>
 168           <li>
 169             Despite their problems, HTML and CSS still strike one
 170             of the best balances in computing between ease of writing,
 171             ease of learning, and features.
 172             <a href='http://www.w3.org/2001/tag/doc/leastPower.html'>The
 173               rule of least power</a> remains a good design maxim,
 174             and the above are some of its benefits.
 175           </li>
 176         </ul>
 177       </section>
 178       <section id=why-not>
 179         <h1><a href="#0" class=no-print>&#9664;</a> Why Not?</h1>
 180         <ul>
 181           <li>
 182             It doesn't work in old-but-not-too-old versions
 183             of Internet Explorer. (It works in <em>very old</em>
 184             versions that don't support CSS or CSS visibility
 185             but doesn't work in <em>recently-old</em> versions that
 186             support CSS visibility but not CSS transforms.)
 187           </li>
 188           <li>
 189             It's awkward in some mobile browsers, older ones
 190             especially. (But so is almost anything not designed
 191             specifically for them.)
 192           </li>
 193           <li>
 194             Error handling <a href="#busted">doesn't work very well</a>.
 195           </li>
 196           <li>
 197             Direct links to the page without a #fragment are the same
 198             as an error.
 199           </li>
 200           <li>
 201             Without more scripting, it can't do anything like track
 202             variables or dynamic content. You could write your own
 203             JavaScript, but it might be easier to just
 204             <a href="http://twinery.org/">use Twine</a>
 205             if you want to do that.
 206           </li>
 207         </ul>
 208       </section>
 209       <section id=license>
 210         <h1><a href="#0" class=no-print>&#9664;</a> License</h1>
 211         <p>
 212           <code><a target=_blank href=choice.css>choice.css</a></code> and
 213           this demonstration page are
 214           <a href="https://creativecommons.org/publicdomain/zero/1.0/">released
 215             into the public domain</a>,
 216           or as close as possible in your jurisdiction. We waive all our
 217           rights to the work worldwide under copyright law, including
 218           all related and neighboring rights, to the extent allowed by
 219           law.
 220         </p>
 221         <p>
 222           You can copy, modify, distribute and perform the work, even for
 223           commercial purposes, all without asking permission.
 224         </p>
 225         <p>
 226           However, we would appreciate it if you kept
 227           <a href='#0'>a link to this page</a> in the file when you
 228           use it, to help inform other people about what it does and
 229           how they can use it too.
 230         </p>
 231       </section>
 232       <section>
 233         <p>
 234           If the target location is invalid, the last section &mdash;
 235           this section &mdash; is displayed, even if it doesn't have
 236           an ID. You can put any link you want here, like
 237           <a href="#0">back to the first section</a>, or
 238           <a href="javascript:history.back()">just plain back</a>.
 239         </p>
 240         <p>
 241           It'd be nicer if the default was the first section, or a
 242           special section, but that's not currently possible in CSS.
 243           At times <a href="http://dev.w3.org/csswg/selectors4/">CSS Selectors
 244           Level 4</a> has included features that would help with this,
 245           but they don't work in any browser yet.
 246         </p>
 247         <p>
 248           Or, you could write your page so that the last section is
 249           the first one people should read. But that will mess up the
 250           order when printing or reading the page without the special
 251           stylesheet. And it's just confusing.
 252         </p>
 253       </section>
 254     </main>
 255   </body>
 256 </html>