Pages: 1
Print
Author Topic: attribute display and styling  (Read 6476 times)
sapraaman
Member

Posts: 17


« on: July 24, 2010, 02:03:39 AM »

Hi,

I have asked the portion of this question before, about how to display all non-null attributes. This is an extension of that question.

1. Is there a way to specify in css that we want to display all non-null attributes for all the elements, rather than specifing it for each element?

2. The attributes do get displayed with prefix-format trick. However, the attribute displayed cannot be distinguished from the content of the element. Is it possible to apply style to displayed attributes, like color and border? Again, this needs to be done once for all element attributes rather than specify separately for each element.

3. The attributes are displayed before content. Is it possible to display these attributes next to element name, within the same border as the element name? That would be ideal.

Thanks,
Aman
Logged
Derek Read
Program Manager (XMetaL)
Administrator
Member

Posts: 2507



WWW
« Reply #1 on: July 26, 2010, 03:16:50 AM »

1. Try something like this:
* {
   prefix-format: "%attribute-list;";
}


2. The prefix-format property is proprietary and because it fulfills a very specific purpose it cannot be styled (historically, because it is not part of standard CSS no work has been done on it since W3C defined :before and :after selectors and the content property). In order to do what you want here you will need to try standard CSS. Something like so will get you fairly close:

selector:before[attributename] {
  content: "some descriptive text: " attributename " more descriptive text if you like";
  display: block;
  color: blue;
  font-size: 2em;
  background-color: yellow;
  etc...
}


To do this for all elements refer to answer #1 (ie: replace the selector and settings for every element with one or more * selectors).

3. No.
« Last Edit: July 26, 2010, 10:58:59 AM by Derek Read » Logged
sapraaman
Member

Posts: 17


« Reply #2 on: July 27, 2010, 08:06:14 AM »

Thanks Derek.

The first one works. But not of much use to us because there cant be styling

Tried the second one. Could not make it work. We have an element called "cit", with attributes "year" and "jur". So, how would the style you suggested look like so that only non-null attributes are displayed.

I tried the following:

cit:before {
  content: "Attributes: [year="attr(year)" jur="attr(jur)"]";
  display: block;
  color: blue;
  font-size: 1em;
  background-color: yellow;
}

However,

1. I will have to programatically set this for all attributes for all elements. Can we shorten it somehow so that atleast all attributes can be taken care of automatically? You hinted on usage of star in the last solution, care to elaborate please.

2. The above automatically starts a new line after the element, displays all the attributes and then again inserts a new line. Is there a way to avoid those 2 newlines?

3. The above inserts non-null attributes as well. We need some mechanism to avoid that.

Somehow, this is becoming a critical thing for the editors to move to xmetal and seems like the last block.

Thanks,
Aman
Logged
mag3737
XMetaL Evangelist
Administrator
Member

Posts: 116

I even use XMetaL to write my business letters.


« Reply #3 on: July 27, 2010, 04:57:42 PM »

You may be able to gain some benefit from the [attrname] selector.  This will match all elements that have a particular attribute set, regardless of the attribute value:

Code:
[attr1]:before {
content: "attr1=" attr(attr1);
background-color: yellow;
color: blue;
}

Then you would have to make combinations of attribute names to build up all combinations of attribute assignments:

Code:
[attr1][attr2]:before{
content: "attr1=" attr(attr1) ",attr2=" attr(attr2);
background-color: yellow;
color: blue;
}

[attr1][attr3]:before{
content: "attr1=" attr(attr1) ",attr3=" attr(attr3);
background-color: yellow;
color: blue;
}

[attr2][attr3]:before{
content: "attr2=" attr(attr2) ",attr3=" attr(attr3);
background-color: yellow;
color: blue;
}

[attr1][attr2][attr3]:before{
content: "attr1=" attr(attr1) ",attr2=" attr(attr2) ",attr3=" attr(attr3);
background-color: yellow;
color: blue;
}

If you have N different attributes you would need to write 2^N CSS selectors, but this is better than you would get for doing it element-by-element PLUS dealing with all the attribute combinations per element.

If the properties you are assigning for all combinations are as "consistent" as the examples I gave above, or at least programmatically definable you could also generate and apply the above CSS via script instead of having it in the CSS file in the customization.
Logged

Tom Magliery
JustSystems Canada, Inc.
sapraaman
Member

Posts: 17


« Reply #4 on: July 28, 2010, 01:10:10 PM »

Thank you. I tried it, and it works, well sort of.

1. It is showing all the styling in normal view as well. That will be completely unacceptable. We need to show these styles (for attributes) only in tags on view. Any ideas? The problem is same with element specific before tag (with attribute).

2. So, you are suggesting that I write document level macro for On_View_RefreshCssStyles and in that, write all permutations for all attributes.

    a. At what all times is this macro called? First time a document is opened for a DTD or everytime a document is opened for the DTD?

    b. 2^N can be quite a big number if the DTD is big, which it is in our case. For a conservative number of 50 unique attributes, that will slow down XMetal a lot.

    c. If I can't do (b) because of performance constraints, what are my options? Even with element specific selector (with 2^N attributes for each selector), the performance can be an issue.

Thanks for your help,
Aman
Logged
Derek Read
Program Manager (XMetaL)
Administrator
Member

Posts: 2507



WWW
« Reply #5 on: July 29, 2010, 01:44:02 PM »

Regarding the 2^N problem, I don't believe there is a better solution to your particular issue if CSS is how you feel you must render them. Perhaps you need to be a little bit picky about which attributes you choose to expose to the author. If there are a large number of attributes in the schema it might be a good idea to ask the authors which ones they really feel the need to see all the time and then let them check the status of the rest by using the standard methods:
a) Hover over the opening or closing tag in TagsOn view.
b) Use the Attribute Inspector.
c) Use an XFT form you design.
d) Use Plain Text view.

I can think of other more complicated ways to expose these values to the author. They would likely take a considerable amount of work for you to implement. Essentially the Resource Manager can host ActiveX controls so if you wish to provide an alternative rendering completely independent of XMetaL Author's rendering engine you might do that there. For example, you might try to render your XML with all the attributes exposed inside Internet Explorer, which can be hosted in the Resource Manager. You could use CSS or XSLT there to get the rendering you like. Or you might even write a completely new COM object (ActiveX control) and host that in the Resource Manager instead.

You are correct to assume that if your CSS is overly complex you may see a performance hit. You will need to test this to be sure with your particular schema and everything else you have in your customization to see if that is acceptable.

Regarding your (latest) question #1:

By default both Tags On and Normal view use the same CSS for styling. In order to have different CSS for these two different views you will either need to swap the CSS file (by changing the name of it) in the On_View_Change event or use one of the more advance techniques to inject CSS via script that is new to 6.0.

One example of how to do this is provided with the Journalist demo, accessible via the Help > Samples menu. Macros are connected to a special toolbar called "Structure View Examples". This does not demonstrate making changes to CSS for Tags On and Normal view, it shows how it can be done for Structure View. However, the same technique can be used with the only difference being that you would put similar code into an event like On_View_Change.

Another example is provided with the DocBook demos that are accessible via the Help > Samples menu. Use the menu items within the sub menu called "Document Display" that is contained within the "DocBook" menu to run the scripts provided with the demo.

A third option might be to use the Selection.ContainerStyle or Range.ContainerStyle APIs. This API (it is the same for both Selection and Range objects) allows you to style individual elements in the document over and above the CSS that is set for the selector representing that element (ie: this API essentially cascades more CSS after any other CSS is rendered). However, this API does not currently let you style :before or :after pseudo-elements because there is no way to get to those via DOM or Range objects and this API is a property of the Range object. You can use it to render alternative content for an entire element however, which is why I mention it. The Journalist demo includes script that demonstrates this when a <PubDate> element is present in the document.

A fourth option might be add the CSS containing your :before content for attribute display to the Structure View CSS file and leave it out of the regular CSS file altogether. Your authors could then open the Structure View when they want to see their attributes and not need to worry about switching between Tags On and Normal view at all, they could choose their preferred view for editing. You could even provide alternative views for the Structure View as with the Journalist demo, one where certain attributes are displayed, another where others are displayed, one specifically for navigating between large sections of the document, a more granular "show all elements" view, etc.

Regarding your latest question #2:

I think this is what was being suggested, yes. However, there are many other options (as I have listed above).
Logged
Pages: 1
Print
Jump to: