How to: Collapse borders in a layout
A common layout for applications is to split up the screen into panes, with borders around each pane. Often this leads to making UIs that look disconnected. E.g., the following layout:
Created by the following code:
We can do better though, by collapsing borders. E.g.:
The first thing we need to do is work out which borders to collapse. Because in the layout above we want to connect the bottom right block to the middle vertical border, we’re going to need this to be rendered by the top left and bottom left blocks rather than the right block.
We need to use the symbols module to achieve this so we add this to the imports:
Our first change is to the left block where we remove the right border:
Next, we see that the top left corner of the top right block joins with the top right corner of the
left block, so we need to replace that with a T shape. We also see omit the bottom border as that
will be rendered by the bottom right block. We use a custom
symbols::border::Set to achieve
In the bottom right block, we see that the top right corner joins the left block’s right border and so we need to rend this with a horizontal T shape pointing to the right. We need to do the same for the top right corner and the bottom left corner.
If we left it here, then we’d be mostly fine, but in small areas we’d notice that the 50/50 split no longer looks right. This is due to the fact that by default we round up when splitting an odd number of rows or columns in 2 (e.g. 5 rows => 2.5/2.5 => 3/2). This is fine normally, but when we collapse borders between blocks, the first block has one extra row (or columns) already as it does not have the collapsed block. We can easily work around this issue by allocating a small amount of extra space to the last layout item (e.g. by using 49/51 or 33/33/34).
The full code for this example is available at https://github.com/ratatui-org/website/blob/main/code/how-to-collapse-borders