Formatting tricks thread

Authoring Twine
1

Twine Version: 2.11.1

I have decided to share some easy ways to style your game in Harlowe. Mostly because others have been helping others. Feel free to add to this!

First is a drop shadow for borders
(b4r:"inset","outset","outset","inset")+(b4r-size:3.9,5.7,5.7,3.9)+(b4r-colour:white,grey,grey,white)[Your Text Here]

This is the only one that I can give without giving someone flashbacks to 'nam. I cannot find any of them that wouldn’t make the CIA scared.

1 Like
2

A couple of suggestions regarding applying specific styling to content:

1: The return from styling Changers can be stored in a variable.

(set: _shadowy to (b4r: "inset", "outset", "outset", "inset") + (b4r-size: 3.9, 5.7, 5.7, 3.9) + (b4r-colour: white, grey, grey, white))

Storing changers in a variable can be useful when the same styling needs to be applied multiple times within a Passage…

Blah blah
_shadowy[content with a shadow box]
More blah blah
_shadowy[more content with a shadow box]

2: A Named Hook can be targeted by a CSS Rule defined in a project’s Story Stylesheet area.

eg. A Named Hook like the following…

|shadowy>[content with a shadow box]

…generates the following HTML when that Passage is visited…

<tw-hook name="shadowy">content with a shadow box</tw-hook>

…which means a CSS Rule like the following that targets any <tw-hook> element that has a name attribute of "shadowy" can be used to apply the same styling as the Changers mentioned in point 1…

tw-hook[name="shadowy"] {
	border-style: inset outset outset inset;
	border-width: 3.9px 5.7px 5.7px 3.9px;
	border-color: rgb(255, 255, 255) rgb(136, 136, 136) rgb(136, 136, 136) rgb(255, 255, 255);
	display: inline-block;
}

The above CSS Rule allows Passage content like the following to be written…

Blah blah
|shadowy>[content with a shadow box]
More blah blah
|shadowy>[more content with a shadow box]

notes:

  1. The variable assignment example in point 1 is using a Temporary variable, because storing such Changes within a variable requires more space that storing a Number or a short String. Thus if a Story variable is used then that additional storage space is added to Progress History, which can affect the amount of storage a Save needs.
  2. The CSS property assignments used in point 2 were obtained by using the web-browser’s Web Developer Tools to inspect the HTML generated by your (@AdNauseam) original shadow border example.
  3. Personally I finds using Named Hooks combined with related CSS Rules a better way to apply styling to a page than Harlowe’s own styling macros, because it generally results in less messy Passage content.
3

Ohhh, That is so much better! I am still an amerture so most of my skills are underdeveloped. But that’s great.

4

After a bit of experimentation I discovered an even better looking drop shadow
(set:(b4r:"outset")+(b4r-size:1.8,4.5,5.9,1.6)+(b4r-colour:grey) to ?DropShadow)

If you attach this into the header or footer you can call upon it anytime!

5

Trying to assigned an accumulation of Changers to a HookName like ?DropShadow will result in a Please use the (set:) macro with just single variables and typed variables to the left of 'to' error.

If you want to use code in a footer tagged Passage to apply styling to all instances of a specific Named Hook in the Passage currently being visited then use either the (change:) or (enchant:) macro.

eg. the following will style all |DropShadow>[content] Named Hook instances that were defined before the (change:) macro was called. This code could be placed either late in the visited Passage itself, or in a footer tagged one.

(change: ?DropShadow, (b4r: "outset") + (b4r-size: 1.8,4.5,5.9,1.6) + (b4r-colour: grey))

note: the “Named Hook combined with related CSS Rules” method I mentioned earlier can be a better solution than using (change:) macro calls in a footer tagged Passage, because the Harlowe content parser doesn’t have to generate the CSS the macro creates over & over again, thus reducing the work the parser has to do each time a Passage is visited.

6

Wait… I don’t know how I missed that! anyway I meant $DropShadow Not ?DropShadow