In the coming days, I’ll try to write a longer post with more technical details about my recent work on the project. Until then, here’s a short screencast showing some of the new features; interactive table resizing and cell selections. This time it includes me speaking a bit (!). And the format is now WebM/VP8 instead of Ogg/Theora. White areas in the capture got some weird tinting, but that’s a screencasting problem and not my code :)
Just a quick follow-up post to give a happy end to my previous woes. Without further ado, I give you Scribus rendering all 43 cases of border joins mentioned in the previous post (I had forgot two of them before):
You’ll have to excuse the witty title, but I’ve been working on table borders. Specifically collapsed multi-line borders, properly joined at intersections. It is hard work I tell you. No, really, it’s downright ridiculous.
Since a table cell may span multiple rows or columns, along each side of the cell, it may share its border on that side with N neighboring cells, or with the table border. Along each such shared border segment, the neighboring border along that segment must be identified and collapsed with the cell border according to certain rules. The most commonly used rules are those specified in the CSS collapsing border model, sometimes with slight modifications. This is also what I’m aiming for in my implementation.
Lines in Scribus can traditionally be represented by an arbitrary number of lines, each with its own color, width and style, drawn on top of each other, thin over thick. Like this:
In trying to keep in style, I’d of course like to support these types of lines in my implementation of table borders. This is also supported by competing products such as InDesign.
Borders from different cells, or from the table itself, meeting at an intersection in the table should optionally be joined. Joining is the process of adjusting the start and end points of the border, as well as adjusting the start and end points of the individual lines constituting the border, in order to make a “best effort” join with any other borders meeting at the intersection.
This is where the fun begins. I’ve identified at least these 41 possible cases of joins:
The Past ~Two Weeks
In the past two weeks most of my work has been trying to find a joining/painting algorithm that correctly identifies all the cases above and performs the necessary adjustments.
To paint an entire table, the painting algorithm must iterate over all cell edges in the table, and for each edge, iterate over all shared border segments. For each segment, the segment is collapsed with the correct neighboring border. Next, each of the, possibly six, other border segments meeting the segment at its start and end point must also be identified. This means identifying all the cells surrounding the segment and collapsing the appropriate shared border segments between them.
Let’s take a simple case as an example. In the example below we want to paint the top border of the green-tinted cell, which spans two columns. The thin red dotted line represents the underlying table grid.
In the first iteration above, in addition to collapsing the shared border segment between the cell itself and the cell above it, the five border segments coming in to meet it at the two intersections must be identified and collapsed correctly. After that, adjustments for joining can be made to the segment start and end, before the segment is finally painted.
Similarly, in the second iteration, there are four additional collapses that needs to be done before joining adjustments and finally painting can be done.
Needless to say, it’s been quite a chore trying to get this to work. Especially the joining algorithm has been a tough nut to crack. I’ve used up numerous sketch pads trying to figure it out. When working on something like this, pen and paper is invaluable. But, although there are some cases it can’t quite handle in a pleasing way, I think I finally have an approach that will work. I’ve intentionally made the code for collapsing and joining strictly separated from the rest of the code, to ease unit testing.
To not get too complicated the algorithm I’ve settled on imposes a strict painting order — horizontal borders must be painted on top of vertical ones. This means two iteration across the table. Iteration is quite fast though, and besides, I’d rather spend my time optimizing cell accesses on the table than convoluting the joining algorithm with added complexity.
So without further ado, here’s a screenshot of some collapsed joined and non-joined borders on a table in Scribus:
Although there are some bugs in there, I have other fish to fry at the moment, so I’m going to leave painting for a while. And if there’s anyone out there who, after looking at that picture with the 41 join cases I’ve identified, get a brilliant idea for an algorithm that covers them all with a minimal amount of code, then contact me! Please!
This is the first in a series of blog posts detailing my work with bringing proper support for tables to Scribus as part of Summer of Code 2011. I’ll try to keep the posts in roughly the same format as the reports I’m sending off to my mentor Craig each week. This will make it easier for me to reuse some of the material, saving hacking time :) Each post will be divided into the following sections:
Work Report, a report on what I’ve been up to since my last report.
Project Status, how I’m standing with regard to the schedule in my project proposal.
Upcoming Work, a rough outline of my next steps.
As this is the very first blog post about my project, I’ll start with a little introduction with general information about my project.
Tables provide a compact way of representing tabular information in a page layout, and is a common design element in books, magazines and advertisements. Scribus currently has a shortcut for creating an automatically grouped table-like array of text frames. These are not proper tables. To stay competitive, Scribus needs better support for tables. Support that enables the user to create and edit tables as distinct items with their own set of properties as commonly found in other table implementations. This is the rationale for my Summer of Code project, in which I’ll add a new table page item to Scribus.
The user should be able to perform common table operations such as inserting rows and columns, merging and splitting cells, formatting borders and backgrounds as well as editing the text of the table. The table will represent the text of the cells using standard Scribus text frames.
So without further ado, here follows my first report.
Bootstrapping: Drafted an initial design document including some mockups on the Scribus wiki and discussed the ideas in detail on the scribus-dev mailing list. Also set up a development environment (using Qt Creator this time even though I’m a die-hard Vim junkie).
Added a skeleton of a table style. This was way back in April, just to see what work is involved in creating a new type of style. The style is the most basic one imaginable. At the moment I think it has a single property for background color. Instances of the new table style can be managed in the Style Manager. It doesn’t do style inheritance yet, though that should be relatively easy to fix.
Added class PageItem_Table, a new page item for tables. The class represents a grid of table cells by keeping a few lists with row / column geometries.
Added ability to insert a new PageItem_Table from toolbar or Insert menu followed by mouse dragging. Just like the current “tables”.
Added API to PageItem_Table for the basic table operations
insert and remove rows and columns,
resize rows and column.
Added support for merging cells to PageItem_Table as well as an accompanying helper class CellArea used when keeping track of areas of merged cells. The CellArea class also comes with what I think is the very first unit tests in Scribus. The tests are in tests/ and can be runned using make test.
Added some rudimentary painting to PageItem_Table, just to be able to see the cells. Still a long way to go for proper table / cell painting, which is kind of non-trivial.
As scriptability allows me to experiment with tables before any UI is done, I’ve added the following new scripting methods. These have been added to the old scripter, but should be easy enough to port to ScripterNG later on.
createTable(x, y, width, height, numRows, numColumns, ["name"])
The goal in the schedule for this first week was simply Data structures for tables. Intentionally a quite moderate goal, as I didn’t know how long it would take to get up to speed. So unsurprisingly, I think I’m a little ahead of schedule. Worth noting though is that the tables are currently only skeletal in their nature; they hold no content and are simply a grid of empty cells. This is all according to plan though, and integration with text frames is scheduled for later.
The goals for next week according to the schedule is
Basic table layout with fixed column widths and mock content in cells.
Insertion/removal of rows/columns.
Basic drawing of table.
but as at least some of this has already been done, I think I’ll start looking at other things as well. Right now I’m looking at proper table / cell border painting, as well as fixing a couple of bugs in the code I have so far.
I have an installation of Adobe InDesign CS5.5 running in VirtualBox and I’ve been looking at what border model they’re using and how they’re doing border conflict resolution. It seems to be a variant of the CSS2 collapsing border model, which is probably what I’ll try to go for initially in Scribus as well.
That’s all for now folks! I’ll conclude with a little screencast showing me playing around with a table using the new scripting methods. I highly recommend you download the source OGV instead of watching it here, as the quality turned out quite bad in the blip.tv conversion.