Indent from second line in case a numbered heading wraps

[tonra]

Hello,

I use a counter for headings. If a heading wraps, the second line begins right below the numbering.
Is there any opportunity/best practice to automatically add an indent so that the text of the heading aligns with the text of the first line (see attached image)?

I've already tried using a positive margin-left in combination with a negative text-indent as well as a padding-left in combination with a ::before pseudo-element with the following CSS properties:

Code: Select all

{
content: counter(chapter) "." counter(section1) "";
position: absolute !important;
left: 0px !important;
}

Both approaches worked for the merged HTML file but not for the PDF output.
I assume PDF Chemistry neglects the corresponding CSS properties.

Thanks a lot in advance.

Best regards,
Anton

long_headline.png

[Dan]

There are some limitations in the Chemistry we are trying to solve.
Until then, you could try the following CSS snippet:

Code: Select all

*[class ~= "map/map"][numbering^='deep'] *[class ~= "map/topicref"] > *[class ~= "map/topicmeta"]:before {
    display:inline-block;
    background-color: pink;
    vertical-align: top;    
}  
*[class ~= "map/map"][numbering^='deep'] *[class ~= "map/topicmeta"] > *[class ~= "topic/navtitle"] {
    display:inline-block !important;
	background-color: silver;
}

*[class ~= "map/map"][numbering^='deep'] *[class ~= "map/topicmeta"]{
	border: 2pt solid blue;
}



*[class ~= "map/map"][numbering^='deep'] *[class ~= "map/topicref"][is-part] > *[class ~= "map/topicmeta"]:before {
    width:3%;     
}
*[class ~= "map/map"][numbering^='deep'] *[class ~= "map/topicref"][is-chapter]:not([is-part]) > *[class ~= "map/topicmeta"]:before {
    width:3%;     
}
*[class ~= "map/map"][numbering^='deep'] *[class ~= "map/topicref"][is-chapter]:not([is-part]) > *[class ~= "map/topicref"] > *[class ~= "map/topicmeta"]:before {
    width:7%;    
}
*[class ~= "map/map"][numbering^='deep'] *[class ~= "map/topicref"][is-chapter]:not([is-part]) > *[class ~= "map/topicref"] > *[class ~= "map/topicref"] > *[class ~= "map/topicmeta"]:before {
    width:8%;
}
*[class ~= "map/map"][numbering^='deep'] *[class ~= "map/topicref"][is-chapter]:not([is-part]) > *[class ~= "map/topicref"] > *[class ~= "map/topicref"] > *[class ~= "map/topicref"] > *[class ~= "map/topicmeta"]:before {
    width:9%;
}


*[class ~= "map/map"][numbering^='deep'] *[class ~= "map/topicref"][is-part] > *[class ~= "map/topicmeta"] > *[class ~= "topic/navtitle"]{
    width:95%;     
}
*[class ~= "map/map"][numbering^='deep'] *[class ~= "map/topicref"][is-chapter]:not([is-part]) > *[class ~= "map/topicmeta"] > *[class ~= "topic/navtitle"]{
    width:95%;     
}
*[class ~= "map/map"][numbering^='deep'] *[class ~= "map/topicref"][is-chapter]:not([is-part]) > *[class ~= "map/topicref"] > *[class ~= "map/topicmeta"] > *[class ~= "topic/navtitle"]{
    width:92%;     
}
*[class ~= "map/map"][numbering^='deep'] *[class ~= "map/topicref"][is-chapter]:not([is-part]) > *[class ~= "map/topicref"] > *[class ~= "map/topicref"] > *[class ~= "map/topicmeta"] > *[class ~= "topic/navtitle"]{
    width:90%;     
}
*[class ~= "map/map"][numbering^='deep'] *[class ~= "map/topicref"][is-chapter]:not([is-part]) > *[class ~= "map/topicref"] > *[class ~= "map/topicref"] > *[class ~= "map/topicref"] > *[class ~= "map/topicmeta"] > *[class ~= "topic/navtitle"] {
    width:90%;     
}

Adjust the widths so that the label is properly placed before the titles. You may need to add more selectors if you have topics nested deeper than 4 levels. This snippet works when setting the "args.css.param.numbering" transformation parameter to "deep".

Many regards,
Dan

[tonra]

Hello Dan,

Thank you very much for your reply!

Unfortunately, your approach seems to work for the TOC only as the HTML structure of the content headings differs:
While the heading itself is nested in a div in the TOC, it's not nested in another element in the content.
TOC:

Code: Select all

<div class="- map/topicmeta topicmeta">
<div class="- topic/navtitle navtitle">This is a looooong heading</div>
</div>

Content:

Code: Select all

<h2 class="- topic/title title topictitle2">This is a looooong heading</h2>

In the second case I cannot modify the width of the text "This is a looooong heading". To do so, it would have to be an element, e.g. a <span>.
Do you have any other ideas? An XSLT modification is (as nearly always) a possibility, I think, but I would prefer an alternative.

Kind regards,
Anton

[Dan]

Yes. the structure is different for the titles in the main content. You can use a CSS like this one:

Code: Select all

*[class ~= "topic/topic"] > *[class ~= "topic/title"]:before{
	color:red;
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:50px;
	background-color:silver;
}

*[class ~= "topic/topic"] > *[class ~= "topic/title"]{
	position:relative;
	padding-left:50px;	
	page-break-inside:avoid;
}

It makes use of position absolute. However this approach is not recommended for the TOC, since it may leave the absolute positioned block on the first page when encountering a page break inside the navigation title. For main content it might work ok.

Another approach is to create an XSLT extension, process the heading elements adding more span elements so you can set inline-block display on them. You can read more about XSLT extensions: https://www.oxygenxml.com/doc/versions/ ... sions.html

This can be the content of the XSLT merged2html extension:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    exclude-result-prefixes="xs"
    version="2.0">
  
    <xsl:template match="*[contains(@class, ' topic/topic ')]/*[contains(@class, ' topic/title ')]">
    
      <!-- Place the default processing result in a variable -->    
      <xsl:variable name="default">
        <xsl:next-match/>
      </xsl:variable>

      <!-- Create a heading element from the default processing result fragment -->
      <xsl:element name="{$default/*/local-name()}">
        <xsl:copy-of select="$default/*/@*"/>
        <!-- Wrap all in a span -->
        <span class="title-wrapper">
          <!-- Copy all content. -->
          <xsl:copy-of select="$default/*/node()"/>
        </span>
      </xsl:element>
    </xsl:template> 
    
</xsl:stylesheet>

Many regards,
Dan

[julien_lacour]

This behavior will be controlled (starting with version 22) with the new DITA Map transformation parameter called "args.css.param.title-layout" which dynamically changes how the titles are displayed.

• normal (inline)
  The title is displayed in an element and if its content does not fit on one line it will wrap under the number

• table (inside a table row and two cells)
  The first cell contains the chapter or section number, the second cell contains the text of the title. If the title is long and wraps, it will not wrap under the number.