[oXygen-user] CSS for styling DITA as a table; how to add a table header?

[Oxygen XML Editor Support (Radu Coravu)]

Hi Kris,

Right. Well, there are ideas for future CSS specs to support adding 
artificial elements in the content using selectors like "::before":

https://www.w3.org/TR/css-pseudo-4/#selectordef-before

Web Browsers have an easier life implementing such things before they do 
not support editing and saving content though.

Regards,
Radu

Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com

On 3/23/2018 2:18 PM, Kristen James Eberlein wrote:
> Thanks, Radu. So, is the case that I ran into the limits of what one can
> be with CSS, which is a formatting rather than transformative language?
> If so, I apologize for posting here rather than on a general CSS forum
> -- But I knew that I'd get a quick response! As always, thanks for your
> help.
>
> No need to add specific oXygen support for something like this.
>
> Best,
> Kris
>
> Kristen James Eberlein
> Chair, OASIS DITA Technical Committee
> Principal consultant, Eberlein Consulting
> www.eberleinconsulting.com
> +1 919 622-1501; kriseberlein (skype)
>
> On 3/23/2018 7:32 AM, Oxygen XML Editor Support (Radu Coravu) wrote:
>> Hi Kris,
>>
>> We do not have specific support to create an artificial table header
>> (although I agree it's quite useful in such cases).
>> I will add your vote on the opened issue and if we make some progress
>> on it we'll let you know.
>> In the meantime you can try to continue your idea with the before:
>> selectors which add labels something like:
>>
>>> *[class~="AMATtask/partDesc"]:before {
>>>   content: "Description";
>>>     display:block;
>>>     border-bottom: 1px solid black;
>>>   font-weight: bold;
>>>   font-size:small;
>>> }
>>
>> Once those before selectors have display block you should be able to
>> better separate them with a border or some background color from the
>> cell's contents, make it look more like a table header.
>>
>> Regards,
>> Radu
>>
>> Radu Coravu
>> <oXygen/> XML Editor
>> http://www.oxygenxml.com
>>
>> On 3/22/2018 6:11 PM, Kristen James Eberlein wrote:
>>> I am developing CSS for the oXygen authoring environment.
>>>
>>> There are a number of DITA elements that are best displayed as a table,
>>> for example, the following rendering and source code:
>>>
>>> *Source code:*
>>>
>>>  <partsList>
>>>                     <part>
>>>                         <partDesc>
>>>                             <p/>
>>>                         </partDesc>
>>>                         <partNumberList>
>>>                             <partNum/>
>>>                         </partNumberList>
>>>                         <partQuantity/>
>>>                         <partNotes/>
>>>                     </part>
>>>                     ...
>>>   </partsList>
>>>
>>> *Rendering:*
>>>
>>> *My question*
>>> The way I have set the CSS up is generating labels for the elements
>>> rendered as table cells. It's OK, but the better presentation would be
>>> to render a table header. Anyone have suggestions about how to do that?
>>>
>>> *CSS*
>>> partsList {
>>>     display:table;
>>>     border:solid
>>> }
>>> part {
>>>     display:table-row
>>> }
>>> partDesc {
>>>    display:table-cell;
>>>    border:solid
>>> }
>>> partNumberList {
>>>    display:table-cell;
>>>    border:solid
>>> }
>>> partQuantity {
>>>    display:table-cell;
>>>    border:solid
>>> }
>>> partNotes {
>>>    display:table-cell;
>>>    border:solid
>>> }
>>> /* Labels for table headers */
>>> *[class~="AMATtask/partDesc"]:before {
>>>   content: "Description";
>>>   font-weight: bold;
>>>   font-size:small;
>>> }
>>> *[class~="AMATtask/partNumberList"]:before {
>>>   content: "Part Number";
>>>   font-weight: bold;
>>>   font-size:small;
>>> }
>>> *[class~="AMATtask/partQuantity"]:before {
>>>   content: "Quantity";
>>>   font-weight: bold;
>>>   font-size:small;
>>> }
>>> *[class~="AMATtask/partNotes"]:before {
>>>   content: "Notes";
>>>   font-weight: bold;
>>>   font-size:small;
>>> }
>>>
>>> Many thanks.
>>>
>>> Best,
>>> Kris
>>>
>>> Kristen James Eberlein
>>> Chair, OASIS DITA Technical Committee
>>> Principal consultant, Eberlein Consulting
>>> www.eberleinconsulting.com
>>> +1 919 622-1501; kriseberlein (skype)
>>>
>>>
>>> _______________________________________________
>>> oXygen-user mailing list
>>> oXygen-user at oxygenxml.com
>>> https://www.oxygenxml.com/mailman/listinfo/oxygen-user
>>>
>> _______________________________________________
>> oXygen-user mailing list
>> oXygen-user at oxygenxml.com
>> https://www.oxygenxml.com/mailman/listinfo/oxygen-user
>
> _______________________________________________
> oXygen-user mailing list
> oXygen-user at oxygenxml.com
> https://www.oxygenxml.com/mailman/listinfo/oxygen-user