Implementing shared CSS <related-links> formatting across the Oxygen editor, PDF Chemistry, and HTML5/WebHelp
Post here questions and problems related to editing and publishing DITA content.
-
- Posts: 818
- Joined: Thu May 02, 2019 2:32 pm
Implementing shared CSS <related-links> formatting across the Oxygen editor, PDF Chemistry, and HTML5/WebHelp
Post by chrispitude »
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:
- related-links-css-classes.zip
- (25.33 KiB) Downloaded 35 times
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:
- image.png (164.45 KiB) Viewed 473 times
-
- Posts: 396
- Joined: Wed Oct 16, 2019 3:47 pm
Re: Implementing shared CSS <related-links> formatting across the Oxygen editor, PDF Chemistry, and HTML5/WebHelp
Post by julien_lacour »
Hi Chris,
An enhancement should be possible, I added an issue to track this improvement and I will post it the status of this ticket.
Regards,
Julien
An enhancement should be possible, I added an issue to track this improvement and I will post it the status of this ticket.
Regards,
Julien
-
- Posts: 818
- Joined: Thu May 02, 2019 2:32 pm
Re: Implementing shared CSS <related-links> formatting across the Oxygen editor, PDF Chemistry, and HTML5/WebHelp
Post by chrispitude »
Hi everyone,
With Julien's help, I was able to find an elegant solution to shared <related-links> CSS formatting between the Oxygen editor, PDF Chemistry, and WebHelp!
I want to style the link list as follows, with the links indented by 0.375in, then a Unicode marker character shifted left from that by 0.225in:
In addition, I want any <desc> text to become additional descriptive text, appended to the end of the link:
Julien suggested that I apply a CSS "display: block" property to both the <link> items and :before pseudoelements, instead of using list :marker pseudoelements (which are resistant to styling). Using block elements provides much greater control over both positioning and styling:
The ".topic\/topic:root" selectors apply to Oxygen editor elements, and the "html:root" selectors apply to HTML5, PDF Chemistry, and WebHelp elements.
Here is a testcase if you would like to experiment with this shared <related-links> CSS styling:
To generate the outputs, publish all deliverables in the "project.xml" file.
With Julien's help, I was able to find an elegant solution to shared <related-links> CSS formatting between the Oxygen editor, PDF Chemistry, and WebHelp!
I want to style the link list as follows, with the links indented by 0.375in, then a Unicode marker character shifted left from that by 0.225in:
- see_also_formatting.png (9.01 KiB) Viewed 408 times
In addition, I want any <desc> text to become additional descriptive text, appended to the end of the link:
- image.png (12.62 KiB) Viewed 408 times
Julien suggested that I apply a CSS "display: block" property to both the <link> items and :before pseudoelements, instead of using list :marker pseudoelements (which are resistant to styling). Using block elements provides much greater control over both positioning and styling:
Code: Select all
/* link block */
.topic\/topic:root .topic\/link,
html:root .topic\/related-links li.linklist {
display: block;
margin-left: 0.375in;
position: relative;
}
/* link marker block, to the left of the link */
.topic\/topic:root .topic\/link:before,
html:root .topic\/related-links li.linklist:before {
display: block;
width: 0.225in;
position: absolute;
left: -0.225in;
content: '\21aa'; /* Unicode down-right arrow character */
}
Here is a testcase if you would like to experiment with this shared <related-links> CSS styling:
- related-links-common-styling.zip
- (26.12 KiB) Downloaded 33 times
To generate the outputs, publish all deliverables in the "project.xml" file.
-
- Posts: 396
- Joined: Wed Oct 16, 2019 3:47 pm
Re: Implementing shared CSS <related-links> formatting across the Oxygen editor, PDF Chemistry, and HTML5/WebHelp
Post by julien_lacour »
Hello,
This has been improved since Oxygen 25.0, the generated @class attribute will keep the inherited DITA class.
Regards,
Julien
This has been improved since Oxygen 25.0, the generated @class attribute will keep the inherited DITA class.
Regards,
Julien
Return to “DITA (Editing and Publishing DITA Content)”
Jump to
- Oxygen XML Editor/Author/Developer
- ↳ Feature Request
- ↳ Common Problems
- ↳ DITA (Editing and Publishing DITA Content)
- ↳ SDK-API, Frameworks - Document Types
- ↳ DocBook
- ↳ TEI
- ↳ XHTML
- ↳ Other Issues
- Oxygen XML Web Author
- ↳ Feature Request
- ↳ Common Problems
- Oxygen Content Fusion
- ↳ Feature Request
- ↳ Common Problems
- Oxygen PDF Chemistry
- ↳ Feature Request
- ↳ Common Problems
- Oxygen Feedback
- ↳ Feature Request
- ↳ Common Problems
- Oxygen XML WebHelp
- ↳ Feature Request
- ↳ Common Problems
- XML
- ↳ General XML Questions
- ↳ XSLT and FOP
- ↳ XML Schemas
- ↳ XQuery
- NVDL
- ↳ General NVDL Issues
- ↳ oNVDL Related Issues
- XML Services Market
- ↳ Offer a Service