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:	ralf.habacker
Priority:	NOR
Version First Reported In:	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 Income and Expense report from kmymoney-master-4353-windows-cl-msvc2019-x86_64.7z

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.

Comment 7 Ralf Habacker 2025-05-27 17:35:31 UTC

(In reply to Glenn from comment #0)

> 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).

With the commits for bug 492831 a special PDF export of reports has been added, so this should no longer be a problem.

Comment 8 Glenn 2025-06-04 04:00:47 UTC

Created attachment 182015 [details]
Income and Expense report from kmymoney-master-4353-windows-cl-msvc2019-x86_64.7z

I just downloaded the latest Master version: 
kmymoney-master-4353-windows-cl-msvc2019-x86_64.7z
which Help About says is 5.1.95-ddea598
FYI, I am running Win 11 Home 24H2

The "Income and Expenses This Year" report has serious problems.
There is some raw CSS at the top of the report (see attached screenshot).
There is not enough space between the columns, so the numbers squish together.
When I tried to Export as PDF, no PDF file was created (a no error message of any sort).

Comment 9 Glenn 2025-06-04 04:05:12 UTC

Comment on attachment 182015 [details]
Income and Expense report from kmymoney-master-4353-windows-cl-msvc2019-x86_64.7z

I downloaded the latest Master verion
kmymoney-master-4353-windows-cl-msvc2019-x86_64.7z
The Help -> About KMyMoney says it is 5.1.95-ddea598
FYI, I am running Win 11 Home 24H2

The "Income and Expenses This Year" has serious problems.
There is raw CSS text at the top of the report (see screenshot).
There is not enough space between columns, so the numbers squish into each other.
When I tried to Export as PDF, no PDF file was created (and no error message of any sort).

Comment 10 Glenn 2025-06-04 04:15:45 UTC

I don't know what happened, but when I closed and re-opened KMyMoney, the report looks fine. No CSS text at the top, and nice spacing between the columns. However, the Export to PDF still does not produce any sort of output file. The HTML export works, but not the PDF export.

Comment 11 Thomas Baumgart 2025-06-05 16:29:13 UTC

Git commit 0ef57e13e217132df998e65cc3e0dc09aaf3878e by Thomas Baumgart.
Committed on 05/06/2025 at 16:28.
Pushed by tbaumgart into branch '5.2'.

Fix HTML syntax in exported reports

- Enclose all font color values in quotes
- Fix HTML header
- Remove qrc links which only works in Qt
- Remove PDF export in Windows since it does not work properly

The suggested change to HTML5 did not work, since Qt5
views do not support it (at least I could not get it to work)

M  +1    -1    kmymoney/html/kmymoney.css
M  +4    -4    kmymoney/plugins/views/reports/core/listtable.cpp
M  +1    -2    kmymoney/plugins/views/reports/core/pivottable.cpp
M  +3    -3    kmymoney/plugins/views/reports/core/reporttable.cpp
M  +8    -2    kmymoney/plugins/views/reports/kreportsview.cpp
M  +3    -0    kmymoney/plugins/views/reports/kreportsview_p.h

https://invent.kde.org/office/kmymoney/-/commit/0ef57e13e217132df998e65cc3e0dc09aaf3878e

Comment 12 Thomas Baumgart 2025-06-05 16:30:29 UTC

Git commit c5416759d13e38caea7af05524f96a0f0ebe143c by Thomas Baumgart.
Committed on 05/06/2025 at 16:30.
Pushed by tbaumgart into branch 'master'.

Fix HTML syntax in exported reports

- Enclose all font color values in quotes
- Fix HTML header
- Remove qrc links which only works in Qt
- Remove PDF export in Windows since it does not work properly

The suggested change to HTML5 did not work, since Qt5
views do not support it (at least I could not get it to work)
(cherry picked from commit 0ef57e13e217132df998e65cc3e0dc09aaf3878e)

M  +1    -1    kmymoney/html/kmymoney.css
M  +4    -4    kmymoney/plugins/views/reports/core/listtable.cpp
M  +1    -2    kmymoney/plugins/views/reports/core/pivottable.cpp
M  +3    -3    kmymoney/plugins/views/reports/core/reporttable.cpp
M  +8    -2    kmymoney/plugins/views/reports/kreportsview.cpp
M  +3    -0    kmymoney/plugins/views/reports/kreportsview_p.h

https://invent.kde.org/office/kmymoney/-/commit/c5416759d13e38caea7af05524f96a0f0ebe143c

Comment 13 Glenn 2025-06-05 16:47:05 UTC

Thanks for continuing to work on this. I seems to be harder than you would expect.