Using CSS to provide placeholder-text writer guidance in the Oxygen editor

[chrispitude]

Hi everyone,

Our DITA grammar has a <procedure> element (specialized from <ol>) that contains <step> elements (specialized from <li>). I wanted to provide guidance to our writers that each <step> should (1) instruct the reader, (2) optionally describe the result, and (3) optionally explain what happened.

In the Oxygen editor, elements show placeholder text (their name) when empty:

image.png (4.63 KiB) Viewed 352 times

I was not sure if this placeholder text was configurable in some particular way, but I was able to write CSS to emulate it:

Code: Select all

.snps-d\/step > .topic\/p:first-child:empty:after(1) {
 content: 'instruct [result] [explain]';
 background-color: #edeff1;
 color: #777879;
 font-weight: bold;
}

With the CSS rule above, the highlighted text is shown in the editor when the first element in a <step> is a <p> and it is empty:

image.png (5.07 KiB) Viewed 352 times

and the placeholder text disappears once the writer starts typing.

In our cc_config_ext.xml file, we have the following entries:

Code: Select all

<elementProposals path="procedure" insertElements="step"/>
<elementProposals path="step" insertElements="p"/>

so that when a writer inserts a <procedure> element, the whole initial structure is created for them, along with a reminder of what to write.

I hope someone else finds this CSS placeholder-text method useful!

[Radu]

Hi Chris,

We also have a special CSS property for configuring the placeholder text:
https://www.oxygenxml.com/doc/versions/ ... nsion.html

Regards,
Radu

[chrispitude]

Thanks Radu, that simplifies it quite a bit:

Code: Select all

.snps-d\/step > .topic\/p:first-child {
  -oxy-placeholder-content: 'instruct [result] [explain]';
}

Somehow I looked through the CSS files inside the Oxygen installation directory to try to figure this out, but I failed to simply read the documentation.