Using (css:) to zero out (box:) padding

Twine: 2.6.2, Harlowe : 3.3.5

Does anyone have any hot tips as to how to use the (css:) macro (or any other technique really) to zero out the padding in a (box:)?

The manual states about boxes :

the hook will have ‘padding:1em’, unless another padding value has been applied to it (such as via (css:)).

…so a (css:) macro should do the trick… BUT if I try the code:

(box:"X")+
(css: "padding: 0em;")+
(border: 'solid')
[BOX CONTENT]

the resulting html (using inspector) comes out:

style="display: block; width: 100%; max-width: 100%; margin-left: 0%; box-sizing: content-box; overflow-y: auto; border-style: solid; padding: 1em; border-width: 2px;"

…so the Border Style comes along for the ride, but for some reason the padding does not!

I’m assuming I am missing some subtlety of syntax here. Anybody got a hot tip on how to make this work?

Thanks in advance!

It’s also worth noting that while values lower than 1em don’t seem to be applied (are they being overridden somehow?), values greater than 1em are… but just not as em?!

For example:

(box:"X")+
(css: "padding: 5em;")+
(border: 'solid')
[BOX CONTENT]

Produces a box with padding: 120px; …so the (css: "padding") macros can interact with the (box:) but it just doesn’t seem to with em values <1 ?

Welcome to the wonderful world that is Harlowe’s accumulative inline CSS…

While you can’t use (css:) in that specific use case to set the padding to zero, you can used it to assign a smaller padding than the default 1em set by (box:)

(box: "X")+(css: "padding: 0.1em")+(border: 'solid')[BOX CONTENT]

I’ve been using Harlowe for the past month or so, just trying this and that, but I come from a web development background (well, from back in the 90s when the internet started) so I have a basic understanding of HTML, SVG, JS and CSS. (Boy, have things changed though.) I’m having a much easier time making my own HTML objects and styling them directly. Also, the code is way more concise and flexible.

TGB, I mention this because you seem to grasp things quicker than most I’ve seen. I’ll share what I do later today when I get back home and then you’ll have more ammo than you’ll know what to do with. You’ll be like Rambo vs. Harlowe. It’ll be a bloodbath!

I’m so stubborn that I vow to make Harlowe sing like a bird, despite it’s best efforts to gobble bread crumbs and crap in the parking lot.

(My cousin used to call the seagulls in the parking lot $hithawks. I always thought that was a funny name.)

I won’t blame you if you switch to SugarCube though. I had seconds thoughts a few times, but I’ve just found ways around the hurdles and it had very little to do with Harlowe… and more about my lack of understanding CSS rules and such.

Edit: I should mention that I’m enjoying Harlowe quite a bit, to be completely honest (I really like the syntax and working directly in Twine), but I haven’t dealt with game saves so I’m not going to stake my life on Harlowe just yet. However, if there’s a will, there’s a way.

@Greyelf - Thank you again! In all the many permutations I threw at my computer trying to get on top of this thing, I have no idea how that one slipped past me, but it did! :melting_face:

This is an excellent workaround for now.

Is there any other information on this accumulative inline CSS out there - that might provide rules or guidelines as to valid use cases? I assume it’s accumulative because the statements build upon one another (in theory :wink: ) to produce a combined result, and inline because it’s CSS jammed right into the HTML document next to the element it is effecting, rather than sitting in a separate file sheet…

I’ve been using Harlowe for the past month or so, just trying this and that

I finally picked up Twine (and Harlowe) in January (after intending to get around to it for many years) and it’s been a fun ride! I’m working on my first project - which I originally thought I’d finish in early Jan :rofl: …may have had some scope creep, just sayn’. :melting_face: …but seriously it’s just an excuse to try a variety of things.

I’m so stubborn that I vow to make Harlowe sing like a bird

As a person with little in the way of coding experience, (some HTML a million years ago, and expressions in After Effects) I thought Harlowe was a logical choice, and I’ve been having a great time! If anything it’s because the rest works so smoothly that I have started to get fixated on those aesthetic bits I struggle to nail down!

My cousin used to call the seagulls in the parking lot $hithawks

$hithawks could have been a much underrated 80’s cartoon - or perhaps a band? :thinking: :laughing:

making my own HTML objects and styling them directly

I’d begun thinking along those lines myself - the only hurdle being that beyond the vague, nebulous concept, I’d have no idea what I was doing! :rofl: But I think, if I could get a basic grasp on the CSS and how to best to integrate and manipulate it - I’d feel a lot more confident with Harlowe, knowing I could patch a workaround if I needed to!

Notes and additional resources much appreciated! :smiley:

Now I just need to try and stop getting distracted by the aesthetics for 5mins so I can finish getting the mechanics nailed down! :rofl:

1 Like

…hmmmm upon the release of Harlowe 3.3.6 - this workaround may no longer function:

This is from the Harlowe notes for 3.3.6 changes (unreleased)

The (box:) height value now corresponds to a CSS height of 1.5em (Harlowe’s default CSS line-height ) multiplied by the given number, plus the default vertical padding of (box:) hooks (2em)…

…as a result, this will not adjust to match any custom CSS padding given to this hook in addition to (box:) .

I guess we’ll see what happens! :grimacing:

1 Like

So… using the inspector, (box: "X")+(css: "padding: 0.1em")+(border: 'solid')[BOX CONTENT] translates to the following in HTML…

<tw-expression type="macro" name="box" return="changer"></tw-expression>
<tw-expression type="macro" name="css"></tw-expression>
<tw-expression type="macro" name="border"></tw-expression>
<tw-hook style="
display: block; 
width: 100%; 
max-width: 100%; 
margin-left: 0%; 
box-sizing: content-box; 
overflow-y: auto; 
border-style: solid; 
padding: 2.4px; 
border-width: 2px;
">BOX CONTENT</tw-hook>

So to reach that element with BOX CONTENT, you need a specialized CSS selector…

tw-expression[name="border"] + tw-hook { color:red; }

…there are a lot of ways to use CSS selectors. It’s a whole paradigm unto itself, but my example does colour it red so there’s that. It’s not a very reliable way, I feel (other possibilities can easily exist for that combination of tags), but the possibility is there to add your own styles from the Stylesheet to specific Harlowe generated elements.

I was able to add a custom hook around it…

|boxinator3000>[(box: "X")+(css: "padding: 0.1em")+(border: 'solid')[BOX CONTENT]]

…and now I can more reliably access it with…

tw-hook[name="boxinator3000"] > tw-hook { color: green; }

What you do with this new found knowledge is up to you. I can only show you the door. You must be the one who walks through it. :wink:

Edit: I’ll be making a topic about custom HTML and CSS within Harlowe. You might get a few more ideas from it.

1 Like

Yes, CSS that is applied directly using a HTML element’s style attribute is known as being inline.

Where as CSS that is applied some other way, like via a <style> element, is generally called external. But that doesn’t necessarily mean that that CSS is stored external to the HTML file, as <style> elements can either directly contain CSS rules or reference an external CSS file.

I don’t know of a single source of information that describes all the nuances of how Harlowe dynamically applies CSS to the elements of a page, most of the things I know have been (or are) learnt when answering someone’s questions.

And as Harlowe’s Developer has been known to make unexpected major implementation changes in minor releases of the story format, the only real source (besides trial & error) of such information is the Harlowe Heptapod repository.

2 Likes

You are correct that a CSS Selector can crafted that is specific enough to target the contents of @TheGrowingBrain 's original example.

However, generally for one CSS rule to override another it either needs to be defined later in the sequence of definitions than the original rule, or its CSS Selector needs to be more specific than the original’s. But inline based CSS styling generally overrides both of the above methods, which makes it difficult to override using external rules.

So while your color property assignment works, because it is altering a property that isn’t included in the list set by either the (box:) or the (border:) macros, changing the default padding being applied by the (box:) macro won’t.
eg. If you changed your example CSS to the following…

tw-expression[name="border"] + tw-hook { color:red; padding: 0; }

…you will see that the color change still happens, but the above rule’s padding assignment gets overwritten by the inline CSS.

note: The next CSS example comment will be using the following Passage content as the target of the styling…

(box: "X")+(border: 'solid')[BOX CONTENT]

…as there will not be a need for the (css:) macro call.

There is one technique that can be used to overwrite inline based styling, but it should only be used when there is no other means to achieve a required outcome, because it stops further assignment being possible to the target property of the target element.
And that technique is the !important flag…

tw-expression[name="box"] + tw-expression[name="border"] + tw-hook {
	padding: 0 !important;
}

The above can also be used in the situation what a Named Hook has been used to identify content that contains the bordered box…

|padless>[(box: "X")+(border: 'solid')[BOX CONTENT]]

…and the associated CSS rule…

tw-hook[name="padless"] tw-hook {
	padding: 0 !important;
}
2 Likes

Thanks heaps @Greyelf and @HAL9000 for you advice! This is some excellent stuff to hit the ground running with!

I plan on refocusing on core mechanics for a bit and then returning to styling (I tend to bounce between them) but when I do, reading up on CSS - as some of the resources mentioned here have great looking introductory tutorials and examples!

1 Like

Thanks for that! Also - I don’t know if there is a way you can alert me when you start your topic: HTML and CSS within Harlowe - but otherwise I’ll try to keep an eye out! :smiley:

1 Like

Will do. And you’re very welcome.

1 Like