Indenting entire sections of a page

[_Felix_R]

Hi all,

Does anyone know of a simple way to indent entire sections of a page?

The section includes headings, lists with levels, normal text etc. I have pasted a before and after example below. In the example the Headings B and C (inclusing all text within those sections) are indented.

Each heading should retain its own format aswell (e.g. h1)

Before:

Heading A

Text text text.

Heading B

Text text text.

List:

  1. item1

  2. item2

Heading C

Text text text.

Text text text.

Heading D

Text text text.

After:

Heading A

Text text text.

      Heading B

      Text text text.

      List:

        1. item1

        2. item2

      Heading C

      Text text text.

      Text text text.

Heading D

Text text text.

Thanks!

Felix

[Peter Grainge]

I believe the correct way would be to apply a div tag to indent everything up to the closing div tag. I have not been able to make that work but maybe you have a friendly developer who could help.

Meantime a borderless table with no content in the first column would provide a crude fix.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

[Stefan Gentz]

Peter is on the right path here. Which RoboHelp version are you using? If it is RoboHelp 2020, I suggest that you leverage the sematic power of (X)HTML5 and use semantic elements like <article> and <section> for this purpose.

Example:

You could use <section> to wrap smaller parts of the content (e.g., heading + content belonging to this heading) into one section, and then <article> to wrap multiple sections into one article. You can use multiple sections and articles in one topic as you can see in the example.

In the CSS, you can then style it in any way you want, including indenting. E.g., like this:

article {
  /* left margin to the "parent element body */
  margin-left: 10px;
}

article section {
  /* Left margin for the first article child "section".
     Note that this sums up as 10 + 20 = 30 px from the body box.
  */
  margin-left: 20px;
}

article section section {
  /* Left margin for the first child section of a section.
     Note that this sums up as 10 + 20 + 20 = 50 px from the body box.
  */
  margin-left: 20px;
}

article section section section {
  /* Continue like this if you need to nest sections even deeper.
  */
  margin-left: 20px;
}

However, be thoughtful about indenting sections – keep mobile devices in mind. If you indent too much, it might become a very small section in width on a mobile device. You might want to introduce media queries and for mobile devices and then give a smaller or even no indent to them.

Regarding the heading levels (h1, h2, h3, etc.): General best practice is to reflect the content structure also in heading levels. That is, I would go for something like this:

<article>
  <h1>Title of the main article</h1>
  <section>
    <h2>Title of the first sub-section</h2>
    <p>Some content …</p>
    <section>
      <h3>Title of the first sub-sub-section</h3>
      <p>Some content …</p>
    </section>
  </section>
  <section>
    <h2>Title of the second sub-section</h2>
    <p>Some content …</p>
    <section>
      <h3>Title of the first sub-sub-section</h3>
      <p>Some content …</p>
      <section>
        <h4>Title of the first sub-sub-sub-section</h4>
        <p>Some content …</p>
      </section>
    </section>
  </section>
</article>

Hope that helps.

[_Felix_R]

Thanks Stefan, the solution using article & section works well (I do have Robohelp 2020).

Is there a quick way to use this functionality using the Styles window? 

e.g. I want to move h4 together with the text underneath h4 to the right, so i would simply like to select the section (incl. heading etc.) and then click on an option in the styles panel.

In effect I would like to have a way to add the <section> at the beginning and the </section> at the end, without having to go to the code.

Code before:

  <article>
    <h2>h2</h2>
    <p>text text text</p>
    <section>
      <h3>h3</h3>
      <p>text text text</p>
      <h3>h3</h3>
      <p>text text text</p>
      <h4>h4</h4>
      <p>text text text</p>
    </section>
  </article>

Code after:

  <article>
    <h2>h2</h2>
    <p>text text text</p>
    <section>
      <h3>h3</h3>
      <p>text text text</p>
      <h3>h3</h3>
      <p>text text text</p>
      <section>
        <h4>h4</h4>
      <p>text text text</p>
        </section>
    </section>
  </article>
  <h2>h2</h2>
  <p>text text text</p>

[Stefan Gentz · Accepted solution]

Wrapping content into articles or sections in the Author view is not there yet. Currently you can only do it in the source code view. We will discuss internally if and how we could implement this in a future update. It definitively makes sense to me 🙂

[Amebr]

Could you make it work for div while you're at it? 🙂

[Peter Grainge]

@Amebr I posted that on my site yesterday in Snippets > Content Creation. 

Want to indent a section of your content or apply some specific styling.

________________________________________________________
My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

[Amebr]

Oh yeah, I know how to do it manually, I meant being able to apply a div without needing to code. 🙂

[Peter Grainge]

That's the same as Stefan's answer on sections, not there yet. 

________________________________________________________
My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

[Amebr]

Just wanted to make sure it was on the list, and not just sections and articles.