Changing line height

Authoring Twine
1

Twine 2.6.2.0, Harlowe 3.3.5

Is there a way to change the line height on a specified block of text?

I can see that you might be able to use use

tw-story{line-height: 1.5em;}

to globally change this, but my situation is I have a title, spread over two lines, and I just want have some control over how closely those two lines sit together. Everything ese is pretty much fine.

I took a screenshot, but apparently I can’t embed images in a post - so I have to hope what I am describing makes sense.

Is there an existing macro that could be used to do this?
Is there a better approach I could take?

Apologies if I am missing something obvious! The excellent help I have received so far is clearly just encouraging me to post more queries :sweat_smile:

Many thanks!

2

Try this…

(css: "line-height: 1.5em;")[LET THERE BE LINE-HEIGHT!!!]

Check out this link for more information… https://twine2.neocities.org/#macro_css

Edit: Oops! I got confused. If you want to globally edit CSS in the “Story Stylesheet” in Twine… Harlowe uses h1, h2… to h6 headers. You can edit them in the Stylesheet…

h1, h2, h3, h4, h5, h6 { line-height: 1.5em; }

…and in Harlowe passages, you can use #, ##, and so on… https://twine2.neocities.org/#markup_heading

1 Like
3

Also, you had mentioned that you had trouble uploading an image to your post…

image

…I copied this image to my clipboard and pasted it as I was typing. You can even change the size of it in the code that’s generated.

These forums are an engineering marvel. Now I’m going to think of something…

Darn it. It can’t read minds. That’s disappointing. :wink:

1 Like
4

Thanks @HAL9000!

(css: "line-height: 1.5em;")[LET THERE BE LINE-HEIGHT!!!]

Ah ha! I was peripherally aware of the (css:) macro and was wondering if it would apply to this circumstance! The good news is it does… kinda!

This will be a great tool to have in my back pocket as if I understand correctly, I can get in and mess with some of the ‘stylesheet’ variables on a case by case basis if needs be.

The catch is that in this instance - I need to bring two lines much closer together than they are by default… and as it turns out it doesn’t look like css will allow you to define line spacing lower than 1em. According to a stack overflow article I dimly understood, it looks like I can make them further apart with this technique, but can’t bring them closer together.

I have looked at (floating-box:) as a possible workaround, but the positioning is too crude, and:

Since it is “floating”, this box remains fixed in the window even when the player scrolls up and down.

So I’m a bit stuck at the moment - perhaps I’ll ultimately need to upload a graphic as a work around!

Re: defining headings in the stylesheet - good to know! I was wondering about that too!

5

Yeah, funny thing about not being able to add images, I’ve tried pasting from the clipboard a couple of times, and it let’s me do it, but when I go to post, I get a popup:

An error occurred: Sorry, you can’t embed media items in a post.

Similarly, if I try to include a web link, I get

An error occurred: Sorry, you can’t include links in your posts.

I assume this is a security thing as I am a newer user??

6

hahaha I just earned the badge

Basic

This badge is granted when you reach trust level 1 … New user restrictions have been lifted; you’ve been granted all essential community abilities, such as personal messaging, flagging, wiki editing, and the ability to post multiple images and links.’

Anyway I should be able to include an image now:

image

By default, this line-wraps a big ol’ gap between ‘spooky’ and ‘tower’ … that’s what I’m struggling with :sweat_smile:

…also apparently I’m Basic now so, there’s that to deal with :rofl:

7

I’m too lazy to go look this up right now and be sure (sorry), but I’m pretty sure negative margins do work and are a common technique, so what about:

SPOOKY
(css: "margin-top: -0.5em;")[TOWER]
2 Likes
8

Josh’s suggestion should work for your title text.

I never knew about that line-height restriction, TGB. Thanks for bringing that to my attention. The only thing I could find that kind of works for that is to…

display: inline-block;
line-height: 0.5em;

…the only stipulation is that the element’s text won’t wrap under the other element it’s beside (it will wrap, but only as a whole chunk), but it will wrap within itself just fine while ignoring the parent’s line-height style. Normally, elements use display:inline or display:block as their default setting, but inline-block is great for situations such as buttons stacked side-by-side that have multiple lines of text in them.

1 Like
9

Hi @JoshGrams sorry to say I’m not getting any love from this solution. :disappointed_relieved: It doesn’t seem to be having any noticeable effect using either positive or negative em values.

The code I am trying looks like this - it’s got the extra markup as I am using collapse whitespace brackets. It’s also got a ridiculously high em number as I was just testing for a response:

<p>
SPOOKY<br>
(css: "margin-top: 50em;")[TOWER]
</p>
10

Hi @HAL9000 -

I never knew about that line-height restriction

now that I can post links, here’s the discussion I stumbled across:

1 Like
11

Hi @HAL9000 - trying your approach with

display: inline-block;
line-height: 0.5em;

…with my code looking like this:

{
<p>
SPOOKY<br>
(css: 
	"display: inline-block;
	line-height: 3em;"
)[TOWER]
</p>
}

…but it still seems like I’m stuck with the same problem. Line heights lower than 1 seem to be ignored :frowning: …have I missed something in my implementation? Thanks! :slight_smile:

12

It’s so much easier when you post your code. :wink:

<p>(css: "line-height: 0em;")[SPOOKY<br>TOWER]</p>

This should cause the lines to overlap exactly over one another so you’ll want to adjust the line-height. You can’t use negative line heights, only zero and up.

The reason your code wasn’t working is that SPOOKY had it’s own line-height from Harlowe’s CSS, separate from TOWER. Now they share the same line-height, in the same HTML/CSS element and can work together.

You don’t even need to use the (css:) macro actually. You could do the following…

<p style="line-height: 0em;">SPOOKY<br>TOWER</p>

Whew! I think we did it! :slight_smile:

1 Like
13

Stop. Press. I think we’re on to something here!!

Whilst the (css: "margin-top: -2.5em;") macros weren’t doing anything on their own, I found that if I combined them with a (box:) macro, we started having success! eg:

(box: "X")[SPOOKY<br>]
(box: "X")+(css: "margin-top: -2.5em;")[TOWER]

The only remaining issue is that (box:) comes with a 1em padding which, as usual, I can add to, but can’t reduce - using eg: (css: "padding: 5em")

The workaround I came to was that I could use margin style adjustments to correct for the box padding, eg:

<p>
(box: "X")+(css: "margin-left: -1em;")[SPOOKY<br>]
(box: "X")+(css: 
	"margin-top: -2.5em;
	margin-left: -1em;"
    )[TOWER]
</p>

…so combine all these techniques together for the opening title and we get:

image

…the code for which is:

{
(set: _pretitle to
	(align:"=><=")+(box: "X")+
	(css: "margin-left: -.3em")+
	(css: "margin-bottom: -0.5em")+
	(text-color: yellow)+
	(text-size: 1)+
	(font: 'Sigmar One')
	)

(set: _title1 to
	(align:"=><=")+(box: "X")+
	(css: "margin-left: -.8em")+
	(css: "margin-top: -2.5em")+
	(css: "margin-bottom: -1.5em")+
	(text-color: green)+
	(text-rotate: -4)+
	(text-size:4)+
	(font: 'Creepster')
    )

(set: _title2 to
	(align:"=><=")+(box: "X")+
	(css: "margin-left: -.8em")+
	(css: "margin-top: -1.3em")+
	(css: "margin-bottom: -1.9em")+
	(text-color: green)+
	(text-rotate: -5)+
	(text-size:4)+
	(font: 'Creepster')
    )

<p>
	_pretitle[ESCAPE FROM]<br>
	_title1[Spooky]<br>
	_title2[Tower]
<p>
}

OK - so I’m sure there is a much more elegant way to approach this, but if feels good to be getting some results! :melting_face: What do you all think? :thinking:

1 Like
14

High fives all around! :upside_down_face:

I’ve never used the box thing in Harlowe before… keep asking questions so I can learn more stuff!

1 Like
15

:partying_face:

@HAL9000 - Ah - your solution was indeed much more elegant as I suspected!

Interestingly, I found that your code:

<p>(css: "line-height: 0em;")[SPOOKY<br>TOWER]</p>

produced no line height change in my output. BUT worked like a charm when combined with the (text-rotate:) macro :thinking:

The code :

(css: "line-height: 0em;")[SPOOKY<br>TOWER]

…produces no change on my Chrome browser. While the code:

(css: "line-height: 0em;")+(text-rotate: -0)[SPOOKY<br>TOWER]

…works like a charm. I wonder if this is a bug thing? :thinking:

Your code:

<p style="line-height: 0.8em;">SPOOKY<br>TOWER</p>

Also works great! :smiley:

For the moment, my revised code looks like:

{

(set: _pretitle to
	(text-color: yellow)+
	(text-size: 1)+
	(font: 'Sigmar One')
	)

(set: _title1 to
	(css: "line-height: 0.9em;")+
	(text-color: green)+
	(text-rotate: -4)+
	(text-size:4)+
	(font: 'Creepster')
    )

(align:"=><=")+(box: "X")[

<p>
	_pretitle[ESCAPE FROM]<br>
	_title1[Spooky<br>Tower]
<p>

]

}

Go team!! :partying_face:

1 Like
16

You might or might not be doing this already, but using the inspector (right-click on an element – or hit ctrl+shift+i) in Chrome or Firefox is key to understanding how to apply custom CSS to Twine stories. This is because Harlowe (and other story formats) have their own way of generating the HTML and sometimes they have there own CSS that might be conflicting or interfering.

image
image1099×429 44.8 KB

This is a sample of my Harlowe story. As you can see, I’ve inspected the Start Game link. Notice on the right hand side that my custom styles in the Story Stylesheet have <style> beside them, but Harlowe CSS has ...html:7. I can see that I’ve overrode the Harlowe .visited:hover violet colour with my own green colour.

This technique will allow you to understand why certain CSS works in some situations, but not in others.

Anyway, just sharing some super secret, government black-ops, advanced tips from the trenches. :smiley:

Fun Fact: If you ever have an issue with Harlowe actually overriding your specific styles, use !important at the end of your style parameter. Use it only when necessary though because it stops all other changes to that style attribute.

1 Like
17

Thanks @HAL9000 - I’ve dipped my toe into element inspection - and understanding is slowly beginning to dawn on me as to what I’m looking at. :sweat_smile:

These tips will help that along I think!! :smiley:

18

@HAL9000 - taking advantage of your super secret, government black-ops, advanced tips I’ve also managed to successfully implement some of your earlier advice too!

Remember how for some reason (css: "line-height: 0em;")[] wasn’t giving me any joy, but (css: "line-height: 0em;")+(text-rotate: -0)[] was? Well on closer inspection, the HTML created by the second approach includes display: inline-block; where as the first does not.

So the code:

(css:
	"display: inline-block;
	line-height: 0em;"
    )[SPOOKY<br>TOWER]

Also works like a charm, like you said it would. The problem, when I was initially implementing your advice, was that I was applying it only to the second word, instead of both words - as per your advice from 27/03 :

The reason your code wasn’t working is that SPOOKY had it’s own line-height from Harlowe’s CSS, separate from TOWER.

1 Like
19

I think you’ll be just fine with CSS.

You can teach someone rules and syntax, but you can’t teach them a desire to really figure out what’s going on. You’ve got that in spades. :slight_smile:

Can’t wait to see your project!

1 Like