Indent paragraph text?

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

1 Like
3

That only does the first line of a paragraph though

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

Pretty sure four spaces is a code block in Markdown

1 Like
6

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

1 Like
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.

1 Like
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]
9 Likes
10

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

image

(you can see it live here: 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?

1 Like
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:

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

image

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

5 Likes