Page 1 of 1
Author CSS Stylesheets
Posted: Thu Aug 09, 2012 8:50 pm
by 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;
}
Re: Author CSS Stylesheets
Posted: Fri Aug 10, 2012 2:51 pm
by 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
Re: Author CSS Stylesheets
Posted: Fri Aug 10, 2012 6:14 pm
by 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>
Re: Author CSS Stylesheets
Posted: Mon Aug 13, 2012 10:27 am
by 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
Re: Author CSS Stylesheets
Posted: Mon Aug 13, 2012 2:17 pm
by 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;
}
Re: Author CSS Stylesheets
Posted: Tue Aug 14, 2012 10:18 am
by 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
Re: Author CSS Stylesheets
Posted: Tue Aug 14, 2012 2:41 pm
by 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?
Re: Author CSS Stylesheets
Posted: Tue Aug 14, 2012 2:48 pm
by mihaela
Hi,
Just set the content for the Type element:
Regards,
Mihaela
Re: Author CSS Stylesheets
Posted: Wed Oct 24, 2012 10:08 am
by 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
Re: Author CSS Stylesheets
Posted: Mon May 18, 2015 3:21 pm
by 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
Re: Author CSS Stylesheets
Posted: Tue May 19, 2015 12:11 pm
by Frank Ralf
Hi Radu,
That's a great enhancement! Thanks.
Frank