Implementing shared CSS <related-links> formatting across the Oxygen editor, PDF Chemistry, and HTML5/WebHelp
Posted: Sun Jul 10, 2022 2:11 pm
I am working on a shared CSS file to use in
However, it would be useful to resolve the last item, so that link elements would have "topic/link" class selectors in WebHelp's HTML (which would match PDF Chemistry's HTML). To Syncro Soft, is this an enhancement request that could be considered?
Here is a testcase for experimentation:
To see the transformation outputs, publish all deliverables in the "project.xml" file.
The testcase applies CSS highlighting in the Oxygen editor, and in the html5, pdf-css-html5, and webhelp-responsive outputs:
which helps to visualize how the CSS selectors are similar/different:
- The Oxygen editor
- pdf-css-html5 transformations
- webhelp-responsive transformations
- <desc> text replaces the link text in the Oxygen editor, but is never shown in the transformation output.
- <link> is a block element in the Oxygen editor, but <a class="topic/link"> is a span element in the transformations.
- In the transformation output, there are <ul class="linklist"> and <li class="linklist"> element, which are different from a <div class="topic/linklist"> element that results from a <linklist> element in the DITA source.
- <a> link elements have @class="topic/link" in the PDF Chemistry HTML, but not in the WebHelp HTML.
However, it would be useful to resolve the last item, so that link elements would have "topic/link" class selectors in WebHelp's HTML (which would match PDF Chemistry's HTML). To Syncro Soft, is this an enhancement request that could be considered?
Here is a testcase for experimentation:
To see the transformation outputs, publish all deliverables in the "project.xml" file.
The testcase applies CSS highlighting in the Oxygen editor, and in the html5, pdf-css-html5, and webhelp-responsive outputs:
Code: Select all
.topic\/related-links { background-color: yellow; margin: 5pt; padding: 5pt; }
.topic\/link { background-color: pink; margin: 5pt; padding: 5pt; }
.topic\/desc { background-color: lightgreen; margin: 5pt; padding: 5pt; }
.topic\/linktext { background-color: lightblue; margin: 5pt; padding: 5pt; }
.topic\/linklist { border: 4px solid red; margin: 5pt; padding: 5pt; }
.topic\/linkpool { border: 4px solid blue; margin: 5pt; padding: 5pt; }
ul.linklist:not(.topic\/ul) { border: 4px dotted red; margin: 5pt; padding: 5pt; }
li.linklist:not(.topic\/li) { border: 4px dotted blue; margin: 5pt; padding: 5pt; }
which helps to visualize how the CSS selectors are similar/different: