TweeGo Version: v2.1.1+81d1d71
Story Format: SugarCube v2.31.1
What’s the best way to automatically indent paragraphs when revealing hidden text? I’d rather not have to refresh the passage, especially if that re-hides any other previously revealed text.
The workaround I’m currently using is to manually specify a class for each hidden paragraph, but that’s rather inconvenient.
Below is a Twee3 example showing the text hiding technique that I’ve been using, with automatic indentation not being applied.
Thanks for whatever help can be provided.
:: StoryData
{
"ifid": "C31A5464-60FC-4937-A550-C7D75F7692AF"
}
:: StoryTitle
Test Para Indent
:: Story Stylesheet [stylesheet]
/* make it possible to hide/show text */
.hide { display: none; }
/* indent paragraphs (in conjunction with Config below) */
.passage>p { margin-left: 1.0em;
margin-right: 1.0em;
text-indent: 2.0em;
}
:: Story JavaScript [script]
/* automatically indent paragraphs */
Config.cleanupWikifierOutput = true;
:: Start
!! This is the Start (and only) passage.
These paragraphs are automatically indented.
Magna illud minim ius at, pro no numquam expetendis, an eam vidit denique. No numquam detraxit eos, inani detracto te quo, ad vim tritani accommodare. Utamur insolens qui no, cum at accusata delicatissimi, unum albucius ne eam.
Magna illud minim ius at, pro no numquam expetendis, an eam vidit denique. No numquam detraxit eos, inani detracto te quo, ad vim tritani accommodare. Utamur insolens qui no, cum at accusata delicatissimi, unum albucius ne eam.
<<link "Toggle Reveal.">><<toggleclass "#hidden" "hide">><</link>>
<div id="hidden" class="hide">
When revealed, these paragraphs are not indented.
Magna illud minim ius at, pro no numquam expetendis, an eam vidit denique. No numquam detraxit eos, inani detracto te quo, ad vim tritani accommodare. Utamur insolens qui no, cum at accusata delicatissimi, unum albucius ne eam.
Magna illud minim ius at, pro no numquam expetendis, an eam vidit denique. No numquam detraxit eos, inani detracto te quo, ad vim tritani accommodare. Utamur insolens qui no, cum at accusata delicatissimi, unum albucius ne eam.
</div>
Unfortunately, that made no difference whatsoever that I can see. The revealed paragraphs are still fully left justified.
Edited to add:
I tried both Firefox and Vivaldi, and restarted tweego -w just to be conservative.
(Strangely, in both cases, when using Vivaldi, the right margin of the auto-indented paragraphs changes when the hidden text is revealed, but that’s just a red-herring, I’m sure. It doesn’t happen with Firefox. Oh, I see: it happens when the right scroll-bar appears because the browsers’ windows are different sizes. Like I wrote, a red herring.)
That should have worked. If it didn’t, then I’d use the inspector to ensure that you’re actually getting paragraphs within the hidden section. It’s been a while since I looked at that code, but my hunch is that the <div> is blocking paragraph formation.
Another option is changing it from a <div> to a <p>. According to the inspector, it looks the previous <p> safely closes before your <div>, so if it were a <p> instead, it would be correctly placed inside your HTML and be subject to the .passage>p CSS.
Unfortunately, it seems to be getting applied only to the first line of text inside the <div>. Subsequent sections of text, which are separated by <br> <br> aren’t getting the initial paragraph indentation specified by the text-indent.
According to https://www.w3schools.com/cssref/pr_text_text-indent.asptext-indent is applied to the first line of text in a “text block”. Apparently <br> <br> is not sufficient to delineate text blocks, so presumably a <p> </p> pair is required around each section of text. Unfortunately SugarCube v2 does not replace <br> <br> by <p> ... </p> when they’re inside a <div> (hopefully v3 will) so I have to insert them all manually. That’s one of the things I’d like to avoid.
I’m not sure what you mean when you suggest that I replace <div> by <p>. Usually the “hidden” sections of text include multiple paragraphs, so it seems to me that I’d have to manually insert multiple <p>...</p> pairs instead of a single <div> ... </div> pair. That additional typing is what I’d like to avoid. Or am I misunderstanding you?
My current workaround has been to minimize the inter-passage transition by specifying in “Story Stylesheet”
.passage {
transition: none;
}
and using two separate passages, one without and the other with the additional text (implemented using <<include ...>> macros). There’s still a very slight flicker, but otherwise it seems to be doing what I want, with SugarCube automatically inserting the appropriate <p>...</p> for me. While there’s still the overhead of setting up the <<include...s, I find that to be much less bothersome than continuously inserting <p>...</p>.
text-indent provides the functionality that I want: it helps to distinguish one paragraph from the next. Also, I’m already using both margin-left and margin-right, but thanks for the suggestion.
Oh, I see now. I thought you wanted it uniformly indented, but you actually just want the first line of each paragraph indented?
In that case, since you’re already typing <br><br>, would it actually be that much more work to wrap each paragraph in <p></p> tags instead? That should fix the issue. (<p> is allowed inside a <div> tag, in case you weren’t sure.)
I’m not explicitly typing the <br> directives. They are what are generated by SugarCube when you type an extra Enter between lines of text to indicate a new paragraph. SugarCube is generating HTML for the Web page rendering.
<br> is the HTML formatting code which creates any blank line you see on a Web page. Left to itself, HTML ignores blank lines in the input text and eliminates them when it renders the corresponding Web page.
Oh. Right. Sorry. It’s been a while since I’ve actually used Twine for my own project. When I was working on one, I had overwritten the Passage.processText() function to remove all line breaks and put them in manually myself, so I forgot that it did that.
