> is styled differently, and text-align in oxy_label styl

Post here questions and problems related to editing and publishing DITA content.
kirkilj
Posts: 110
Joined: Fri May 14, 2010 12:14 am

> is styled differently, and text-align in oxy_label styl

Post by kirkilj »

I have a DITA <note> element:

<note>This is a DITA note element. <ph>This is an embedded ph element that is styled in this horrific background-color.</ph> If I use the < and > entities as in "3 < 4 or 4 > 3", the the (>) symbol is rendered with a different background-color (#F0F0F0), which I cannot find in any CSS file in the entire Oxygen installation tree. If the > symbol is entered in Oxygen, then it is inserted as the symbol rather than the entity and the background-color is not overridden. These files were entered by a different editor.</note>

Here's my debug CSS:

*[class~="topic/note"]{
margin-left: 1.5in;
margin-right: 1.5in;
margin-top: 14pt;
margin-bottom: 14pt;
background-color: #FFC296;
}

*[class~="topic/note"]:before{
display: block;
content:
oxy_label(
text, "Note\A",
styles, "font: Helvetica; font-weight: bold; font-size: 14pt;"
width, 8em
)
}

*[class~="topic/note"] * {
background-color: #FFAFEE;
}

I have two questions:

1. What is the source of the styling difference for the > compared to the < entities?
2. If I try to add a "text-align: center" to the oxy_label to center the word "Note", it indents it by about 1 cm, but does not center. Is this an incorrect use of an oxy_label styles attribute?

John
alex_jitianu
Posts: 1017
Joined: Wed Nov 16, 2005 11:11 am

Re: &gt; is styled differently, and text-align in oxy_label

Post by alex_jitianu »

Hello John,

1. The entities have some default styling (one of which being the background color) but you can override them from CSS by using some additional custom selectors. For the entity it would be something like:

Code: Select all


@namespace oxy "http://www.oxygenxml.com/extensions/author";
oxy|entity {
background-color: #FFC296 !important;
}
All the custom selectors are described here: Additional custom selectors
2. In your CSS there is a 8em width allocated for the label. The centering will be done in this space. If you put a background color on oxy_label you will notice that the text is indeed centered with respect to its allocated area. But in your situation I don't think you need oxy_label, the following rule should suffice:

Code: Select all


*[class~="topic/note"]:before{
display: block;
font-family: Helvetica; font-weight: bold; font-size: 14pt;
text-align:center;
content:"Note\A"
}
Best regards,
Alex
Post Reply