How To Get H1 Chapter Titles To Show Like This?

[EuroScribe]

EXAMPLE: https://imgur.com/uVySKKY

Hi everyone, I am using Jutoh Plus to create my book and I would like my Chapter Headings to look like the one above. Jutoh Plus allows near complete control over HTML and CSS so I am wondering if I can add a bit of CSS code to H1 section to get them to look like this?

Can anyone help please?

It will be much appreciated.

[RbnJrg]

Originally Posted by EuroScribe

EXAMPLE: https://imgur.com/uVySKKY

Hi everyone, I am using Jutoh Plus to create my book and I would like my Chapter Headings to look like the one above. Jutoh Plus allows near complete control over HTML and CSS so I am wondering if I can add a bit of CSS code to H1 section to get them to look like this?

Can anyone help please?

It will be much appreciated.

In your .xhtml file write the following:

<h1 class="MyHeading">CHAPTER 1</h1>

and in your .css file write:

.MyHeading {
      width: 50%; /* or the width you wish */
      margin-left: 25%; /* this must be according to the previous width */
      margin-right: 25%;
      margin-bottom: 2em; /* or whatever you like */
      color: white;
      background: lightblue;
      font-family: sans-serif;
      font-size: 1.1em;
      text-align: center;
}

That code should work everywhere.

Regards
Ruben

[EuroScribe]

Hi Ruben,

It worked brilliantly. I did change the colour and font size a bit but now my epub is really looking perfect.

Many, many thanks.

[hobnail]

I suspect that the width, margin-left, and margin-right are not what they want; typically what's wanted is for the green box to automatically size itself to the size of the text (with a bit of space/padding/margin on the sides).

I vaguely recall banging my head against this a long time ago and never found a solution.

[jackie_w]

Originally Posted by hobnail

I vaguely recall banging my head against this a long time ago and never found a solution.

If you want the coloured box to match content width you can add a span with padding/colours. Something like this:

<h1 class="heading"><span class="decor">CHAPTER 1</span></h1>
<h1 class="heading"><span class="decor">Chapter One Hundred and Fifty-Two</span></h1>

.heading {
    font-family: sans-serif;
    font-size: 1.1em;
    margin: 3em 0;
    text-align: center;
    text-indent:0;}

.decor {
    background: teal;
    color: white;
    padding: 0.5em 1em;
}

[Hitch]

Originally Posted by hobnail

I suspect that the width, margin-left, and margin-right are not what they want; typically what's wanted is for the green box to automatically size itself to the size of the text (with a bit of space/padding/margin on the sides).

I vaguely recall banging my head against this a long time ago and never found a solution.

I could swear that you're right and that there's some glitch with that, even with jackie_w's modifications, but...man, it's been too many years since I had my own hands in that sort of code, day-to-day. Something is nagging at my brain.

Hitch

[theducks]

I never figured out how to make the box automatically fit the text.

You make a box (with or without Borders): Space the contents away from the edge with padding. Colors to taste

AFAIK Outside Margins are the only way to contain a box size

[RbnJrg]

Originally Posted by hobnail

I suspect that the width, margin-left, and margin-right are not what they want; typically what's wanted is for the green box to automatically size itself to the size of the text (with a bit of space/padding/margin on the sides).

I vaguely recall banging my head against this a long time ago and never found a solution.

I posted my solution in order that it works everywhere. What you want, it can be achieved with the following code:

1. In your .xhtml file:

<div class="heading">
  <h1 class="block">CHAPTER 1</h1>
</div>

2. In your .css file:

.heading {
     text-align: center;
}

h1 {
    display: inline;
    font-size: 1.1em;
    font-family: sans-serif;
    margin: 1em auto;
}

.block {
    display: inline-block;
    background: teal;
    color: white;
    padding: 0.25em 1em;
}

The trick here is to display the <h1> as inline text, so the property "text-align: center" (for the container div) can work. And to get the colored box to automatically size itself to the size of the text (with a bit of space/padding/margin on the sides) is necessary to employ the property "display: inline-block". The issue here is that you need to use margin-left and margin-right as "auto" and that property is not supported by ADE (for epub 2) So, if you want a solution for any reader, you need to use my first approximation.



I attach the respective epub so you can check everything.

[RbnJrg]

Originally Posted by theducks

AFAIK Outside Margins are the only way to contain a box size

If you want the solution to work everywhere (that is, also in ADE), that's correct. However, if you can use the properties "margin-left: auto" and "margin-right: auto" (not supported by ADE in epub2), then by using properties "display: inline" and "display: inline-block", is possible to contain a box size without employing outside margins. See my previous post.

[JSWolf]

[QUOTE=RbnJrg;4045768]I posted my solution in order that it works everywhere. What you want, it can be achieved with the following code:

1. In your .xhtml file:

<div class="heading">
  <h1 class="block">CHAPTER 1</h1>
</div>

You don't need the excess <div>. Excess code is not a good idea. The style for the h1 class should be chapter.

<h1 class="chapter">CHAPTER 1</h1>

]2. In your .css file:

.heading {
     text-align: center;
}

h1 {
    display: inline;
    font-size: 1.1em;
    font-family: sans-serif;
    margin: 1em auto;
}

.block {
    display: inline-block;
    background: teal;
    color: white;
    padding: 0.25em 1em;
}

The CSS code should be more like...

.chapter {
  font-size: large;
  font-weight: bold;
  font-family: sans-serif;
  margin-top: 1em;
  margin-bottom: 1em;
}

I've managed to cut down a significant portion of code and it does the very same thing. The idea is to keep it simple. The extra code is not simple.

[RbnJrg]

Originally Posted by JSWolf

I've managed to cut down a significant portion of code and it does the very same thing. The idea is to keep it simple. The extra code is not simple.

Well, I'm afraid of your code doesn't work. You can't get a center heading with a background colored and ajusted to the heading with your code. In order that <h1> is centered, with a background ajusted to the text, is by means of the property "display: inline". And ¿how do you center that <h1> tag? Please, explain us how to center an inline block.

You wrote what you wrote because you didn't understand my code. Moreover, you didn't read what the OP asked.

[theducks]

Originally Posted by RbnJrg

If you want the solution to work everywhere (that is, also in ADE), that's correct. However, if you can use the properties "margin-left: auto" and "margin-right: auto" (not supported by ADE in epub2), then by using properties "display: inline" and "display: inline-block", is possible to contain a box size without employing outside margins. See my previous post.

Thanks for confirming (that I was not totally out of it ) . I only use EPUB2 (some habit, some older devices.)

[Hitch]

Originally Posted by theducks

Thanks for confirming (that I was not totally out of it ) . I only use EPUB2 (some habit, some older devices.)

Ditto.

Hitch

[JSWolf]

Originally Posted by EuroScribe

EXAMPLE: https://imgur.com/uVySKKY

Hi everyone, I am using Jutoh Plus to create my book and I would like my Chapter Headings to look like the one above. Jutoh Plus allows near complete control over HTML and CSS so I am wondering if I can add a bit of CSS code to H1 section to get them to look like this?

Can anyone help please?

It will be much appreciated.

Are you trying to do this for eBooks for sale?

[EuroScribe]

Originally Posted by JSWolf

Are you trying to do this for eBooks for sale?

Yes, is there any potential problem with it?