Indenting Text Blocks

Question

Is it possible to indent an entire block / paragraph of text?

I found a post talking about setting text-indent to <p> via css, but that only does the first line - I want basically the same effect, but for the entire paragraph.

I know that you can do =><===  which would be perfect, but then problem is that the text becomes justified instead of left-align.

Answer 1

A Harlowe specific version of @idling suggest that uses Harlowe syntax is to wrap the text you want indented within a named hook (with a known name like indent) and to apply the CSS styling to that instead.

1. Place the following in your Story Stylesheet area, it assumes you're using a indent named hook.

tw-hook[name="indent"] {
	display: inline-block;
	padding-left: 2em;
}

2. Use the styled  indent named hook in your Passage like so.

|indent>[Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.]

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

|indent>[Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.]

note: using display: inline-block gets around the issue of the un-styled text and the styled text appearing at different times due to how the passage transition effect works. 

Comments

This is perfect, thanks! I've seen tw-story, tw-passage etc. mentioned a lot before, but I didn't know tw-hook was a thing.

I was looking at inline-block on the w3 css page thinking it might be a potential solution, but didn't really understand it. I'm guessing in this case it automatically gets added to unstyled text but not things specifically styled by the user.

I tested with and without the line and both sets of text load at the same time for me.

---

Standard HTML elements are generally displayed in one of two ways:

1. inline: which allows the particular element to flow with other inline elements that either precede it or come after it. One such element is span, the following example demonstrates how such elements can flow together and even be on the same line.

Some plain text <span>followed by text within a span element</span> which is followed <span>by a second span</span>, which is ended by some more plan text.

... the above should flow with no blank lines between the span elements and the plain text (*), and should automatically wrap to the next line if necessary.

2. block: which causes the particular element to automatically appear on a different line than any preceding or following elements/content, it also allows the particular element to have assignable properties like height and width. Two such elements are div and p (paragraph), the following demonstrates the forced separate line behaviour.

Some plain text <div>followed by text within a div element</div> which is followed <div>by a second div</div>, which is ended by some more plan text.

... the output of the above example should appear over 5 lines.

The inline-block setting allows a block to flow with other content like inline does while still allowing other block related settings (like width and text-alignment) to work.

Some plain text <span style="display: inline-block; width: 20em; text-align: center;">followed by a block span element</span> which has been changed to be an inline-block with a fixed width and centered content.

... if you removed the display: inline-block; part of the above span example's style attribute you will notice that the width and text-alignment settings no longer have an effect.

(*) Plain text is automatically converted by the web-browser into DOM Text-Nodes which are like an inline type element, this is why inline styled elements flow with Plain text content.

---

Ohh, I see. That makes it much clearer, thank you!

Answer 2

You can put something like this into your css:

.example {
  padding-left: 2em;
}

Then create an indent like this:

<div class="example">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Or if you want to combine it with the paragraph tag:

p.test {
  padding-left: 2em;
}

<p class="test">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

 

Comments

One issue with this answer is that if the Passage contains both indented (styled) and un-indented (un-styled) text then the styled text will visual appear earlier than the un-styled text due to how the passage transition effect works.

Adding the following property setting to either of @idling's CSS examples should fix this issue.

.example {
	display: inline-block;
	padding-left: 2em;
}

p.test {
	display: inline-block;
	padding-left: 2em;
}