# Indent paragraph text?

**URL:** https://meta.discourse.org/t/indent-paragraph-text/211116
**Category:** Support
**Created:** [December 4, 2021, 7:44pm UTC](https://meta.discourse.org/t/indent-paragraph-text/211116 "2021-12-04T19:44:56Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![orangeandblack5](https://avatars.discourse-cdn.com/v4/letter/o/edb3f5/32.png) [@orangeandblack5](https://meta.discourse.org/u/orangeandblack5)
#### Post date: [December 4, 2021, 7:44pm UTC](https://meta.discourse.org/t/indent-paragraph-text/211116/1 "2021-12-04T19:44:56Z")

</div>

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

```plaintext
<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?

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [December 4, 2021, 8:10pm UTC](https://meta.discourse.org/t/indent-paragraph-text/211116/2 "2021-12-04T20:10:26Z")

</div>

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

---

<div class="post-metadata">

### Author: ![orangeandblack5](https://avatars.discourse-cdn.com/v4/letter/o/edb3f5/32.png) [@orangeandblack5](https://meta.discourse.org/u/orangeandblack5)
#### Post date: [December 4, 2021, 8:11pm UTC](https://meta.discourse.org/t/indent-paragraph-text/211116/3 "2021-12-04T20:11:16Z")

</div>

That only does the first line of a paragraph though

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [December 4, 2021, 8:14pm UTC](https://meta.discourse.org/t/indent-paragraph-text/211116/4 "2021-12-04T20:14:30Z")

</div>

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

> [@orangeandblack5](#):
>
> Pretty sure four spaces is a code block in Markdown

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

---

<div class="post-metadata">

### Author: ![orangeandblack5](https://avatars.discourse-cdn.com/v4/letter/o/edb3f5/32.png) [@orangeandblack5](https://meta.discourse.org/u/orangeandblack5)
#### Post date: [December 4, 2021, 8:15pm UTC](https://meta.discourse.org/t/indent-paragraph-text/211116/5 "2021-12-04T20:15:00Z")

</div>

Pretty sure four spaces is a code block in Markdown

---

<div class="post-metadata">

### Author: ![seanblue](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@seanblue](https://meta.discourse.org/u/seanblue)
#### Post date: [December 4, 2021, 8:15pm UTC](https://meta.discourse.org/t/indent-paragraph-text/211116/6 "2021-12-04T20:15:56Z")

</div>

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

---

<div class="post-metadata">

### Author: ![orangeandblack5](https://avatars.discourse-cdn.com/v4/letter/o/edb3f5/32.png) [@orangeandblack5](https://meta.discourse.org/u/orangeandblack5)
#### Post date: [December 4, 2021, 8:16pm UTC](https://meta.discourse.org/t/indent-paragraph-text/211116/7 "2021-12-04T20:16:34Z")

</div>

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

---

<div class="post-metadata">

### Author: ![seanblue](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@seanblue](https://meta.discourse.org/u/seanblue)
#### Post date: [December 4, 2021, 8:24pm UTC](https://meta.discourse.org/t/indent-paragraph-text/211116/8 "2021-12-04T20:24:23Z")

</div>

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.

> <https://github.com/discourse/discourse/blob/148ee1d1627cda7d65a028bf43f548e1b3efed6a/app/assets/javascripts/pretty-text/addon/allow-lister.js>

> <https://github.com/discourse/discourse/blob/1472e47aae5bfdfb6fd9abfe89beb186c751f514/app/assets/javascripts/discourse/app/lib/to-markdown.js>

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [December 4, 2021, 8:56pm UTC](https://meta.discourse.org/t/indent-paragraph-text/211116/9 "2021-12-04T20:56:11Z")

</div>

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

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

```

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

```plaintext
[wrap="indent"]
Your paragraph
[/wrap]

```

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [December 5, 2021, 11:58am UTC](https://meta.discourse.org/t/indent-paragraph-text/211116/10 "2021-12-05T11:58:58Z")

</div>

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

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/f/0fce22cef3175c2e41cba29dac0c9856b79161a1.png)

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

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

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [December 5, 2021, 12:30pm UTC](https://meta.discourse.org/t/indent-paragraph-text/211116/11 "2021-12-05T12:30:47Z")

</div>

> [@Canapin](#):
>
> Is the `[wrap]` thing different in any way? Can we use it for inline styles?  
> Are there other ways to customize post styles?

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.

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [December 5, 2021, 12:33pm UTC](https://meta.discourse.org/t/indent-paragraph-text/211116/12 "2021-12-05T12:33:40Z")

</div>

> [@Steven](#):
>
> add an icon in the toolbar

One simple question… How do you do that?

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [December 5, 2021, 12:52pm UTC](https://meta.discourse.org/t/indent-paragraph-text/211116/13 "2021-12-05T12:52:26Z")

</div>

You can use my theme-component as an example:

[https://github.com/MonDiscourse/md-composer-extras](https://github.com/MonDiscourse/md-composer-extras)

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

 ![image](https://global.discourse-cdn.com/meta/original/3X/2/1/21f94409ea2f7bfd5fa1e9c646cebcc5d9d141bf.png)

Toolbar:

```plaintext
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

```plaintext
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](https://github.com/MonDiscourse/discourse-formatting-toolbar)
