nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Do Text Blocks Support CSS

phancox

Do the "Text Block" controls from the BIRT palette (i.e., not Labels or Dynamic Text") support in-line or embedded CSS? Or only basic HTML?<br />
<br />
For example, can I write:<br />
<pre class='_prettyXprint _lang-auto _linenums:0'>
<style type="text/css">
p {color: blue;}
</style>
Here is my blue text.</pre>
I know this particular example is simple enough to do without CSS, but I would like to use CSS in more complicated scenarios if possible.<br />
<br />
I have tried but it doesn't appear to work; just checking whether it is supposed to. If it isn't supported are there alternate approaches that could be used?

Find more posts tagged with

Comments

mwilliams

You are right, it doesn't seem to work when you try to use embedded CSS. The standard <p style="color: blue">This is my blue text.</p> seems to be the only way it works. If I find anything further out on this issue, I'll post in here.

krahe

I too need to be able to control the style of HTML text elements (e.g. <H1>, <H2>, <P>, etc.) in multiple Text objects in a report. So far it seems there's no way to do it. I need to pre-process my HTML to inject variable values before it's rendered anyway, so perhaps I could use the same mechanism to inject <FONT> attributes.

mwilliams

What determines the font attributes in your case? A CSS file as well? Or a user chosen value? Or what?

krahe

<blockquote class='ipsBlockquote' data-author="'mwilliams'" data-cid="81827" data-time="1314136259" data-date="23 August 2011 - 02:50 PM"><p>
What determines the font attributes in your case? A CSS file as well? Or a user chosen value? Or what?<br /></p></blockquote>
A CSS file would be fine, or even some attribute or user property set on the report itself. I'm not particular at this point if there's something that would work. I could even inject my own <head> tag containing style information if there were some way to get that to work.

krahe

I have actually come up with a workaround that achieves nearly everything I need. What I do is specify a style attribute for all the elements in my HTML documents, with a value that is merely a placeholder/variable name that can be substituted when the report is run with actual style information:<br />
<pre class='_prettyXprint _lang-auto _linenums:0'><h1 style="[%h1]">Executive Summary</h1>
<p style="[%P]">This Energy Solution Profile is design to help understand energy use in the following areas:</p>
</pre>
I specify style information in the same format used by CSS, and store it as the default value of a report parameter, in this case named "RPStyles":<br />
<pre class='_prettyXprint _lang-auto _linenums:0'>h1 { font-weight: bold; color: red } p { font-style: italic; font-weight: bold; color: green }</pre>
Next I add an initialize script to the report and use it to parse the style information into a global object/associative array where the property names are the style identifiers and the values consist of a style specification that can be inserted into an HTML style attribute. It also defines a global method, setStyles(), that can be invoked by any expression and will substitute all the style placeholders/variables in a block of HTML with actual style specifications.<br />
<pre class='_prettyXprint _lang-auto _linenums:0'>function setStyles( aStr )
{
var lNewStr = aStr;
var mElementStyles = reportContext.getPersistentGlobalVariable( "mElementStyles" );
var lStyleVarPos;
while ( (lStyleVarPos = lNewStr.search(/\x5B%\S+\x5D/)) != -1 )
{
var lStyleName = lNewStr.substring( lStyleVarPos + 2, lNewStr.indexOf( "]", lStyleVarPos ) ).toUpperCase();
lNewStr = lNewStr.replace( new RegExp("\\x5B%" + lStyleName + "\\x5D", "ig"), mElementStyles[ lStyleName ] );
}

return( lNewStr );
}

var lStyles = params["RPStyles"].value;
lStyles = lStyles.replace( "\n", " " );
var mElementStyles = {};
var lCSSStylePos;
while ( (lCSSStylePos = lStyles.search(/\S+\s*\x7B.*\x7D/)) != -1 )
{
var lStyleNameEnd = lCSSStylePos + lStyles.substring( lCSSStylePos ).search(/\s/);
var lStyleName = lStyles.substring( lCSSStylePos, lStyleNameEnd ).toUpperCase();
var lStyleSpecEnd = lStyles.indexOf( "}", lStyleNameEnd );
var lStyleSpec = lStyles.substring( lStyles.indexOf( "{", lStyleNameEnd ) + 1, lStyleSpecEnd );
mElementStyles[ lStyleName ] = lStyleSpec;
lStyles = lStyles.substring( lStyleSpecEnd + 1 );
}
reportContext.setPersistentGlobalVariable( "setStyles", setStyles );
reportContext.setPersistentGlobalVariable( "mElementStyles", mElementStyles );</pre>
In the Data Sets that retrieve HTML from the database, I simply create a Computed Column that cooks the raw value coming from the database, using setStyles() to set all the style information:<br />
<pre class='_prettyXprint _lang-auto _linenums:0'>setStyles( row["TEXT"] )</pre>
As an alternative I can invoke setStyles() in any Text item that is to display HTML:<br />
<pre class='_prettyXprint _lang-auto _linenums:0'><VALUE-OF format="HTML">setStyles( row["TEXT"] )</VALUE-OF></pre>
I can easily change styles by simply modifying the parameter's default value. I can also substitute entirely different style information by supplying a different value for the RPStyles parameter at runtime.

krahe

Just one footnote. You cannot control the style of the <body> of an HTML document using the mechanism described above. Instead, it appears that BIRT applies the style set on the Text item itself to <body> content. This doesn't complicate things greatly, however, since you can define a BIRT Style to be applied to all Text items that contain HTML, and update it as necessary to affect the style of all HTML Text items in the report.

mwilliams

Thanks for the update. This might be a good workaround to post in the devShare for others to be able to find easier than in here!

krahe

I very well may do that, though I'll probably wait until I've had a chance to use and refine it a bit more, as I'm still very much a CSS neophyte.

mwilliams

Sounds good. You'd also be entered in this:

http://www.birt-exchange.org/org/wiki/index.php?title=DevShare_Contributor_of_the_Month_Contest

Arif shah

<p>Hi,</p><p> </p><p>If I put my CSS code in a CSS file seperately, Can I use that CSS in my text element html body?</p>