Superscript vertical alignment

[ewalcher]

Hi, I'm using the web reports demo trying to use superscript in formatting money text data on a report.

I add a text element to the canvas and change the expression to 9⁴⁹ (with 'Allow HTML tags' enabled) with the idea of making the cents part of the price (49) small. The problem is the 49 cents appears vertically higher than the dollar part. I want to display the whole price so it vertically aligned to the top. Checking on the web, there are a variety of CSS style commands you can use but I can't get the designer or the preview to apply the styling but the control preview does.

I've changed the expression to:

Code: Select all

9<sup style="vertical-align: top; font-size: 0.5em; position: relative; top: 0.24em;">49</sup> 

and this is how it's output.

Superscript preview and designer

Superscript designer-preview.png (223.15 KiB) Viewed 4853 times

Ultimately I need the text to appear as below in the designer, preview and the when the preview is saved as a PDF. Is this possible? If so can someone please provide some help?

Requirement

superscript requirement.png (49.69 KiB) Viewed 4853 times

Sample report:

Superscript Price.xml

Sandbox report

(5.27 KiB) Downloaded 345 times

[Lech Kulikowski]

Hello,

We have supported only limited list of HTML tags:
https://stimulsoft.zendesk.com/hc/en-us ... gs-in-text

In the NET version you can use the following:
9<font-size="160">⁴⁹

For the Web version, please check the modified report in the attachment.

Thank you.

[ewalcher]

Thanks Lech, I like the top option in your attached report but is there a way for the preview to show the correctly formatted price like the designer?

[Lech Kulikowski]

Hello,

No. Only solutions which provided in the attached report. Sorry.

Thank you.

[ewalcher]

OK, thanks. Last question. In some cases our customers want to add a $ symbol to the start of the price e.g. $9.49. If I go with bottom option do you have any suggestion on adding a superscript '$' symbol taking into consideration if you use a seperate text box it needs to move left and right when the dollar part is <10 and >= 10, otherwise it won't look appealing.

[Edward]

Hi Ewalcher,

Please try also placing the text boxes into a panel component, then set the DockStyle property of both text components to 'Fill' and 'Right' accordingly, and Alignment of the Price textbox - to 'Align Right'. The Price Textbox also could use AutoSize property set to true.

Similar to the approach in the following topic:
viewtopic.php?f=9&t=39837

Thank you,
Edward

[ewalcher]

Hi Edward, thanks for the reply. I've been trialing the panel and my last issue (I think) is centering the result on the page.

Check out the attached report. Price examples could be $1.59 (dollar with cents), $2 (whole dollar amount), 98c (cents only). Do you have recommendation to centre the resulting price in the middle of the A4 page? At the moment, it's aligning right which doesn't look good.

Superscript - Fixed (Question).mrt

Superscript sample

(21.21 KiB) Downloaded 228 times

[Edward]

Hi Ewalcher,

Thank you for the attached sample report!
Would you like to centre the resulting price inside of the panel, or to align everything in the centre of the A4 page?
Can be the size of the text component fixed, or the width depends on the price + price in words?

Thank you,
Edward

[ewalcher]

Hi Edward, Centre the price in the panel would be best.

Unfortunately the size of the text can't be fixed because the price could be,1.22, 8.59 or 24.99.

[Edward]

Hi Ewalcher,

Please change the report mode to be 'Compilation' instead of 'Interpretation' for the Report object in the designer, so the events could be used for the report.
I also added the Report.EndRender event in the attached report, so the centring actually is happening after all the elements have been rendered.

Code: Select all

foreach (StiPage page in this.RenderedPages)
{
    if (page.Name == "Page1")
    {
		var txt15 = page.Components["Text15"] as StiText;
		var txt14 = page.Components["Text14"] as StiText;
		var txt13 = page.Components["Text13"] as StiText;
		var w15 = string.IsNullOrEmpty(txt15.Text.Value) ? 0 : txt15.Width;
		var w14 = string.IsNullOrEmpty(txt14.Text.Value) ? 0 : txt14.Width;
		var w13 = string.IsNullOrEmpty(txt13.Text.Value) ? 0 : txt13.Width;
		var wdth = w15 + w14 + w13;
		var pageWdth = page.Width;
        txt15.Left = (pageWdth - wdth) / 2;
        txt14.Left = (txt15.Left + w15);
        txt13.Left = (txt15.Left + w15 + w14);
    }
}

In order to debug this event handler in Visual Studio, I sometimes save the report as a '.cs' class and then add it to the solution in Visual Studio.
Please check the modified report template attached.

Superscript-v1.mrt

(9.13 KiB) Downloaded 236 times

Thank you,
Edward