Creating paragraphs in a tex block (t

Strictly speaking you should not have line returns in a paragraph, a line return would indicate that you need a new paragraph.

A paragraph is a subsection of text marked by the beginning of a new line, indentation or increased interlinear space. By adding carriage returns into a <p></p> tag, you are essentially making one semantic paragraph look like multiple paragraphs. This is quick and easy but is not correct for one simple reason.

The vertical rhythm of your page (i.e. the spacing between paragraphs, headers and other elements) is dependent on the setting of top and bottom margins around HTML elements such as <p>'s. By adding a line break (a <br> in HTML) you have introduced an element that is outside of the scope of these spacings. There is no reliable way to accurately space a <br> tag in order to preserve vertical rhythm.

So basically if you need a new paragraph (in the true definition sense) then add a new <p> tag - i.e. in your case with Foundation, add a new paragraph stack.

Odd paragraph formatting can also often come from simply adding HTML block level elements within a <p>. This is not allowed in HTML and browsers will break it apart.

So putting a list (<ul> for example) within a paragraph is not allowed. While you can do this within RW, the browser will intercept it and break it apart to form valid HTML again. It will give you the first part of the text within a closed <p></p> tag pair, then a closed <ul></ul> pair followed by another closed <p></p> pair.

This means of course that your rendered HTML is different than what you think you added. Foundation paragraphs (& my BWD paragraph stacks) try to help with this by applying your chosen formatting to the outer stacks wrapper <div> that surrounds all of the content. There are however some CSS properties that this will not work for.

So, in summary, to do things reliably and correctly (outside of styled text of course) think of what you want to achieve in normal (non web page) terms. If you want a paragraph, followed by a list, followed by a paragraph then do just that. Add a paragraph stack, followed by a list stack, followed by another paragraph.

I realise that this is less convenient than just banging everything into one paragraph stack but if you want proper typography spacing and formatting then this is the harsh truth. As with all things, precision and perfection are not always synonymous with convenience and you reap what you sow.

5 Likes

Interesting! I keep learning new stuff on this forum :slightly_smiling:

@jabostick You may also want to consider the Markdown stack (or possibly the Markdown page option). Allows you to write easily and sensibly without all the Styled Text funk. Auto-converts to HTML. It’s very useful to know some basics of markdown, but they are super easy to learn. I write all my websites in markdown now (supplemented with a bit of HTML when needed).

2 Likes

If you want to have more space between your paragraphs, add some CSS margin (bottom of the page):
http://www.w3schools.com/tags/tag_p.asp

Hi @tav - thanks a bunch you hit it right on the money, tried a lot of things but did not catch onto the idea it says paragraph not paragraphs. This will help me a lot - thanks so much!!! appreciate the bit on vertical rhythm, will avoid me taking shortcuts that turn out to be long cuts. I will need to read up on div,

thanks again.

1 Like

Hi @Mathew, I was wondering what markdown was about, thanks this adds one more piece of the puzzle :slight_smile:

@instacks - yup that makes a lot of sense now that I will be using many paragraph stacks - thanks :slight_smile:

@e1d1 The Paragraph Pro stack has a control for vertical rhythm if you need to make fine rem adjustments. It will add bottom margins to all instances of the stack on the page with one setting. Of course it means that all paragraphs have to be Paragraph Pro’s.

So, for every paragraph a paragraph stack should be used?

Ideally, yes. That way you will preserve the vertical rhythm of the page correctly.

I’m following this with some interest. Brand new here, and trying to recreate some sample pages of my website using the trial which is basically lists, each line a link. For the home page, I first pasted, then typed all my list, and it looked like each had a separate line in the box, but when i previewed it, it all ran together as one paragraph. I tried doing a “hard” return after each, to no avail.

I was a typographer/layout artist for many years and type matters to me, how it looks. I have to be able to get it exactly right. This is also true of the heading on the master page. Can it be changed to not be all caps? What about the line underneath it? I want two centered lines under the name of the site, but it will not recognize a hard return at all. I ran into this problem with another website builder, and it was unsurmountable. I hope this is not going to be the case here as well. Any ideas about how to get line endings in a list of links? Each line will be coded with two links, one for the main text, and another for a PDF right after it. After that should be end of the line. Each of my almost 30 web pages has upwards of 30 lines with links on each page, so this is a big deal. Thanks for any advice. I hope it will not be complicated to do something as easy as a “hard return” at the end of a line!

Hard to answer this without knowing what type of page you are using and what theme.
A “hard return”, a line break and a paragraph are all different things. It’s possible to insert <br> tags for a line break and <p> tags for paragraph breaks. But there may be other ways depending on your page type and theme.

On top of that almost anything can be styled using CSS as well.

More info and a URL to your page is needed to give specific help.

2 Likes

Oh, I haven’t gotten that far yet, just beginning here. I could possibly insert the break tags after each line, that wouldn’t be too hard if I can get into the html (never had any experience with that!). I used the theme from the demo, the Offroad one, since you can change the colors, and hopefully I can use my own background image. I would really like the Slogan (which appears under the main title) to be able to be divided in half so it is balanced. It is long, and throws the last word all by itself down underneath (bad typography!). Can I insert a break code into the Slogan?

If anyone would like to take a look, I manage a very simple, easy to load website (and that’s how the owner wants it to stay, for people who have older computer systems), at www.eiwellspring.org. It’s pages of lists of links to documents stored on the www as html documents and PDFs. I’m hoping all my links will transfer over if I copy/paste each page’s text as a block.

You can insert HTML right in a styled text page if that’s what you are using.

You should also be able to insert the <br> in the slogan, it should work if the theme can deal with two lines.

1 Like