Tabstops?

Comments

• loopernow

  October 2014

  Yo Hanon, I'm surprised no one's answered this. Not because I know the answer, unfortunately, but because I'd think someone would.
  
  Anyways, I'm certain your answer is going to lie with CSS. I'm more and more rusty with CSS anymore, so forgive me if I use the wrong terminology, but you could define a class in your css file with a wider left margin than the default and with the kind of font that you want, and then wrap any text that you want to be indented in that style class. Then that text will be pushed further right than text not wrapped in that style class. You can do this over and over and save a lot of time that way.
  
  I'm sure there's other techniques as well that could be used, but also using style classes. Like using a block element within a block element, perhaps. So the style class would put the wrapped text inside a block element.
  
  I hope that makes sense. It's great that Twine stories are HTML files and so CSS applies to it like any other HTML file. In that sense, you could also ask your question at Stack Overflow or places like that, or just search the web in general for your answer. I'm sure somebody has wanted to output a screenplay-style document online before.
  
  That is, if you don't get your answer here. I think there's some pretty dang good CSS people here.
  
  
• greyelf

  October 2014

  Typing "format screenplay using CSS" into Google lead me to the following article.
  
  The following HTML and CSS is based on it with minimum modified to suit Twine.
  (note: using TWEE notation, lines starting with double colons (::) indicate the passage's title, optional square brackets following title indicate passage tag.)

  
:: Start
<ul class="screenbox">
<li class="sceneheader">EXT. FOREST / ELSEWHERE DAY</li>
<li class="action">Susan is on a cell-phone call. She smiles at Melissa, who walks by with two cups of coffee.</li>
<li class="character">SUSAN (V.O.)</li>
<li class="dialogue">Right now, this is probably our top pilot. But things change.</li>
</ul>


:: Stylesheet [stylesheet]
body {color: black; background: white;}

#passages .screenbox {
list-style: none;
width: 420px;
background: #eee;
border: 1px solid #333;
padding: 5px 14px;

}
#passages .screenbox li { font: 12px/14px Courier, fixed; }
#passages .sceneheader, .action, .character { padding-top: 1.5ex; }
#passages .action { padding-right: 5%; }
#passages .character { margin-left: 40%; }
#passages .dialogue { margin-left: 25%; padding-right: 25%; }
#passages .parenthetical { margin-left: 32%; padding-right: 30%; }
/* special case: dialogue followed by a parenthetical; the extra line needs to be suppressed */
#passages .dialogue + .parenthetical { padding-bottom: 0; }
#passages .transition { padding-top: 3ex; margin-left: 65%; padding-bottom: 1.5ex; }


  Is that the type of look your looking for?
• Hanon Ondricek

  October 2014

  That's exactly the type of thing I was looking for.  It definitely appears like it would make it work reliably.  Thank you!