Author CSS Stylesheets

[jwalker]

It looks like the width property for inline elements is ignored in the Author view? It also looks like the positioning selectors are also disabled? Is there a different way that Author could be extended to support a more flexible layout?

One example is that I am trying to create a table layout look for elements that are not in a complete table structure (no root element to use for the table). Some example XML:

Code: Select all

<Environments>

  <Description>A List of Environments</Description>

  <Environment>

    <Type>Forest</Type>

    <Climate>Shady</Climate>

  </Environment>

  <Environment>

    <Type>Desert</Type>

    <Climate>Hot</Climate>

  </Environment>

  <Environment>

     <Type>Sea</Type>

    <Climate>Wet</Climate>

  </Environment>

</Environments>

And the CSS:

Code: Select all

Environments {

    display:block;

}



Environments:before {

    content:"List of Environments";

    

    border-bottom: 0.1em solid navy;

    padding: 0.3em;

    

    font-size:large;

    font-weight:bold;

}



Description {

    display:block;

}



Environment:before {

    content:"Environment: ";

    padding-left:1.5em;

}



Environment {

    display:block;

}



Environment > Type {

    display:inline;

    border: 1px solid navy;

    width:500px;

}



Environment > Type:before {

    content:"Type: ";

    padding-left:1.5em;

}



Environment > Climate {

    display:inline;

    border: 1px solid navy;

}



Environment > Climate:before {

    content:"Climate: ";

    padding-left:1.5em;

}



*:before{

    font-weight:bold;

    font-style:normal;

}

[Radu]

Hi,

We are an XML editor, we try to support as much as possible from the CSS spec but we will never have the level of support that a web browser does.

It looks like the width property for inline elements is ignored in the Author view?

Yes, right now it's supported for block elements but not for inlines.
I added a feature request for supporting the width for inline elements.

It also looks like the positioning selectors are also disabled?

I do not understand what you mean by positioning selectors.

Your XML seems to look very much like a table, maybe you should use a CSS like:

Code: Select all

Environments{

    display:table;



}



Environment {

    display:table-row;

}



Type, Climate {

    display: table-cell;

    width:300px;

    border-color: #CCCCCC;

    border-style:solid;

    border-width:1px;

    padding:1px;

}



Description {

    display:table-caption;

}

Regards,
Radu

[jwalker]

I do not understand what you mean by positioning selectors.

I mean the position:fixed | relative | absolute selectors. Along with the top:, bottom:, right: ,left: ones.

What if the XML had additional tags outside of the Environment tags such as the following?

Code: Select all

<Environments>

  <Description>A List of Environments</Description>

  <Notes></Notes>

  <Reference></Reference>

  <Environment>

    <Type>Forest</Type>

    <Climate>Shady</Climate>

  </Environment>

  <Environment>

    <Type>Desert</Type>

    <Climate>Hot</Climate>

  </Environment>

  <Environment>

     <Type>Sea</Type>

    <Climate>Wet</Climate>

  </Environment>

</Environments>

[Radu]

Hi,

I mean the position:fixed | relative | absolute selectors. Along with the top:, bottom:, right: ,left: ones.

I noted this as an improvement request but this is very hard to achieve using our current internal architecture.

What if the XML had additional tags outside of the Environment tags such as the following?

Maybe you could declare them all as table captions like:

Code: Select all

Description, Notes, Reference {

    display:table-caption;

}

Regards,
Radu

[jwalker]

It doesn't look like it renders these before selectors when using that css:

Code: Select all

Environments:before {

    content:"Editor";

    

    border-bottom: 0.1em solid navy;

    padding: 0.3em;

    

    font-size:large;

    font-weight:bold;

}

Code: Select all

Environment:before {

    content:"Environment: ";

    padding-left:1.5em;

}

[mihaela]

Hi,

The before selector for Environments will be rendered if you add the "display:block;" line:

Code: Select all

Environments:before {

    display: block;

    content:"Editor";

   

    border-bottom: 0.1em solid navy;

    padding: 0.3em;

   

    font-size:large;

    font-weight:bold;

}

The before selector for Environment element will not be rendered because this element has a "display : table-row;" declared and oXygen does not create any graphic component for table rows.
What you can do is to add the "Environment: " content to Type:before and add some borders to separate this row label from the Type content:

Code: Select all

Type:before {

    content:"Environment: ";

    border-right-color: #CCCCCC;

    border-right-style:solid;

    border-right-width:1px;

    padding-left:1.5em;

    padding-right:1.5em;

}

Best regards,
Mihaela

[jwalker]

Code: Select all

Type:before {

    content:"Environment: ";

    border-right-color: #CCCCCC;

    border-right-style:solid;

    border-right-width:1px;

    padding-left:1.5em;

    padding-right:1.5em;

}

That works. Though, how can I add a "Type:" lable before the Type element?

[mihaela]

Hi,

Just set the content for the Type element:

Code: Select all

Type {

    content: "Type: ";    

}

Regards,
Mihaela

[mihaela]

Hi,

Oxygen 14.1 was released and it contains the following improvement: the CSS width property is now taken into account in the Author view for inline elements.

For the list of the most important features read here:
http://www.oxygenxml.com/xml_author.html#tab_Whatisnew

Best Regards,
Mihaela

[Radu]

Hi,

Just to update this post, Oxygen 17.0 now has support for relative and absolute CSS positioning:

http://blog.oxygenxml.com/2015/05/visua ... ts-in.html

Regards,
Radu

[Frank Ralf]

Hi Radu,

That's a great enhancement! Thanks.

Frank