Twine Version: 2.10.0
I’m working on a IF piece that uses ASCII art for various things, and as part of this I need the ability to change the font size without changing it everywhere. The methods shown in documentation and tutorials work for non ASCII art sections, but any ASCII art that I am using needs to be surrounded by certain things in order to preserve the formatting and spacing, but the font size changer AND the inline CSS alternative both seem to not play well with that. Does anyone have a solution? Example below /
(text-size: 0.5)[<pre>__| |_________________________________________________________________________________________________________________________________| |__
__ _________________________________________________________________________________________________________________________________ __
| | | |
| | | |
| | | |
| | ▄█ █▄ ▄██████▄ ▄▄▄▄███▄▄▄▄ ▄████████ ▄▄▄▄███▄▄▄▄ ▄████████ ▄█ ▄█▄ ▄████████ ▄████████ | |
| | ███ ███ ███ ███ ▄██▀▀▀███▀▀▀██▄ ███ ███ ▄██▀▀▀███▀▀▀██▄ ███ ███ ███ ▄███▀ ███ ███ ███ ███ | |
| | ███ ███ ███ ███ ███ ███ ███ ███ █▀ ███ ███ ███ ███ ███ ███▐██▀ ███ █▀ ███ ███ | |
| | ▄███▄▄▄▄███▄▄ ███ ███ ███ ███ ███ ▄███▄▄▄ ███ ███ ███ ███ ███ ▄█████▀ ▄███▄▄▄ ▄███▄▄▄▄██▀ | |
| | ▀▀███▀▀▀▀███▀ ███ ███ ███ ███ ███ ▀▀███▀▀▀ ███ ███ ███ ▀███████████ ▀▀█████▄ ▀▀███▀▀▀ ▀▀███▀▀▀▀▀ | |
| | ███ ███ ███ ███ ███ ███ ███ ███ █▄ ███ ███ ███ ███ ███ ███▐██▄ ███ █▄ ▀███████████ | |
| | ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ▀███▄ ███ ███ ███ ███ | |
| | ███ █▀ ▀██████▀ ▀█ ███ █▀ ██████████ ▀█ ███ █▀ ███ █▀ ███ ▀█▀ ██████████ ███ ███ | |
| | ▀ ███ ███ | |
| | | |
| | | |
__| |_________________________________________________________________________________________________________________________________| |__
__ _________________________________________________________________________________________________________________________________ __
| | | | </pre>]
That code SHOULD turn into this text:
Oh replying to add context, I need to change the font size because while the ASCII displays correctly, the default font size makes it too large to fit on the screen.
Update, I solved this by changing the font size within the HTML tag. It looks like this:
<pre style="font-size: 0.5em">__| |_________________________________________________________________________________________________________________________________| |__
__ _________________________________________________________________________________________________________________________________ __
| | | |
| | | |
| | | |
| | ▄█ █▄ ▄██████▄ ▄▄▄▄███▄▄▄▄ ▄████████ ▄▄▄▄███▄▄▄▄ ▄████████ ▄█ ▄█▄ ▄████████ ▄████████ | |
| | ███ ███ ███ ███ ▄██▀▀▀███▀▀▀██▄ ███ ███ ▄██▀▀▀███▀▀▀██▄ ███ ███ ███ ▄███▀ ███ ███ ███ ███ | |
| | ███ ███ ███ ███ ███ ███ ███ ███ █▀ ███ ███ ███ ███ ███ ███▐██▀ ███ █▀ ███ ███ | |
| | ▄███▄▄▄▄███▄▄ ███ ███ ███ ███ ███ ▄███▄▄▄ ███ ███ ███ ███ ███ ▄█████▀ ▄███▄▄▄ ▄███▄▄▄▄██▀ | |
| | ▀▀███▀▀▀▀███▀ ███ ███ ███ ███ ███ ▀▀███▀▀▀ ███ ███ ███ ▀███████████ ▀▀█████▄ ▀▀███▀▀▀ ▀▀███▀▀▀▀▀ | |
| | ███ ███ ███ ███ ███ ███ ███ ███ █▄ ███ ███ ███ ███ ███ ███▐██▄ ███ █▄ ▀███████████ | |
| | ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ▀███▄ ███ ███ ███ ███ | |
| | ███ █▀ ▀██████▀ ▀█ ███ █▀ ██████████ ▀█ ███ █▀ ███ █▀ ███ ▀█▀ ██████████ ███ ███ | |
| | ▀ ███ ███ | |
| | | |
| | | |
__| |_________________________________________________________________________________________________________________________________| |__
__ _________________________________________________________________________________________________________________________________ __
| | | | </pre>
@Eemaartz
As you’ve discovered, Harlowe’s styling & CSS related macros (and markup) generated very opinionated CSS, that is often applied by wrapping the target content in one or more custom HTML elements. And because that CSS is being applied inline, it can be difficult to override it.
For this reason I generally advise not using those macros (and markup), and instead suggest using CSS Rules in the project’s Story Stylesheet area to target the HTML elements generated by Named Hooks or non-style related macros / markup.
eg. if you wrap the ASCII related content in your example within a named hook like so…
|ascii>[\
__| |_________________________________________________________________________________________________________________________________| |__
__ _________________________________________________________________________________________________________________________________ __
| | | |
| | | |
| | | |
| | ▄█ █▄ ▄██████▄ ▄▄▄▄███▄▄▄▄ ▄████████ ▄▄▄▄███▄▄▄▄ ▄████████ ▄█ ▄█▄ ▄████████ ▄████████ | |
| | ███ ███ ███ ███ ▄██▀▀▀███▀▀▀██▄ ███ ███ ▄██▀▀▀███▀▀▀██▄ ███ ███ ███ ▄███▀ ███ ███ ███ ███ | |
| | ███ ███ ███ ███ ███ ███ ███ ███ █▀ ███ ███ ███ ███ ███ ███▐██▀ ███ █▀ ███ ███ | |
| | ▄███▄▄▄▄███▄▄ ███ ███ ███ ███ ███ ▄███▄▄▄ ███ ███ ███ ███ ███ ▄█████▀ ▄███▄▄▄ ▄███▄▄▄▄██▀ | |
| | ▀▀███▀▀▀▀███▀ ███ ███ ███ ███ ███ ▀▀███▀▀▀ ███ ███ ███ ▀███████████ ▀▀█████▄ ▀▀███▀▀▀ ▀▀███▀▀▀▀▀ | |
| | ███ ███ ███ ███ ███ ███ ███ ███ █▄ ███ ███ ███ ███ ███ ███▐██▄ ███ █▄ ▀███████████ | |
| | ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ▀███▄ ███ ███ ███ ███ | |
| | ███ █▀ ▀██████▀ ▀█ ███ █▀ ██████████ ▀█ ███ █▀ ███ █▀ ███ ▀█▀ ██████████ ███ ███ | |
| | ▀ ███ ███ | |
| | | |
| | | |
__| |_________________________________________________________________________________________________________________________________| |__
__ _________________________________________________________________________________________________________________________________ __
| | | |
]
…then that content will be wrapped in a custom HTML element that looks something like…
<tw-hook name="ascii">...the ASCII content...</tw-hook>
And if you inspect the CSS normally being applied to the HTML <pre> element, you would see something like the following CSS Rules…
pre {
display: block;
font-family: monospace;
unicode-bidi: isolate;
white-space: pre;
margin: 1em 0px;
}
pre {
font-size: 1rem;
line-height: initial;
}
So if we crafted a CSS Rule that targets the named hook element, and apply CSS like the above combined with your own font size change, it would look something like…
tw-hook[name="ascii"] {
display: block;
unicode-bidi: isolate;
white-space: pre;
margin: 1em 0px;
line-height: initial;
font-family: monospace;
font-size: 0.5em;
}
…then the Named Hook wrapped content will appear like it was wrapped in a <pre> element and have the font size you want applied to it.
1 Like
I’ll have to try this out if I run into any further issues. Because the rest of my ASCII art so far doesn’t need resizing and I don’t usually want any other effects on it, it hasn’t come up again yet.
