Bug 492837

Summary:	Income and Expenses report needs some HTML improvements
Product:	[Applications] kmymoney	Reporter:	Glenn <gemdancer>
Component:	reports	Assignee:	KMyMoney Devel Mailing List <kmymoney-devel>
Status:	REPORTED ---
Severity:	minor	CC:	ostroffjh
Priority:	NOR
Version:	5.1.3
Target Milestone:	---
Platform:	Microsoft Windows
OS:	Microsoft Windows
Latest Commit:		Version Fixed In:
Sentry Crash Report:
Attachments:	PDF file showing mis-alignment of Grand Total row

Description Glenn 2024-09-08 19:31:00 UTC

SUMMARY
The Income and Expenses -> Income and Expenses report has several HTML and CSS issues.
This probably applies to many other reports also.

STEPS TO REPRODUCE
1.  Run the report Income and Expenses -> Income and Expenses 
2.  Export the report as HTML
3. Look at the generated HTML file with a text editor, and/or run it through a HTML validator like https://validator.w3.org/nu/

OBSERVED RESULT
1. CSS has "background: "  items with a url which points to the kmymoney installation folder.
That is useless if the file is moved to any place else, and probably even when on this computer.
Delete the background items entirely.

2. Some of the HTML tags are missing a space between the parameters:
<tr class="row-odd"id="solo">  should be <tr class="row-odd" id="solo">

3. The HTML contains id="xxx" many times, with the same ID (see above, id="solo").
An id is supposed to be unique in the page, just used once.
If you want to use the same item multiple times, it should be a class instead of an id.

4. All HTML element values should be in quotes, but some are not:
<font color=#da4453>  should be  <font color="#da4453">
Better yet for this, set a class for the color and use the class instead of specifying the color explicitly each time.

5. Vertical alignment of some table cells needs improvement in the CSS:
  td    { vertical-align: baseline }
It would be better to use "bottom" instead of "baseline".
It looks OK in a browser, but when I save the HTML page a PDF file, in the Grand Total lines, the "Grand Total"  label does not line up with the values (see attached PDF file).
Changing the vertical-align from "baseline" to "bottom" solves the problem.

4. There are no <a> links in the HTML, so don't need the A.xx items in the CSS.

3.  HTML DOCTYPE is specified as HTML 4.01 strict.
It would be nice to update the format for HTML 5.

EXPECTED RESULT
No "background:" CSS items with a url
Spaces between all HTML attributes.
Quotes around all HTML attribute values.
No duplicate "id" values.
Good table cell vertical alignment.
No A.xx items in the CSS

SOFTWARE/OS VERSIONS
Windows:  11

ADDITIONAL INFORMATION
KMyMoney 5.1.3-eefo4f1, installed via kmymoney-5.1-3218-windows-cl-msvc2019-x86_64
You can check the format of the HTML using this page: https://validator.w3.org/nu/

Comment 1 Glenn 2024-09-08 19:34:51 UTC

Created attachment 173456 [details]
PDF file showing mis-alignment of Grand Total row

Forgot to attach the PDF file showing mis-alignment of Grand Total row.

Comment 2 Glenn 2024-09-08 20:29:42 UTC

OK, I understand better now about reports. The displayed report is actually HTML, and the Export just outputs that same HTML to a file.
It is extra work to modify the HTML during the Export.
By definition, Export means it will be used outside of KyMyMoney, so it would be nice if it actually worked properly outside of KyMyMoney.
You folks might want to think about that.

There is a workaround: Convert the HTML to PDF.
As the treasurer for an organization, I use the Export to generate reports to present to the board.
HTML is not a good format for that, so I end up saving them as PDF from the web browser.
Converting to PDF seems to ignore all the HTML issues and it comes out OK,
EXCEPT for the Grand Total row label not lining up with the numbers.

I also use Quickbooks for another organization, and it generates reports directly in PDF format.
Although it is an extra step in KyMyMoney to convert from HTML to PDF, it is more flexible because geeks like me can edit the HTML to customize the report.

Since I don't use the HTML format directly, I guess I should not worry about correctness of the HTML, and just accept it as is.
I have been editing the HTML file to make it more correct, but it does not make much difference in the PDF output, except for that Grand Total row.
I guess I can limit my editing to just that CSS vertical-align value so the Grand Total row comes out right.
Maybe you can just change that, and I would not have to edit the HTML at all (leaving the other problems intact)?

Comment 3 Glenn 2024-09-08 20:52:24 UTC

The HTML validator at https://validator.w3.org/ has pointed out another minor issue, with the DOCTYPE declaration.
Your doctype has a typo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict.dtd">
There should NOT be a space between "4.01" and "//EN".
Next time somebody works on the Report module, they should validate the HTML output and correct all the simple errors, like spacing, missing quotes, etc.

Comment 4 Jack 2024-09-08 22:00:10 UTC

Is the misalignment present when the report is viewed in KMM, when the exported report is viewed in a browser, or does it just show up when printed to PDF?  

On fixing the DOCTYPE and similar things, I have to actually look at the code, but I'm pretty sure that part of the HTML is not generated directly by KMyMoney code, but by a KDE or Qt library, so we'll probably have to pass the bug on to whichever of them is responsible.

Comment 5 Glenn 2024-09-08 22:13:57 UTC

The mis-alignment does not show up when viewing in the browser, only when Printing from the browser.
It shows up in the Print Preview, and the Printed/Saved output.
BUT, the mis-alignment only shows up using Chrome and Edge.
No problem in Firefox.
Maybe it is not caused by KMyMoney at all, but there seems to be an easy(?) fix via KMyMoney (or manual editing, or using Firefox).

Comment 6 Glenn 2024-09-08 22:37:06 UTC

After looking at this more, it is mostly an issue of non-compliance with standards,
and maybe some quirks of the browsers.
The HTML output looks fine.
The PDF is fine, except for the Grand Total label mis-alignment, which is a minor issue.
When I open the browser Inspector, the Console does not show any errors or warnings.
Very low priority, or maybe even close it with no further action.
Maybe let the KDE or Qt library folks know they should validate their HTML output.
Sorry to bother you folks about something so trivial.
You have been very responsive, and I really appreciate that.