Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

CSS in Harlowe

Hi, I'm new and close to having a nervous breakdown.
I'm not the best with CSS in general, and now I am trying to define a stylesheet that lets me format a page title quickly.
I've come up with this, which I put in the "Story Stylesheet" section:
.title 		{
 font-size: 2.0rem;
 font-weight: bold;
 text-align: center;
 }
But how do I actually apply it to a line of text?

I'm more of a "monkey see, monkey do" type, so I'm having a hard time figuring it out from documentations alone.

My main problem is that there are so many guides for Twine1, Jonah and Sugarcube that I can't see what is relevant wo me and what not. It took me three hours already to realize that I can't use a stylesheet passage.

Comments

  • I suggest you read the Twine 2 Guide to learn how to use the Twine 2 application and read the Harlowe Manual to learn about the features of that story format.

    As far as I know Harlowe does not have a macro for styling text using a CSS class, the closest would be the (css:) macro, so you will need to resort to using HTML elements like div and span.
    <div class="title">This text will be displayed using the styling in the .style selector.</div>
    
    <span class="title">This text will be displayed using the styling in the .style selector.</span>
    
  • Thank you for your help!

    Curiously, span works only partially: It applies size and boldness, but not alignment, while div applies the whole thing.
    I know the manual and am not new to programming and scripting; it's just that I learn much better from analyzing working examples instead of from reading through manuals. As in this case, what I was looking for wasn't even there, as you said.

    That said, CSS has never been my friend. But now that so many HTML tags are being deprecated, I have to deal with it.
  • edited December 2015
    span works "partially" because it is an inline element, (like b or i) you can imagine this as shrinking to fill as little space as possible, like a vacuum. So it is centering the text it contains, but the effect is not visible unless you explicitly give the element a width.
    div is a block level element (like p)and will expand to fill all available width (e.g. the width of the browser window or width of its containing/parent element) so you can see the effect of the centering there, as there is enough space for the browser to visually center the text within it.

    With stuff like, this, temporarily add a background-color to the element in CSS to help visualise whats happening.
  • Also there's an error in your CSS "font-size: 2.0rem;" should be "font-size: 2.0em;" and if you were to use an H tag for a heading (H1 H2 H3 etc) instead of DIV or SPAN that would be a block-level element and do the centering you were looking for -- as well as better semantically.
  • Understood, thanks for explaining.
  • gorse wrote: »
    Also there's an error in your CSS "font-size: 2.0rem;" should be "font-size: 2.0em;"
    Just to clarify, rem is a valid unit for font-size, it is based on the root html element not the parent element.

Sign In or Register to comment.