How do I add a line break after a chapter number?

[chuck_agari]

I have the following CSS to create chapter numbers in my PDF output:

Code: Select all

h1.chapter
	{
		font-size: 28pt;
		line-height: 36pt;
		margin-left: 0.5in;
		margin-top: 24pt;
		margin-bottom: 36pt;
		mc-auto-number-class: ChapAutoNum;
		mc-auto-number-format: 'CH: {chapnum} ';
		text-indent: -0.75in;
		padding-left: 0;
		padding-top: 0;
	}

and

Code: Select all

span.ChapAutoNum
	{
		color: var(--agari-mauve);
		font-size: 60pt;
		letter-spacing: -1px;
	}

What I think I'd like to to, instead of having the automatically generated chapter number on the same line that as heading content, is render the chapter number, followed by a line break (not a full paragraph, so the br tag), followed by the start of the chapter title text immediately under, with both left-aligned. I can't figure out what CSS to add.

I know I can't add an after pseudo element. That does not enter HTML code, only content. I'm guessing it's a Madcap-specific attribute and one of its enumerated values, but I don't see any that likely make sense. I've not been able to find this in my Google searches so far either. Any suggestions?

[Gene K]

I see that your chapter auto-numbering is styled differently from your actual chapter headings through your span tag. I don't know how many chapters you're dealing with, so this may not be viable, but perhaps:

1. Attach your chapter auto-numbering to a different custom paragraph style, like p.Chapter or whatever.
2. Insert that paragraph style with no text at the beginning of your chapter, and wrap it with your span tag.
3. Place your chapter heading (H1) on the following line, without the span.

This way you should still have the auto-numbering styling via your span tag, and your heading text should exist on the following line.

Alternatively, I stumbled across an older thread with a semi-similar goal. Perhaps one of the solutions there could help you: viewtopic.php?f=6&t=14403

[chuck_agari]

Thanks, but I don't really want to use separate blocks for the chapter number and title. I'd prefer to figure out how I can do this in the existing CSS selector for that block.

Also, not a fan of using a snippet for this.

Basically, the way this works now, having these selectors only in the @media print section, they are ignored by the online output.

The span tag just changes the characteristics of the characters in the chapter number, making it bigger, basically; I found that this is the span that Flare automatically wraps the chapter number in, so I can do that styling.

Hm, now that I'm thinking about it, I may be able to add the display property to the span with a value of block. Might work. Gonna give it a try.

[chuck_agari]

And it worked!

I just had to tweak the h1.chapter selector:

• Removed margin-left
  Changed text-indent to -0.25in

[Gene K]

And it worked!

I just had to tweak the h1.chapter selector:

• Removed margin-left
  Changed text-indent to -0.25in

Glad you found a solution. It took me a moment to get a clear idea of what you did, so just to confirm:

1. Added display: block to your span.ChapAutoNum, forcing everything after onto a new line.
2. Removed the extra margin and shrank the negative indent on H1 to preserve -0.25" indent (0.5 - 0.75 → 0 - 0.25).

Correct?

[chuck_agari]

100%

I did have to try a couple of values to get it lined up just right.

[Gene K]

Great, thanks. Tucking that little trick away for possible later use.