How to indent text via API using HTML to create a post?

Integrations & API
1

Hello,
I am using the API to CREATE a Post on my Ghost site.
I am adding the post content via HTML and it’s working well.
Only one thing missing: how can I indent text? What HTML tag should I use? I tried using a div with margin-left, as well as using non-breaking spaces. Neither of those worked.
Any help is appreciated!

2

Hey

Welcome to the forum :smile:

This is a general HTML/CSS question than a Ghost API specific one, if I’m understanding it correctly.

  1. Think about why the text is indented, and apply the semantically correct HTML element (blockqoute or aside maybe, div or p if you need something more generic).
  2. Your Ghost theme may have some styling available already that achieves what you need, otherwise add some styling to the theme or via code injection.

If you want to use a div or p, apply a classname and use that as CSS selector; you might want to add a class name for the more richly semantic tags too, in case you want to apply a specific style here.

If you want to tie this up all to the cards we have in the editor, which should be styled in your theme, you could replicate the call out card:

<div class="kg-card kg-callout-card kg-callout-card-blue">
<div class="kg-callout-emoji">💡</div>
<div class="kg-callout-text">A callout card</div>
</div>

You can replace blue for the other preset colours.

Alternatively, there are the two block quote styles:

<blockquote>blockquote 1</blockquote>
<blockquote class="kg-blockquote-alt">blockquote 2</blockquote>
3

One of my colleagues just pinged me a note on this which might be an important clarification:

When using the API to create content via HTML (?source=html) anything like <div> or class names will be stripped out as the HTML gets converted to Lexical and our editor doesn’t support classes. To work around that it’s necessary to insert HTML cards, e.g.

<!--kg-card-begin: html-->
<p style="margin-left: 50px" class="indented-paragraph"> My indented content </p>
<!--kg-card-end: html-->
2 Likes
4

Thanks a lot for the explanations Jon!
I have found that none of those methods worked to properly indent content as I wish - I will keep playing around with the options.

What I wish the indentation looks like
What I wish the indentation looks like593×147 4.92 KB

5

What the inserted content via API currently looks like (bullet points should be indented under the ordered list)

What the inserted content via API currently looks like (bullet points should be indented under the ordered list)
What the inserted content via API currently looks like (bullet points should be indented under the ordered list)1007×325 19.8 KB

6

See Jon’s updated post - you can import into an html card which will preserve your formatting:

1 Like