Hi Shahnawaz,

Did you consult the CSS manual? It has a great table of all of the CSS properties and their acceptable values and XPP-specific values. Elsewhere, it also has lots of examples.

If you looked up the "display" property, I think you'll find that it's values are (only) things like "block", "-xpp- line", "-xpp-page", etc.

I think that "-xpp-macro()" has to be used in the "content" property:

{content: -xpp-macro(macro_name)

Try that and I think you'll have better success.

Thanks Jonathan for the quick response but I already tried that way but no success.  

For example, I want the content of the paragraph to be superior, so I added below line in CSS: 

para {content: -xpp-macro(sup)}

Shahnawaz,

You can only use the content property in an ::before or ::after rule.
The following should work:

para::before { content: -xpp-macro(sup); }

This worked. Thank you Bart.

Shahnawaz,

Tip for future posts: Be more specific.

IMO, it's always better to give more details than less details. Anything "extra" can just be ignored, but it's very difficult to help diagnose anything without all the necessary details.

In your original post, you didn't show what "element" you were specifying, or I would have caught that problem as well. 

Sure John. I will be more specific. 

Thanks and Regards
Shahnawaz

Shahnawaz,

At second throughts it will have kind of worked.
The sup macro will move the baseline of the text in the para, but not change its size.

The sup will be active for the text you generate in the ::before rule.
Like this:
para::before { content: -xpp-macro(sup) "generated text "; }
The "generated text" will be superior, but the text that follows the para will be in the normal point sizewith its baseline will moved higher.

The reason for this is as follows:
The ::before rule will emit the sup macro. But once the content of the ::before rule is emitted, the system will apply again all properties for the normal para rule (even if you do not have an explicit para rule in your CSS there will be an inherited or default value that comes into play). This will reset the font-size property to its normal value.

But what about the vertical-align property you will ask. Because that should reset the baseline of the text to the initial value of baseline. Well that part remains a mystery to me. It does not seem to work even if you put an explicit vertical-align in the para rule. It does move the text but not back to the baseline.

Just in case somebody was wondering why the sup macro was kind of half working.
But maybe I am the only person in the XPP world that worries about things like that.

Thank you Bart for the detail explanation. 

Actually, my objective was to use the xymacro in CSS workflow and not to superscript the text. That was just an example to show how I was trying to call xymacro in CSS.

Sorry, I cannot help to you resolve the mystery of vertical-align.

Thanks and Regards
Shahnawaz  

I think I found the explanation to the move baseline miracle.
From my testing it seems like the vertical-align property has been implemented as a relative thing. So it will add or substract the number you gave it to whatever the baseline has already been set.>
If you do the following:

para::before {
 content: -xpp-macro(mb, '-3pt') "generated text ";
}

And you want the text that follows the para tag to align with the "generated text" you need to set up your para as follows:

para {
 vertical-align: -3pt;
}

This will make the para text move back to its original baseline. (note the change in direction here)

Setting the vertical-align property to 'baseline' just keeps it on the same -3pt baseline from the ::before rule.

I think I will open up a ticket on this.
I would expect that the vertical-align: baseline; would return to the original baseline of the current line, just like the mb;0 does