Incorrect positioning of text with HTML formatting

Incorrect positioning of text with HTML formatting

Posted by: aresto on 15 December 2021, 2:16 am EST

• 

  aresto

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 15 December 2021, 2:16 am EST

  I’m currently working on creating a report that is processed in C# then sent over to the browser to be viewed in the active report view client.

  The problem I’m facing is happening with Rich Textboxes. Previously, we were using selection ranges but those have been deprecated. Selection ranges still have some functionality and work as expected, but we will not be using them any longer. Attempting to bold and highlight individual ranges of text is not working with this process like it did with the selection range. Trying to wrap a range of text in a span tag styled to bold and set the background of the range to yellow starts to overlap the neighboring text making some letters from the neighboring text completely unreadable. I have tried various things to get around this, but I’m mostly fighting with how Active Reports tries to render these things which I’m hoping there’s a better solution.

  Has anyone run into this same problem and seen a reasonable solution for it? At the moment I may have to stick with double wrapping the highlighted span with another span that adds additional, non highlighted, space around it. The only issue with this is that the spacing required to achieve a clean boundary is context dependent, causing a lot of unnecessary overhead in logic and processing, since the left and right overlap of selected text is not a static amount.

  Thank you,

• 

  aresto

  • Post Options:
  • Link
    Copy

  Posted 15 December 2021, 2:30 am EST

  Quick correction here: using selections also caused this behavior in the HMTL viewer - but wasn’t happening the C# viewer.

• 

  Sergey.Romanov

  

  • Post Options:
  • Link
    Copy

  Posted 22 December 2021, 10:08 pm EST

  Hello ,

  could you please attach the sample of html markup?

  Thanks,
  
  Sergey Romanov.

• 

  aresto

  • Post Options:
  • Link
    Copy

  Posted 27 December 2021, 6:29 am EST

  We tested a lot of different setups to reduce the issue but we were unable to find a simple solution that did actually work. Another colleague found similar results working on a different report. It actually seemed to happen with every tag we tried that had a little bit of styling. Even just a strong tag.

  I found that using RTF encoding the results were better, but the letter spacing was still incorrect - and wasn’t a viable option as the font information was not retained in render.

  Thanks,

  htmlformatsnippet.zip

• 

  Sergey.Romanov

  

  • Post Options:
  • Link
    Copy

  Posted 27 December 2021, 7:04 pm EST - Updated 30 September 2022, 6:13 am EST

  Hello ,

  thank you for the sample. i have attached the screenshot of preview in JSViewer and it looks correct for me. i am using v15.2

  

  1234×491 11.6 KB

  Thanks,
  
  Sergey Romanov.

• 

  aresto

  • Post Options:
  • Link
    Copy

  Posted 29 June 2022, 10:02 am EST

  Hello, sorry I took a bit to respond - we’re still running into the same problem.

  I upgraded to 16.1, including the npm module, and still saw the same formatting errors. I tried out version 15.2.0 as well and there was still issues with it - the same issues. In fact, there was a regression of sorts upgrading to different versions where data was missing from what was working before. Did you use the Html property for a rich textbox during the format event?

  We currently update the Html property of the RichTextbox element during the format event.

  Thanks,

• 

  akshay.rajput

  

  • Post Options:
  • Link
    Copy

  Posted 3 July 2022, 4:33 pm EST - Updated 30 September 2022, 6:13 am EST

  Hi Andrew,

  Unfortunately, I was unable to replicate this behavior on my end.
  
  For testing this I created a simple code based section report with RichTextBox and loaded the HTML you have attached in a previous reply. Then I loaded the report in our JSViewer MVC Sample(https://github.com/activereports/WebSamples16/tree/main/JsViewerSamples/JSViewer_MVC), after upgrading the sample to ActiveReports 16.1.2. I have attached the sample along with this reply.
  
  

  

  1680×1040 22 KB

  Please share a runnable sample replicating the error or edit the attached sample such that it reproduces the behavior and send it back to us for further investigation.

  HTMLTestJSViewer.zip

• 

  aresto

  • Post Options:
  • Link
    Copy

  Posted 20 July 2022, 4:42 am EST

  Thank you for the help. Looks like we got it solved. Given that you’ve created a working version I figured I’d make my own report viewer project from scratch with the exact same report with the exact same data and found that it was working (however it doesn’t handle newlines in html and I had to write code to fix that much). But I did get a working version nevertheless.

  So the problem was with our React setup. Each page gets wrapped in a tree, and in that tree a CSSBaseline gets added to each page - somehow it was interfering with the report viewer layout. It may have had something to do with the inherited styles inheriting a bad box-sizing model, but we ended up just removing the baseline for whenever we hit the report viewer url. The library that happened to cause this issue was Mui.

  Thanks again!

• 

  akshay.rajput

  

  • Post Options:
  • Link
    Copy

  Posted 20 July 2022, 7:06 pm EST

  Hi Andrew,

  Happy to know that you were able to figure out the problem and resolve it! Also, thanks for sharing the solution with us, it will help others who may be experiencing a similar problem.