Ability to add line breaks to rich text fields

Thought it might be worth reviving this topic now that the CMS is up and running.

I can give an example from a site I’m working on:

The site is going to feature articles and interviews, which means long passages of text with multiple paragraphs. Splitting the text up into multiple paragraph fields is cumbersome, so they need to be in a rich text field, which is also necessary due to the option for inline styling. In a rich text element however, the space equivalent to a (br) is inserted between each paragraph.

From a typographic perspective, the text would read better with a full line space between paragraphs. This will vary according to content however, so what’s needed is some custom control over the spacing between paragraphs.

I thought @thesergie might appreciate hearing this feedback. The new CMS is an incredible tool, features such as this could perhaps give it a final polish.?.

Hi @Maxwell! Thanks for the feedback. I’m a little confused by what you’re referring to. Currently the Rich Text creates separate paragraph elements. This makes it easier to style. Are you saying you would rather have <br>'s separating the paragraph blocks?

Hi @thesergie, I’ve had this problem too. I think the issue is because it’s not obvious how to set a paragraph class to the text within a rich text field. If you set a “p” sub-class on a rich text field, it doesn’t affect the text. And looking at the parent styles of the rich text field, there’s nothing that works either.

If you want to space the text inside a rich text field it seems you need to add margins to the global “All Paragraphs” class by creating an isolated paragraph field, adding a bottom margin, then deleting it again. I’m sure there’s a better way of doing this without affecting the entire site but I haven’t found it yet?

Hope this helps someone out!

Also, is there a way of using a bulleted list inside a rich text field? All I can do at present is define each item as a paragraph.

Thanks guys

might be a little disconnect here. In design applications, ie: photoshop, illustrator, indesign; there is a way to increase/decrease spacing in between paragraph breaks. This is created using a hard return (pressing enter while typing to generate a new paragraph). this is not to be confused with paragraph tags that indicate a divisions of copy in css/html. Im also wondering if this is possible, although it does not seem to be the case.

yes, that’s exactly it I think.

Indesign / Illustrator let you set the space before or afer paragraphs within the same text block. This makes the empty line between paragraphs unnecessary, and it makes design more precise. It is similar to margin, but it is specific to typographic features in those programs. The same feature can be found in Pages and Word. Wonder if it can translate equally well to the web / webflow?

Put together this quicik sample that I hope illustrates it. Note that in all three examples the space between paragraphs is determined solely by the space before paragraph setting, 4 points in the selected block:

I would very much like it if I was able to use the </p> OR the <br> break in any paragraph or header!

If you add a class to the rich text element you can specify how your paragraphs styles behave in just that class.

Also, is there a way of using a bulleted list inside a rich text field? All I can do at present is define each item as a paragraph.

Yes we just released this for Rich text elements.

Oh I forgot to mention that you can do SHIFT+Enter to add a <br> instead of it breaking into a new <p>. But if you want the spacing for the <p> to be the same height as adding a break then you would have to change the margin-bottom for paragraph elements inside the rich text. I cant see a different way of doing it. Maybe someone else has ideas.

Also it’s important to note that editing text inside of a Paragraph element is different from editing text inside of a Rich Text element. When editing text inside of a paragraph, it’s all inside of a paragraph. When creating text in a Rich text element you’re creating separate elements (separate paragraphs, headings, quotes, etc). Does that clear things up?

Hi Sergie,

It is clear to me but it would be nice if ALSO in Rich Text Elements it would be possible to type a soft return instead of a hard return, as they call it in print design.
Sometimes you want to start a sentence on a new line, but without the margin that the paragraph has. Just like this sentence :smile:

If I were to remove the paragraph margin, as you suggest, I would have to create margins on all other headings within the RTE to keep margin between a paragraph and following text. As you know it is not possible to type 2 consecutive returns (ENTERs) because they act as only 1.

So maybe this is more of a wish list thing: please ad the possibility of a soft return in RTE’s!


2 posts were split to a new topic: How to style rich text elements

A post was merged into an existing topic: How to style rich text elements

yea @thesergie this is important to add as a feature to be able to change spacing of sections within the p where you have a lot of text with separate chunks. Hitting enter is no bueno you can’t tell its a section break and hitting enter twice is worse the space it too big. The effect of what we want would look something like this, but smarter hopefully idk if this is the correct css, I’ll leave that to devs…

br {
line-height: 150%;