Page 1 of 1
Superscript vertical alignment
Posted: Sun Apr 01, 2018 9:06 am
by 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<sup>49</sup> (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 7867 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 7867 times
Sample report:
Re: Superscript vertical alignment
Posted: Tue Apr 03, 2018 10:30 am
by 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"><sup>49</sup>
For the Web version, please check the modified report in the attachment.
Thank you.
Re: Superscript vertical alignment
Posted: Tue Apr 03, 2018 11:56 am
by 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?
Re: Superscript vertical alignment
Posted: Tue Apr 03, 2018 12:57 pm
by Lech Kulikowski
Hello,
No. Only solutions which provided in the attached report. Sorry.
Thank you.
Re: Superscript vertical alignment
Posted: Tue Apr 03, 2018 9:57 pm
by 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.
Re: Superscript vertical alignment
Posted: Thu Apr 05, 2018 2:02 am
by 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
Re: Superscript vertical alignment
Posted: Tue May 15, 2018 9:00 am
by 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.
Re: Superscript vertical alignment
Posted: Thu May 17, 2018 6:33 am
by 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
Re: Superscript vertical alignment
Posted: Fri May 18, 2018 3:35 am
by 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.
Re: Superscript vertical alignment
Posted: Mon May 21, 2018 6:23 am
by 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.
Thank you,
Edward