Friday, June 12th, 2009 at 1:16 am by Benny

I’ve finally ticked off some items of my todo list. I wanted to add styled notes to the html output of GRAMPS. I added it to pdf before the 3.1.1 release, but doing it in html meant I needed to understand css better.

In the meantime Gerald wrote a new class to write Html files easily, and Brian complained about the textdoc api being encumbered by style related things. Oh, and the filestructure of the basedoc classes was a mess, and template based html output should be deprecated. It is often like that, you want to do a little thing, but the standards of OSS are sometimes that high that you can only achieve that if you at the same time tackle 6 not directly related things.

That is what I ended up doing though. First reorganizing the code, then factoring the style related stuff in their own classes, then removing the template code replacing it with the general style sheets we already have, and finally adding the note markup to the html output. Time for a picture to display the result, the detailed descendant report, with Nebraska css and some markup notes:

DDR with Nebraska style

Note the error here with the preformatted note that runs into the picture. A minor problem I believe. Not sure it can be fixed due to the nature of the pre tag in html. The example also shows clearly that preformatted text can contain style just as any other note. Whitespace is retained however.

The next picture shows the kinship report with Basic-Ash css, and headers that have been edited via the style editor of the report (add borders and center).

Kinship report with Basic-Ash style

So what I set out to do works. I realize that the fact you can select the css has little influence on the report itself. Every text report has it’s own generated css classes, overriding the main css files. However, this does lay the foundation for others to improve the layout:

• The styles of the report are in a css file, so one can generate the text report, and replace one css file with a custom made one
• In the main style sheets, like Nebraska, support for the style id’s and classes of the most common reports can be built in, allowing the report output to fully integrate with a web site one has up.
• Having html, one can add code to have hyperlinks linking the people. In the detailed descendant report, this could really improve the usability. Perhaps some other developer is interested in this. One could link to the citation section too
• One could use these html reports on the download page of a generated narrative website

Well, I hope some people use this revamped html output, and also hope some developers run away with the idea to improve the layout and other things.

So, please test, test, test this. If you have the development version at hand, try out some text reports, and see if all works. The output can often be improved with some minor changes to the way the report is generated:

1. A paragraphstyle for a header should use the set_header_level function. This will cause the header to be written with a h1 to h6 tag or a <div id=’grampsheading’> tag, instead of just a <p> tag, allowing nice style integration with the css style where the h1/6 tags are already defined.
2. All textreports write out some fixed id’s, and some classes based on the defined style of the report. The new id’s are:
   1. id=”grampstextdoc” : en spans the entire text report
   2. id=”grampsheading” : a small defined heading, used for header_levels > 6
   3. id=”grampsstylednote” : start of part with a styled note, divided in paragraphs

   So if all css stylesheets define these styles, together with h1 to h6, the layout of all text reports can be improved.

3. There should be at least one style with header_level =1 and with a stylename that contains ‘Title’. That will be used as the title of the html page.

So, any webhackers out there, test it, and make it better.

[Update] To show how integration can be achieved, for the above kinship report, the subtitle style has been given a level of 3, so style.set_report_level(3). The consequence is an immediate better integration of the report with the Basic-Ash style:

Kinship with header support

It is better without the borders added, which is the default for this report.

Benny