Centre Alignment woes

Hello! New to twine and hoping somebody can help me out!

Editing on Twine2 : Harlowe3.3.4, Previewing on Google Chrome and also on Chrome on a Google Pixel.

I’m looking to reliably make full-width centred text.

I have tried using the Style Markup as per the Twine Cookbook…

The “=><=” produces perfectly centred text BUT it also adds 1/4 margins on either side, which mean that anything of any length gets line wrapped, which is an issue because I’m using it for titles and I want to keep them on one line.

The alignment function in the Twine editor produces the following:

(align:“=><=”)+(box:“X”)[your text here]

This seems to produce a text box that is full width (so it doesn’t have the 1/4 margin indents) BUT the entire box is also offset to the right by 2-3 characters. Not super obvious when viewed on a computer, but very obvious when viewed on a mobile device.

Can anyone help me out here??

1 Like

I"m not great with Harlowe, but that sounds like some CSS madness separate from the markdown that’s adding those margins by default. Same with the offset; I think Harlowe has a menu formatted on the left?

hmmm… is this a bug then? Perhaps I should be submitting a fix request of some kind?

Well the tw-sidebar which Twine includes by default is within the left margin of the tw-story area. I’ve got visibility on that turned off, but it doesn’t seem to affect the layout. Is that what you mean?

note: Please use the Preformatted text </> option in the comment field’s toolbar when supplying a code example, as it makes that code easier to read and copy-n-paste. It also stops the forum software converting valid standard quotes ( and ") into invalid Typographically (curly) quotes, thus breaking any String literals contained in that code.

eg. your (align:“=><=”)+(box:“X”)[your text here] code example would appear like so…

(align:"=><=")+(box:"X")[your text here]

…without the invalid curvy double quotes.

If you add the following example to a Passage in your project…

Normal text.

(align: "=><=")[Macro Centred text]

(box: "X")[Boxed text]

(align: "=><=") + (box: "X")[Boxed Centred text]

…then view that Passage in your web-browser you will see that the (align: "=><=") macro call isn’t centring the associated text, so something is obviously broken!

And if you use your web-browser’s Web Developer Tools to inspect the HTML elements generated by the (align: "=><=") macro call, you would see something like the following…

<tw-hook style="text-align: center; max-width: 50%; margin-left: auto; margin-right: auto; display: inline-block;">Macro Centered text</tw-hook>

…and learn in-lined assigned CSS like the following is being used (unsuccessfully) to “centre” the text…

text-align: center;
max-width: 50%;
margin-left: auto;
margin-right: auto;
display: inline-block;

Now with a little knowledge of CSS properties (gained by reading the relevant pages on the MDN site) you will discover the following:

  1. The default width of an element being displayed as inline-block is the minimum required to display the content.
    Which in this case has been calculated by the web-browser as being just under 217px.
  2. The text-align property uses the element’s current Width (and Hight) when aligning text within the bounding box of that element.
    As the width of the element is currently the minimum required to display the text then that text is being “centred” within that width. So nothing appears to be happening.
  3. The element as been assign a maximum width limit of 50% of the width of the “passage” area of the page.
    So even if a larger text sample (like Lorem Ipsum) was placed within the Hook of the (align: "=><=") macro call its displaying would be limited to the left 1/2 of the “passage” area of the page.

So basically the CSS being applied by the (align: "=><=") macro call is broken, and I strongly suggest you open an Issue in the Harlowe repository to let its Developer know.

How if you inspect the HTML generated by the (box: "X")[Boxed text] macro call it will look something like the following…

<tw-hook style="display: block; width: 100%; max-width: 100%; margin-left: 0%; box-sizing: content-box; overflow-y: auto; padding: 1em;">Boxed text</tw-hook>

…and learn that the element is being displayed as block, so its width will automatically default to being the same as its parent which in this case is the “passage” area of the page. And to make sure that is the case Harlowe’s Developer has also manually assigned a width of 100% of of the parents.

And if you look at the HTML of the combination of the above (align: "=><=") + (box: "X") you will see…

<tw-hook style="text-align: center; max-width: 100%; margin-left: 0%; margin-right: auto; display: block; width: 100%; box-sizing: content-box; overflow-y: auto; padding: 1em;">Boxed Centred text</tw-hook>

…that it is still being displayed as a full width block element, except it’s text is now centre aligned. A padding of 1em has also been assigned to all four edges of the element, which reduces the area the text is centred in slightly.


Thanks for taking the time to look into this @Greyelf!

I’m opening an issue on the Harlowe repository now. It is issue #301 - I’d share a link, but apparently I can’t include links in my posts!

Thanks heaps!

1 Like