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:
- 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.
- 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.
- 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.