General Formatting Questions (New here!)

Comments

• Claretta

  July 2015 edited July 2015

  In the story stylesheet you can define your <p> paragraphs to start with an indent.
  
  http://www.w3schools.com/cssref/pr_text_text-indent.asp
  
  Alternatively you can just spam

   
  

  
  Each is like pressing the spacebar, so if you always want 5 spaces at the start of every new paragraph, you could just copy paste

       
  

  
  The downside to this method is it introduces a lot of extra html into the code, which might be an issue if you want to copy paste the output into another project.
  
  In general, yes, if you want to look into how to style Twine, you need to look into css or website design. Twine resources generally mostly deal with the mechanical aspects of making stories. Even Twine style tutorials are fairly basic.
• TheGrimblade

  July 2015

  Thank you,
  
  <p> is definitely simpler.
  
  I tried that out, and it worked for me.
  I wanted to note that I was able to simply change the definition of <p> by changing the number of pixels, so if I wanted a shorter or longer indent, I could simply change the number there.
  
  If I wanted to define a different function for tabs, such that <p> is 50 pixels and something else, say ind1 and ind2 are 75 and 100 pixels, would there be a way to do that which does not require a huge change in the previous method, or would I need to do something entirely different?
• greyelf

  July 2015

  Use a CSS class based selector for each of the different types you need:

  p.short {
  	text-indent: 50px;
  }
  p.medium {
  	text-indent: 75px;
  }
  p.long {
  	text-indent: 100px;
  }
  

  .. and then assign these classes with your paragraphs:

  <p class="short">A short indent</p>
  
  <p class="medium">A medium indent</p>
  
  <p class="long">A long indent</p>
  
• Claretta

  July 2015 edited July 2015

  To make it a bit more wieldy, you should also be able to define a default <p> there that doesn't need to state the class each time, say if you wanted the basic <p> to be 50px and the named <p> to be the longer ones.
• TheMadExile

  July 2015

  That could be accomplished simply by altering the selector set of the first rule in greyelf's example, like so:

  p, p.short {
  	text-indent: 50px;
  }
  

  With that simple change, the default behavior is the same as the .short behavior.