There’s just one thing I’d like to set up: Automatic first line indents for paragraphs in a passage, excluding the very first paragraph.
This is difficult because a Twine passage is not rendered as paragraphs as per <p> tags. They are just text nodes separated by a break and a consecutive break tag, as follows:
<tw-consecutive-br></tw-consecutive-br>
"
This is the paragraph text as a text node, separated from the preceding text node paragraph. Lorem ipsum, etc.
"
Can anyone suggest how to achieve a first line indent for all ‘paragraphs’, excluding the first of the passage? I’m not much a coder, so my attempts to add JS failed, but probably because I don’t know what I’m doing.
I figured that - since p tags aren’t used and therefore CSS can’t target the paragraphs - a simple JS script is needed, one that adds (eg 2em) leading space to the first line of every block of text inside quotes (") which appears immediately after every instance of tw-consecutive-br. Taking this further, perhaps it would be easier to use the JS to wrap the text nodes in p tags and the apply the indent CSS. Am I close? Or is there a built in solution I haven’t found yet.
I am not a coder - any solution would be very much appreciated.
From a web-browser’s point-of-view the line of textual content that starts with “This is the paragraph” is not actually a paragraph, because it knows that paragraphs are found within <p> elements.
eg. The following is a paragraph…
<p>This is the paragraph text as a text node, separated from the preceding text node paragraph. Lorem ipsum, etc.</p>
You don’t state which Story Format you are using, but based on the fact your example & question includes reference to a custom <tw-consecutive-br> element I will assume you are using Harlowe.
Harlowe has been deliberately designed to restrict an Author’s ability to use JavaScript to enhance the functionality of either their project and/or the story format’s engine.
Harlowe also doesn’t have a JavaScript API, so using JavaScript to programmatically alter the HTML structure generated from processing a Passage before that structure is added to the page’s DOM is likely going to be difficult. And making such alterations after that structure was added to the DOM (thus rendered) would likely cause visual side-effect that the end-user might see while that altering is being done.
But someone else may know of a way to programmatically achieve the outcome you want.
Is there a reason why you don’t just use <p> element tags when adding paragraphs to your Passage?
Hi @Greyelf - thanks for your response. As someone new to Twine, your response was very helpful to me. I now understand that the story format selected is responsible for the core layout, not just the features on top. Yes, it was Harlowe, but I’ve since changed to Sugarcube to keep my future options open for complexity, etc. I see that Sugarcube also doesn’t use P tags - it just uses two breaks to simulate a paragraph, so the situation doesn’t change. I’m averse to manually creating HTML paragraphs as I write, because I have some very long form projects and I really need it to happen automatically - it would get super tedious. Do you know if Sugarcube could allow an easy solution?
It has a Config.cleanupWikifierOutput setting that you can set to true within your project’s Story JavaScript area.
The related feature will try to automatically wrap the textual content of the Passage within <p> elements during the Passage processing phase, but there are limitations to how effective it will be.
Awesome, that works perfectly @Greyelf . I now have the indents on the front end.
Lastly, just wondering if you know of a way to tell the passage editor to apply this same JS/CSS combination so it is style the same as the front end as I’m writing it…? Might be a long shot but if there’s a way, I’d really appreciate knowing. Thanks again.
The Twine 2.x application allows story format developers to alter the default behaviour of the Passage Editor, and those developers do that by including additional code in their story format’s format.js file that targets specific APIs recently included in the application.
This is how story formats like Harlowe and Chapbook have added features like Syntax Highlighting to the Passage Editor.
As far as I know an Author doesn’t have the ability to do the same, unless they want to hack the format.js file of the story format they are using for their project. And personally I would not recommend doing that because such a hack would be overridden by the next release of the application, and in the case of SugarCube the next time the Author manually updates that story format.
Thanks again Greyelf. That sounds about right. Appreciate the info. All good then, I will start writing (and not let this become an exercise in procrastination…).
I just want to qualify this comment, after playing around with it more. The <p> formatting works well when it is being applied to previously created passages, and the p wrap will work when you hit a double ‘enter’ but will not work if you hit enter once for a new line, as per normal writing. If you only hit enter once, for some reason it insists on still using breaks to do this, and they don’t get wrapped in P tags, so they are not indented. Sounds like these are the limitations you referred to @Greyelf. If I find a solution I’ll post it here.