Indent paragraph text?

Product Support

AI-generated summary

A user, orangeandblack5, is trying to indent a paragraph of text using HTML and CSS, but the style attribute is not being whitelisted by Discourse. seanblue suggests that the style attribute is blocked for security reasons.

Several users offer alternative solutions, including using &emsp; to indent the first line of a paragraph, wrapping the text in <ul> tags, or creating a custom bbcode using the wrap attribute.

Steven provides a solution by adding a custom CSS rule to the theme and using the [wrap="indent"] bbcode to indent the paragraph. Canapin asks about the differences between this solution and using spans with a data-theme attribute.

The discussion also touches on customizing post styles and adding icons to the toolbar. Steven shares a theme-component that allows adding custom icons to the toolbar or gear menu.

1

I feel like and idiot but I can’t for the life of me figure out why this isn’t working:

<div style="margin-left: 20px">
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>

Gives the following:

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.

Which is notably not indented!

Surely there must be some way to support text indentation, even if it’s non-obvious for whatever reason, right?

2

   I use a couple of &emsp; if I need to ident anything, but that only works for the first line.

3

That only does the first line of a paragraph though

4

I feel like it’s on the tip of my tongue. :slightly_smiling_face:

Edit: I had got confused with adding four spaces to a new paragraph in a list item to keep that aligned.

I did discover that you can wrap a block of text in <ul> </ul> and that indents it. It’s a bit hacky though, but may be useful if you don’t have access to the admin settings to create the wrap solution from further down.

Eg.

    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.
5

Pretty sure four spaces is a code block in Markdown

6

Discourse only whitelists certain HTML tags and attributes. I’d guess they completely block the style attribute since it’s basically all-powerful.

7

Is there any way to allow more tags/attributes in our site settings?

8

I don’t see anything in site settings, but maybe you could with a plugin. I found two files mentioning HTML tags that might be useful to look at. Personally I think it would be dangerous to whitelist the style attribute though.

9

I believe div style is not whitelisted, you would need a plugin or component. But you can create a wrap bbcode directly in your admin forum. Add these lines in Customize > your theme or component > CSS Common

[data-wrap="indent"] {
    margin-left: 20px;
}

Then in your post, use this for the text you want:

[wrap="indent"]
Your paragraph
[/wrap]
10

I didn’t know you can do that. I used spans with a data-theme attribute on my forum:

image
image372×172 4.02 KB

(you can see it live here: 📜 [Wiki] Schlumpf hub serial numbers reference - Unicycles and Equipment - Unicyclist.com)

Is the [wrap] thing different in any way? Can we use it for inline styles?
Are there other ways to customize post styles?

11

Since we use the div element, we can customize a bit much, but for inline styles, your option is the best imo.

I’m not sure if there’re a lot more options out of the bat. When I use something often, I go with a plugin or component to create a div class or bbcode and add an icon in the toolbar.

12

One simple question… How do you do that?

13

You can use my theme-component as an example:

https://github.com/MonDiscourse/md-composer-extras

You have two options, add an icon to the toolbar or on the gear menu

image
image485×241 3.13 KB

Toolbar:

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "align_justify_button",
        group: "extras",
        icon: "align-justify",
        perform: e => e.applySurround('[wrap="justify"]\n', '\n[/wrap]', 'align_justify_text')
    });
});

Gear menu

api.addToolbarPopupMenuOptionsCallback(() => {
  return {
      action: "floatleft",
      icon: "indent",
      label: "float_left_button"
  };
});

You can have some extra options with a plugin, but the component should be enough : GitHub - MonDiscourse/discourse-formatting-toolbar: Add formatting options on your post (center, align to right, justify a text, etc.) · GitHub