Pages: 1
Print
Author Topic: Custom CSS and PI's: little big problem  (Read 5107 times)
barbwire
Member

Posts: 44


« on: September 11, 2012, 04:15:24 AM »

Hi,

I'm having strange situation, which requires some custom css. I have tried everything, but I'm not able to solve this issue. Maybe you guys can help me.

I have topic (code cleaned):

Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE asdd PUBLIC "asdad" "asdd">
<root class="- topic/topic" id="asd" something="true">
<?mypi true?>
<title>Hi world!</title>
<body>
  <p>Hi!</p>
</body>
</root>

Now.... I have CSS-file (ditabase-base.css).

This works OK:

Code:
[class~="topic/topic"]>[class~="topic/title"] /* H2 */ {
display: block;
font-weight: lighter;
font-size: 140%;
}

[class~="topic/topic"][something="true"].[class~="topic/topic"]>[class~="topic/title"]{
background-color: red;
color: white;
}

It works fine. Title gets background-color red. But when the file has PI and the title background-color is supposed to be black, it ain't work anymore. This is my code, which doesn't work:

Code:
$PROCINS[xm-pi-target="mypi"][xm-pi-data="true"].[class~="topic/topic"]>[class~="topic/title"]{
background-color: green;
color: white;
}

It just doesn't work and I am amazed. Can somebody help me? What the hell I'm doing wrong? :) I have tried all kind of combinations and nothing seems to work. Please, please, help me! :)
Logged
Derek Read
Program Manager (XMetaL)
Administrator
Member

Posts: 2621



WWW
« Reply #1 on: September 12, 2012, 11:12:29 AM »

Periods inside a selector won't do anything in XMetaL so we should start by removing those just to make things clear and not introduce any other issues. The W3C discusses this type of selector in the context of HTML only and XMetaL doesn't recognize them. I'm actually a little surprised that it seems to be ignoring them but still making sense of the rest of the selector. The equivalent to using a period is supported in XMetaL though and that is [attr~="value"] which you are using here.

What I suspect is happening with your PI selector is that the support we added for styling PIs was meant to be used just for that; to style the PI itself. I don't think any testing has been done to include a PI in a selector where the styling affects something else. For this reason it is very possible that what you are trying to do is currently unsupported. Not actually that surprising if you consider that the ability to style PIs is a CSS extension that we invented for XMetaL's rendering engine (at the request of a few clients a few years ago).

I'll need to confirm that though. The developer that does most of the coding for the formatting engine would be the best person to ask. He's on vacation at the moment.
Logged
Derek Read
Program Manager (XMetaL)
Administrator
Member

Posts: 2621



WWW
« Reply #2 on: September 12, 2012, 02:07:23 PM »

My assumption was correct. The type of selector you want to build that includes a PI isn't supported. You will need to find another way to uniquely identify the element in question.

If you can't build an alternate selector (possibly requiring you to add more markup to the XML) you might wish to look at styling the element using the Range.ContainerStyle API inside a script. Your script would need to find the element.
« Last Edit: September 12, 2012, 02:10:54 PM by Derek Read » Logged
barbwire
Member

Posts: 44


« Reply #3 on: September 13, 2012, 12:15:56 AM »

My assumption was correct. The type of selector you want to build that includes a PI isn't supported. You will need to find another way to uniquely identify the element in question.

If you can't build an alternate selector (possibly requiring you to add more markup to the XML) you might wish to look at styling the element using the Range.ContainerStyle API inside a script. Your script would need to find the element.

Damn. Thanks anyway. Have to use different attribute on the root element or I just have to make DTD specialization for this problem.

Well, maybe in next XMetal version this works... ;)
Logged
Derek Read
Program Manager (XMetaL)
Administrator
Member

Posts: 2621



WWW
« Reply #4 on: September 13, 2012, 05:13:32 PM »

I'd really consider using Selection/Range.ContainerStyle() unless you really don't want to do any scripting.
« Last Edit: September 13, 2012, 06:25:56 PM by Derek Read » Logged
Derek Read
Program Manager (XMetaL)
Administrator
Member

Posts: 2621



WWW
« Reply #5 on: September 14, 2012, 03:30:17 PM »

Here's a script example of something that might get you close to what you need:

Code:
//XMetaL Script Language JScript:
var rng = ActiveDocument.Range;
var nodes = ActiveDocument.getNodesByXpath("//topic/processing-instruction('mypi')/../title");
for(i=0;i<nodes.length;i++) {
rng.SelectNodeContents(nodes(i));
rng.ContainerStyle="background-color:green; color:white;";
}
« Last Edit: September 14, 2012, 03:31:59 PM by Derek Read » Logged
barbwire
Member

Posts: 44


« Reply #6 on: September 16, 2012, 11:45:19 PM »

Here's a script example of something that might get you close to what you need:

Code:
//XMetaL Script Language JScript:
var rng = ActiveDocument.Range;
var nodes = ActiveDocument.getNodesByXpath("//topic/processing-instruction('mypi')/../title");
for(i=0;i<nodes.length;i++) {
rng.SelectNodeContents(nodes(i));
rng.ContainerStyle="background-color:green; color:white;";
}
Thank you. Have to try this as soon as possible.
Logged
barbwire
Member

Posts: 44


« Reply #7 on: September 18, 2012, 08:17:25 AM »

Well I tried and it indeed worked!

Big thanks to you Derek! I owe you a beer or something! :)

I did not use CSS at all. I did the customization to the *.mcr file. Tested with in several test cases and it worked.

Code:
var pathpi = ActiveDocument.getNodesByXPath("//topic/processing-instruction('my-pi')");
  var pathtitle = ActiveDocument.getNodesByXPath("//topic/title");
  var rng = ActiveDocument.Range;
  var pathattr = ActiveDocument.getNodesByXPath("//topic/@something");
  if(pathpi.length > 0){
    var docpathpi = pathpi.item(0);
  var docPath = docpathpi.nodeValue;      
  if(docPath == "true"){
rng.SelectNodeContents(pathtitle(0));
rng.ContainerStyle="background-color:transparent; color:black;";
  }
  else if(docPath == "false"){
if(pathattr.length > 0){
var attrvalue = pathattr.item(0).nodeValue;
if(attrvalue == "true"){
rng.SelectNodeContents(pathtitle(0));
rng.ContainerStyle="background-color:red; color:white;";
}
}
  }
  }
  else if(pathtitle.length > 0){
if(pathattr.length > 0){
var attrvalue = pathattr.item(0).nodeValue;
if(attrvalue == "true"){
rng.SelectNodeContents(pathtitle(0));
rng.ContainerStyle="background-color:red; color:white;";
}
}
  }
Logged
Pages: 1
Print
Jump to:  

email us