Processing Instructions are hiding in the html inside tgroup

[Sangeetha N]

Hi Team,
We are working on web Author plugin and using cals-table.css , we are not able to see processing instruction inside the tgroup. They are hidden and not visible in the HTML.
Our requirement is to change the style of the table based on the data present inside processing instruction. Hidden in the Editor is fine but it should be available in HTML.
As a workaround we tried commenting the below css inside cals_table.css and we are able to see the processing instruction and some functionality is not working as expected.
tgroup {
display: table;
}
Let us know is there any other workaround or solution for the above issue.
Thanks!

[mihaela]

Hello,

Indeed the processing instructions that are included in the tgroup are not included in the rendered document.
Can you please give us more details about how you want to use the information from the processing instructions (in case they would be included in the html) to change the rendering of the table?
Depending on your details and your use case, maybe we can help you to find a solution.

Best regards,
Mihaela

[Sangeetha N]

Below is the sample example

<tgroup cols="3" rowsep="1">
<?ctbl ampex.table.align="center"?>
<?ctbl ampex.colwidth="100"?>
<colspec align="left" colname="col1" colnum="1"/>
<?ctbl ampex.vert.just="top"?>
<?ctbl ampex.colwidth="100"?>
<colspec align="left" colname="col2" colnum="2"/>
<?ctbl ampex.vert.just="top"?>
<?ctbl ampex.colwidth="100"?>
<colspec align="center" colname="col3" colnum="3"/>
<?ctbl ampex.vert.just="top"?>
<?ctbl ampex.horiz.rule="<l><centdol>L1-2</centdol><leader><leaderchar>_</leaderchar></leader></l>"?>
<tbody>
<row>
<entry colname="col1" valign="top">
<para>
<paratext ID="p8"/>
</para>
</entry>
<entry colname="col2" valign="top">
<para>
<paratext ID="p8"/>
</para>
</entry>
</row>
<?ctbl ampex.horiz.rule="<l><centdol>L2</centdol><leader><leaderchar>_</leaderchar></leader></l>"?>
<row>
<entry colname="col1" rowsep="1" valign="top">
<para>
<paratext ID="p11"/>
</para>
</entry>
</row>
</tbody>
</tgroup>

Based on the data present inside <centdol> in the highlighted processing insruction we need to apply the bottom border and top border styles to the table <td>.
E.g <centdol> L1-2 </centdol>
we need to apply the top-border styles to col1 - col2 for first row as processing instruction is present above the row.
similarly for <centdol>L2</centdol>
we need to apply bottom border style for the col2 in the first row as processing instruction is present below the first row.

[mihaela]

Hi,

Thank you for the details, we now understand what you are trying to obtain. It seems to me that this is a more complex use case that cannot be resolved only with CSS.

Your table structure seems to be similar to CALS and I was wondering why you prefer to use the processing instructions instead of some attributes for the rows and cells properties.
In case you are forced to work with these processing instructions I want to ask you if they can change during the editing, or if they are important only when the document is opened.

Depending on your responses we can propose a solution. For example, if you are forced to further work with these processing instructions maybe you can use the JAVA API to read and interpret all the processing instructions details when the document is opened and/or edited and set specific pseudo-classes to table elements to be rendered according to these details.

Best Regards,
Mihaela

[Sangeetha N]

Hi,
We are forced to use processing instruction and those processing instructions will change when user clicks on some action buttons and try to add/remove some border lines of table.

Also, will it be possible to display this processing instruction in the rows and columns as shown below in the editor .

image.png (7.52 KiB) Viewed 592 times

Please let us know how can we handle these.
Thanks!

[mihaela]

Hello,

Thank you for your explanations.
So, you will have to change the table elements style in two cases:
- when the document is loaded (by reading the processing instructions to find the styles that have to be applied)
- when the user invokes the modify borders actions (in this case you already know the elements that are affected and the style that must be applied, there is no need to check the processing instruction)

For the first part (when the document is loaded), you can follow these steps:
- read the processing instructions and determine the styles that must be applied
- determine the associated table node
- change the pseudoclass of the node to match some styles that add the specific borders
The API that you can use for this is ro.sync.ecss.extensions.api.AuthorPreloadProcessor [1] which allows you to set pseudo-classes on nodes before the editor is loaded.
The AuthorPreloadProcessor can be set from a framework using the API: ro.sync.ecss.extensions.api.ExtensionsBundle.createAuthorPreloadProcessor().

For the second part (when the user invokes the modify borders actions) you can invoke from javascript the ro.sync.ecss.extensions.commons.operations.SetPseudoClassOperation to update the pseudoclass of the affected elements.

Regarding the display of the processing instructions, they are not rendered if they are located between rows. The reason is that the table layout would be broken in case they would appear in the document.

Best Regards,
Mihaela