Line spacing

bookfetishist · Member · Jun 27, 2016 at 12:47 pm
Copy link

Add topic to favorites
Hi,

I’m trying to post a poem on my blog. But the line spacing is either to wide or to narrow. I would like the line spacing to become maybe 60% of what you get when making a line break with ENTER. I’m not fluent in English but I hope someone gets it. I have not used CCS (!) before. Thank you.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jun 28, 2016 at 6:55 am
Copy link
Hi there, we have a support document on Advanced HTML formatting which should help you with writing poetry.

One thing you will likely need to know about is the standard line break vs. the paragraph break. To get a line break, but not the space below it, hold shift and click return/enter. If you wish the wider paragraph break, then just press enter as usual.
sjwsentinel · Member · Jun 28, 2016 at 3:06 pm
Copy link
This is an interesting question. Some line formations in verse can look pretty complicated — for example, when some lines are indented.

I’ve thought that the “white-space” property would help with this. If that’s right, how do I add this to css and use it in setting poetry? (Previously, I’ve used
```
, but this looks rather awkward in html pages. 

E.g. https://goo.gl/jADBSL (using transparent .png)
```
bookfetishist · Member · Jun 28, 2016 at 4:20 pm
Copy link
Hi!

And thank you for your answers. My problem is that I would like something in between of a standard line break and the paragraph break. Is that even possible without using CSS, which I don’t know?
sjwsentinel · Member · Jun 28, 2016 at 11:24 pm
Copy link
The Happiness Engineer will likely have a different answer.

… However, I think the answer to your question is in modifying the CSS of your blog. The prose sections on your blog look very good. It’s difficult to know how you are going to do change “line-height” for poetry without changing line-height for prose. Some things to try:

1/ Use blockquote for poetry and only modify the blockquote css, by adding …
```
blockquote {
	line-height: 100%;
}
```
… to the CSS.

2/ In the HTML editing page, enclose the entire poem text with the
```
<pre>This is a sample
                    poem</pre>
```
tags. This will make the text appear exactly as you type it.
thesacredpath · Member · Jun 28, 2016 at 11:46 pm
Copy link
I can help with the CSS, but there is a bit of code you will have to use in the post/page editor, but it isn’t complex.

Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS, which will increase the line-height from 1.7 to 1.9 for anything enclosed in the div with the class of “poem”.
```
.poem {
line-height: 1.9
}
```
In your post or page, you would enclose your poem in a div with the class of “poem” as shown below. I would actually suggest typing your poem into the Text tab. In there, if you press return once, it produces the line break. Press return twice and it produces a paragraph break. It’s also easier to make sure you are between the opening and closing div tags.
```
<div class="poem">
Put your poem here
</div>
```
I would suggest creating a draft post or page to try this out and when we get things the way you want it, then you can either publish it, or copy out the content from within the Text tab and paste it into the Text tab on the page or post you wish it to be on.
sjwsentinel · Member · Jun 28, 2016 at 11:55 pm
Copy link
Thanks. I’ll try that, too.
thesacredpath · Member · Jun 29, 2016 at 2:49 am
Copy link
You are welcome.

No items found.