Topics

Fixing reference of stylesheet in html5 result #CSS #HTML5

quickvanrijt
 

I have an issue with the css stylesheet references produced by html5 transform (in dita-ot-2.5.4 as well dita-ot-3.4).

Next is my essential folder structure:

+RELNOTES\dita\
      relnotes.ditamap
      COMPONENT\relnotes.dita

+WORKBENCH\
      run.bat
      html.properties
      resources\
          custom.css
     out\

run.bat:
     dita-ot-2.5.4\bin\dita.bat --format=html5 --input=..\RELNOTES\dita\relnotes.ditamap --output=out\html5 --propertyfile=html.properties

html.properties:
    args.csspath=css
    args.css=custom.css
    args.cssroot=abspath/to/WORKBENCH/resources
    args.copycss=yes
    nav-toc=full
    generate.copy.outer=3

 

What is generated using html5 transform:

+WORKBENCH\out\html5\
     css\
        commonltr.css
        commonrtl.css
        custom.css       
     RELNOTES\dita\
         index.html   ==> referring <link rel="stylesheet" type="text/css" href="css/custom.css">
         COMPONENT\relnotes.html     ==> referring <link rel="stylesheet" type="text/css" href="../css/custom.css">

Both CSS references are wrong and only consider the path to the bookmap input.dir and not the args.csspath dir.
In the DITA toolkit i found references to parameter PATH2PROJ which looks like it has to address my problem:

  <xsl:param name="PATH2PROJ">
      <xsl:apply-templates select="/processing-instruction('path2project-uri')[1]" mode="get-path2project"/>
  </xsl:param>


But even in debug mode, i can't figure out which XSLT adds this processing instruction into the header of the temp.dir/topic.html.

Anybody out there who has tackled this problem?

Quick
 

 

Roger Sheen
 

Hi Quick,

It looks like the args.cssroot value is the problem.

If I understand your source directory structure correctly, it looks like your custom.css file is at the root level of your WORKBENCH folder, but the parameter setting tells the toolkit to look for it in abspath/to/WORKBENCH/resources.

If you change this value to the absolute path to the parent directory of the custom CSS file (abspath/to/WORKBENCH), it should work.

Hope that helps,

Roger

On Tuesday, 2020-02-11, at 16:20 CET, quickvanrijt wrote:

I have an issue with the css stylesheet references produced by html5 transform (in dita-ot-2.5.4 as well dita-ot-3.4).

Next is my essential folder structure:

*+RELNOTES\dita\*
relnotes.ditamap
COMPONENT\relnotes.dita

*+WORKBENCH\*
run.bat
html.properties
resources\
custom.css
out\

*run.bat* :
dita-ot-2.5.4\bin\dita.bat --format=html5 --input=..\RELNOTES\dita\relnotes.ditamap --output=out\html5 --propertyfile=html.properties

*html.properties* :
args.csspath=css
args.css=custom.css
args.cssroot=abspath/to/WORKBENCH/resources
args.copycss=yes
nav-toc=full
generate.copy.outer=3

What is generated using html5 transform:

+WORKBENCH\out\html5\
css\
commonltr.css
commonrtl.css
custom.css
RELNOTES\dita\
index.html ==> referring <link rel="stylesheet" type="text/css" href=" *css/custom.css* ">
COMPONENT\relnotes.html ==> referring <link rel="stylesheet" type="text/css" href=" *../css/custom.css* ">


--

https://www.dita-ot.org/dev/ · DITA Open Toolkit Documentation

Roger Sheen
 

On Wednesday, 2020-02-12, at 13:20 CET, Roger Sheen wrote via groups.io:

If I understand your source directory structure correctly, it looks like
your `custom.css` file is at the root level of your `WORKBENCH` folder

Sorry Quick,

I was looking at a plaintext representation of your folder structure in my mail client, which did not preserve the indentation in your original HTML message format.

I see now that your custom.css file indeed resides in the resources/ folder, so your args.cssroot value is correct.

Under these circumstances, the generate.copy.outer setting is probably to blame, as it shifts
the output directory, which can lead to problems like this.

If you are able to adjust your source file structure, you would probably achieve more reliable results by moving the resources/ folder with your CSS file to the same directory that contains your root map, and removing the generate.copy.outer setting from your html.properties file (or resetting it to the default value 1).

Regards,

Roger


--

https://www.dita-ot.org/dev/ · DITA Open Toolkit Documentation