CSS: mystery margin on XInclude'd content

[avanlooveren]

I need to use XInclude fairly extensively and want the rendering of our documents in Author mode to be fairly seamless. By that, I mean I would like only subtle visual cues that a referenced document is being displayed. I've nearly accomplished this with the code below, except that there's a really strange layout issue. Whenever the "lidLabel" element is not "display:block" (or list-item), the elements that follow have a fairly substantial margin added to them, and I have not found how to eliminate it.

I'm including all the code to demonstrate the issue (all are saved in the same directory)...

The schema (cookieJar.xsd):

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>

<schema xmlns="http://www.w3.org/2001/XMLSchema" xmlns:example="http://myExample.com" elementFormDefault="qualified" targetNamespace="http://myExample.com">

    <complexType name="CookieJar">

        <sequence>

            <element name="lidLabel" type="string" minOccurs="0" maxOccurs="unbounded"/>

            <element name="cookie" type="string" maxOccurs="unbounded"/>

            <element name="bottomNote" type="string" minOccurs="0" maxOccurs="unbounded"/>

        </sequence>

    </complexType>

    <complexType name="Shelf">

        <choice maxOccurs="unbounded">

            <element name="cookieJar" type="example:CookieJar"/>

        </choice>

    </complexType>

    <element name="shelf" type="example:Shelf"/>

    <element name="cookieJar" type="example:CookieJar"/>

</schema>

The style (cookieStyle.css):

Code: Select all

@namespace oxy url('http://www.oxygenxml.com/extensions/author');

@namespace xi url('http://www.w3.org/2001/XInclude');

@namespace url('http://myExample.com');



* {

    padding: 0px;

    margin: 5px;

    background-color: white; }



oxy|document {

    background-color: rgb(223,223,223); }



oxy|reference:before {

    content:"" !important; /* remove the reference/transclusion icon */ }



oxy|reference {

    border: 1px dashed gray !important;

    background-color: rgba(0,255,0,0.2) !important; }



xi|include:before {

    content:"" !important; /* remove the link icon and URL display */ }



xi|include {

    padding: 0px !important;

    margin: 0px !important; }



shelf {

    display: block;

    border: 1px solid black; }



cookieJar:before {

    content: "-Jar-"; }



cookieJar {

    display: block;

    border-top: 1px solid black; }



lidLabel {

    /*display: block; /* enabling this removes the mystery spacing */ }



cookie:before {

    content: "Cookie: "; }



cookie {

    display: list-item;

    -oxy-show-placeholder: always;

    -oxy-placeholder-content: "type here";

    border: 1px solid black; }



bottomNote {

    display: block; }

The referenced XML (cookieJar.xml):

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet type="text/css" href="cookieStyle.css"?>

<cookieJar xmlns="http://myExample.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://myExample.com cookieJars.xsd">

    <lidLabel>Included Cookies</lidLabel>

    <cookie>Chocolate Chip</cookie>

    <cookie>Snicker Doodle</cookie>

    <cookie>Oatmeal Raisin</cookie>

    <bottomNote>You ate the last cookie!</bottomNote>

    <bottomNote>This is the second notice.</bottomNote>

</cookieJar>

The referencing XML (cookieShelf.xml):

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet type="text/css" href="cookieStyle.css"?>

<shelf xmlns="http://myExample.com" xmlns:xi="http://www.w3.org/2001/XInclude"

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:schemaLocation="http://myExample.com cookieJars.xsd">

    <cookieJar>

        <lidLabel>Andre's Cookies</lidLabel>

        <cookie>Peanut Butter</cookie>

        <cookie>Black and White</cookie>

        <bottomNote>Go to the store and buy some more!</bottomNote>

    </cookieJar>

    <cookieJar>

        <lidLabel>Dustin's Cookies</lidLabel>

        <cookie>Samoa</cookie>

        <cookie>Thin Mint</cookie>

    </cookieJar>

    <xi:include href="cookieJar.xml"/>

    <cookieJar>

        <lidLabel>Patrick's Cookies</lidLabel>

        <cookie>Macaroon</cookie>

        <cookie>Thumbprint</cookie>

    </cookieJar>

</shelf>

I played with all different combinations of "block" and "inline" values for the "display" CSS attribute and I found that all block-styled elements that follow an inline-styled element, within an XInclude/referenced document, will have the mystery margin added to them. For instance, if the "lidLabel" is block, "cookie" is inline, and "bottomNote" is block, then "bottomNote" will have the mystery margin added. As the code is above, the inline of "lidLabel" seems to cause both of the other elements (with block layout) to have the mystery margin. One more thing, if the "lidLabel" element is absent, then the mystery margin is not present for any "cookie." Finally, no mystery margins ever appear in the current (referencing) document.

So, how do I avoid the mystery margin?

I am curious to reference a document from another document to see if the margin compounds more. I may test that with a more complex schema and report back if that produces any interesting results. If there's a good place to deposit a screen capture or even a ZIP of the files for convenience, let me know.

Thanks.

[iulian_velea]

Hello,

Thank you for reporting this issue. I used the examples that you attached and reproduced the described behavior. There seems to be a problem with the way the whitespaces are handled in Author when the cookieJar element contains a child with a non-block display property.
I added an entry on our issue tracker regarding this situation.
However, if you add the following property to the CSS rule for the cookieJar element, the non-necessary spacing disappears:

Code: Select all

 white-space: -oxy-trim-when-ws-only !important;

Regards,
Iulian

[avanlooveren]

Thanks, Iulian! I confirm this takes care of the spacing issue.

[Radu]

Hi,

Oxygen 15.1 should have a fix for this issue even without the CSS workaround Iulian gave you.

Regards,
Radu