CSS

[Allison]

My team is having trouble with the display inline property when there are multiple nested levels of hierarchy in our data.

The inline seems to work correctly when there is one level of nested hierarchy.

For example, this:

Code: Select all

<section>

<enum>110.</enum>

<subsection display-inline="yes-display-inline">

<enum>(a)</enum>

<text>The first sentence of section 2 of the Federal Water Pollution Control Act [...]</text>

</subsection>

Displays correctly inline, like this:

Code: Select all

Sec. 110.(a) The first sentence of section 2 of the Federal Water Pollution Control Act (33 U.S.C. 466-1) is amended by striking out Federal Water Pollution Control Administration and inserting in lieu thereof Federal Water Quality Administration.

However, if there is more than one nested level of hierarchy, the inline display does not seem to work.

For example, this:

Code: Select all

<section>

<enum>43.</enum>

<subsection display-inline="yes-display-inline">

<enum>(a)</enum>

<paragraph display-inline="yes-display-inline">

<enum>(1)</enum>

<text>Section 5 of the Act of May 13, 1954, as amended [...]</text>

</paragraph>

Displays incorrectly on two lines, like this:

Code: Select all

Sec. 43.

(a)(1) Section 5 of the Act of May 13, 1954, as amended (33 U.S.C. 985), is further amended by inserting (a) immediately after SEC. 5., and by striking out the fourth, fifth, and eighth sentences thereof.

Here is the CSS:

Code: Select all

subsection [display-inline="yes-display-inline"] {display: inline;}

paragraph [display-inline="yes-display-inline"] {display: inline;}

Can anyone advise on why the multiple nested levels are not displaying correctly? Any feedback much appreciated.

[mihaela]

Hi Allison,

I could not reproduce your problem starting from your code samples (the line break does not appear in Author mode).
Here are the complete XML and CSS sample documents:

Code: Select all

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

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

<root>

    <section>

        <enum>43.</enum>

        <subsection display-inline="yes-display-inline">

            <enum>(a)</enum>

            <paragraph display-inline="yes-display-inline">

                <enum>(1)</enum>

                <text>Section 5 of the Act of May 13, 1954, as amended [...]</text>

            </paragraph>

        </subsection>

    </section>

</root>

test.css:

Code: Select all

subsection [display-inline="yes-display-inline"] {display: inline;}

paragraph [display-inline="yes-display-inline"] {display: inline;}

Could you try to open the previous xml sample in editor and confirm that the line break appear in Author? If not, please send us a minimal xml/css sample that reproduces your problem.
Also, can you tell me what oXygen version are you using?

Regards,
Mihaela

[Allison]

Hi Mihaela, thanks so much for your response. We are using 13.1.

Let me give you a slightly different example that you should hopefully be able to replicate.

Here, we want the section with display-inline attribute to display inline with the enacting-clause.

Code: Select all

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

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

<publaw>

<legis-body>

<enacting-clause>Be it enacted by the Senate and House of Representatives of the United States of America in Congress assembled,</enacting-clause>

<section display-inline="yes-display-inline">

<text>That the project for navigation, Newport News Creek, Virginia, authorized by the River and Harbor Act of 1946, is hereby modified to authorize the relocation and reconstruction by the State of Virginia of the project upon approval of plans for such relocation and reconstruction by the Secretary of the Army.</text>

<margin-notes>

<margin-note>Virginia.</margin-note>

</margin-notes>

</section>

</legis-body>

</publaw>

When the section does not have a margin-notes child, it displays inline correctly. Here, for example, the margin-notes have been removed, and the section displays correctly inline:

Code: Select all

Be it enacted by the Senate and House of Representatives of the United States of America in Congress assembled,  That the project for navigation, Newport News Creek, Virginia, authorized by the River and Harbor Act of 1946, is hereby modified to authorize the relocation and reconstruction by the State of Virginia of the project upon approval of plans for such relocation and reconstruction by the Secretary of the Army.

However, when the margin-notes are present, the section displays incorrectly on the next line:

Code: Select all

 Be it enacted by the Senate and House of Representatives of the United States of America in Congress assembled, 

 That the project for navigation, Newport News Creek, Virginia, authorized by the River and Harbor Act of 1946, is hereby modified to authorize the relocation and reconstruction by the State of Virginia of the project upon approval of plans for such relocation and reconstruction by the Secretary of the Army. 

 Virginia. 

Here is the CSS. The margin-notes has a block display. If a child element has block display, does that negate the inline display of the parent?

Code: Select all

section [display-inline="yes-display-inline"] {

  display: inline;

}



enacting-clause {

  text-align: left;

  font-size: 10pt;

  font-style: italic;

  margin-top: 5pt;

}



margin-notes {

  display: block;

  text-align: right;

  margin-bottom: 15px;

}



margin-note {

  font-size: 8pt;

}

[mihaela]

Hi Allison,

Even if you specify that an element is inline, if it has a child with display:block, it will also have a block display.
This means that even if you specify the display:inline property for section element, when the margin-notes child is present, the section element becomes a block element. This is the reason of the line break between enacting-clause and section when you insert margin-notes.

What you can do to render the margin-notes inline element like a block element is to impose line breaks on its before and after contents:

Code: Select all

margin-notes {

  display: inline;

  margin-bottom: 15px;

}



margin-notes:before {

  content:"\A";

}

    

margin-notes:after {

  content:"\A";

}

However there is a drawback in making margin-notes inline: you cannot align its content to right.

Best Regards,
Mihaela

[Allison]

Thanks Miheala. That's what we figured, but it's good to have it confirmed and to have a possible work around for the future. Appreciate the help.