Glossary formatting

[shudson310]

I'd like to style the glossary such that the title follows the format:

glossAcronym - glossterm
glossdef

I'm trying to use:

Code: Select all

/* Glossary formatting*/

article > *[class~="glossentry/glossentry"] > *[class~="glossentry/glossterm"]:before {

content: oxy_xpath('.//*[contains(@class, ' glossentry/glossAcronym ')]/text() or .//*[contains(@class, ' glossentry/glossAbbreviation ')]/text()') " \2014 "  !important;

font-family: 'Arial Unicode MS Bold', 'Arial Bold', sans-serif;

font-weight: bold;

font-style: normal;

}

The glossAcronym isn't displaying, however. I'm guessing it is a problem with my xpath, but not sure how to fix?

[Radu]

Hi Scott,

Something like this should work:

Code: Select all

/* Glossary formatting*/

*[class ~= "glossentry/glossentry"] > *[class ~= "glossentry/glossterm"]:before {

    content: oxy_xpath("ancestor::*[contains(@class, ' glossentry/glossentry ')]//*[contains(@class, ' glossentry/glossAcronym ')]/text() | ancestor::*[contains(@class, ' glossentry/glossentry ')]//*[contains(@class, ' glossentry/glossAbbreviation ')]/text()") " \2014 " !important;

    font-family: 'Arial Unicode MS Bold', 'Arial Bold', sans-serif;

    font-weight: bold;

    font-style: normal;

}

So what were the problems with your original oxy_xpath?
1) It used simple quotes around its contents but there were other simple quotes inside the XPath expression. So I replaced those simple quotes with double quotes.
2) The current context of the oxy_xpath is the glossterm, so an XPath like this ".//" means match all descendants of "glossterm" which does not match anything. So you need to use something like "ancestor::*[contains(@class, ' glossentry/glossentry ')]//" to match all desdendants of "glossentry ".
3) Your CSS selector did not match anything. After you publish to HTML, in the output folder there is a file called something like mapName.merged.html. You can open the HTML document and look at its structure, this will give you a more clear idea about what to match. You can also use the CSS inspector to see if you have properly matched nodes. You can also use our XPath view to run XPaths on the HTML structure to make sure the XPath properly selects content.
4) When you use "or" in an XPath expression the entire expression starts returning a boolean value. You should use "|" instead.

https://www.oxygenxml.com/doc/versions/ ... e_css.html

Regards,
Radu

[shudson310]

Unfortunately, we are still not seeing the prepended Acronym in the glossary heading (glossterm).

I've tried troubleshooting with the browser and with the XPath builder.

--Scott

[Radu]

Hi Scott,

So what were the conclusions of your troubleshooting session?
For example I would first try a selector like this:

Code: Select all

*[class ~= "glossentry/glossentry"] > *[class ~= "glossentry/glossterm"]:before {

    content: "SOME CONTENT HERE" !important;

    font-family: 'Arial Unicode MS Bold', 'Arial Bold', sans-serif;

    font-weight: bold;

    font-style: normal;

}

just to see if my static text becomes visible in the PDF output or not.

1) If it becomes visible, then it's a problem with the XPath expression. I would take that XPath expression and run it in the HTML document (placing the caret in the <span> corresponding to the original term element). If the XPath does not work, you can try to simplify it until it works.
2) If the static text is not visible in the PDF, this means that the CSS selector does not work. You can look again in the HTML document at the span corresponding to the original DITA term and try to come up with a CSS selector which works.

Regards,
Radu

[shudson310]

I am able to get the CSS selector to work in the browser, but when I run the transform, it appears that my style is either overridden or stripped out during the process, so does not appear when I inspect the merged HTML.

I'm using:

Code: Select all

/* Glossary formatting*/

*[class~="glossentry/glossentry"] > *[class~="glossentry/glossterm"]:before {

    content: /*oxy_xpath("(following-sibling::*\/\**[contains(@class, ' glossentry/glossAcronym ')]/text() | following-sibling::*\/\**[contains(@class, ' glossentry/glossAbbreviation ')]/text())[1]") */"TEST \2014 " !important;

    font-family: 'Arial Unicode MS Bold', 'Arial Bold', sans-serif;

    font-weight: bold;

    font-style: normal;

}

But in the inspector, no such style appears:

Code: Select all

element.style {

}



*[class ~= "bookmap/frontmatter"] > *[class ~= "topic/title"], *[class ~= "bookmap/frontmatter"] *[class ~= "topic/topic"] > *[class ~= "topic/title"], *[class ~= "bookmap/backmatter"] > *[class ~= "topic/title"], *[class ~= "bookmap/backmatter"] *[class ~= "topic/topic"] > *[class ~= "topic/title"], *[class ~= "topic/topic"][is-part] ~ *[class ~= "topic/topic"]:not([is-part]) > *[class ~= "topic/title"], *[class ~= "topic/topic"][is-part] ~ *[class ~= "topic/topic"]:not([is-part]) *[class ~= "topic/topic"] > *[class ~= "topic/title"] {

    string-set: parttitle "", chaptertitle "";

}

*[class ~= "topic/title"] {

    page-break-after: avoid;

}

.topictitle2 {

    margin: 1.5em 0 .5em 0;

    font-size: 1.7em;

    font-weight: 400;

    font-style: italic;

}

.topictitle2 {

    font-size: 1.17em;

    margin-bottom: 0.45em;

    margin-top: 1pc;

}

user agent stylesheet

h2 {

    display: block;

    font-size: 1.5em;

    -webkit-margin-before: 0.83em;

    -webkit-margin-after: 0.83em;

    -webkit-margin-start: 0px;

    -webkit-margin-end: 0px;

    font-weight: bold;

}

*[class ~= "bookmap/frontmatter"] > *[class ~= "topic/title"]:before, *[class ~= "bookmap/frontmatter"] *[class ~= "topic/topic"] > *[class ~= "topic/title"]:before, *[class ~= "bookmap/backmatter"] > *[class ~= "topic/title"]:before, *[class ~= "bookmap/backmatter"] *[class ~= "topic/topic"] > *[class ~= "topic/title"]:before, *[class ~= "topic/topic"][is-part] ~ *[class ~= "topic/topic"]:not([is-part]) > *[class ~= "topic/title"]:before, *[class ~= "topic/topic"][is-part] ~ *[class ~= "topic/topic"]:not([is-part]) *[class ~= "topic/topic"] > *[class ~= "topic/title"]:before {

    content: none !important;

}

Apparently, the last style is coming from p-numbering-shallow.css, as it is not in my customization CSS. Not sure how to override it, but it might be the problem?

[shudson310]

To get it to work, I commented out the following offending style in p-numbering-shallow.css:

Code: Select all

/* 

	Topics from Front Matter and Back Matter and

	all other topics that follow a part 

	should not define string sets, counters, etc.. 

*/

*[class ~= "bookmap/frontmatter"] > *[class ~= "topic/title"]:before,

*[class ~= "bookmap/frontmatter"] *[class ~= "topic/topic"] > *[class ~= "topic/title"]:before,

*[class ~= "bookmap/backmatter"] > *[class ~= "topic/title"]:before,

/**[class ~= "bookmap/backmatter"] *[class ~= "topic/topic"] > *[class ~= "topic/title"]:before,*/

*[class ~= "topic/topic"][is-part] ~ *[class ~= "topic/topic"]:not([is-part]) > *[class ~= "topic/title"]:before,

*[class ~= "topic/topic"][is-part] ~ *[class ~= "topic/topic"]:not([is-part]) *[class ~= "topic/topic"] > *[class ~= "topic/title"]:before{

    content:none !important;

}

[shudson310]

Here's my final style that works:

Code: Select all

/* Glossary formatting*/

*[class~="glossentry/glossentry"] > *[class~="glossentry/glossterm"]:before {

    content: oxy_xpath("(following-sibling::*//*[contains(@class, ' glossentry/glossAcronym ')]/text() | following-sibling::*//*[contains(@class, ' glossentry/glossAbbreviation ')]/text())[1]") " \2014 " !important;

    font-family: 'Arial Unicode MS Bold', 'Arial Bold', sans-serif;

    font-weight: bold;

    font-style: normal;

}