Line wrap in entry table

Features
1

I would like to increase the row height of the entry table as discussed here and enable overflow wrapping for a better view of entry titles (i.e., increase row height and show two or three lines of text per row).

I think this is possible with the overflow-wrap CSS property but I don’t know where to add it to the theme file or if there is a different property to use with JavaFX.

overflow-wrap: normal|anywhere|break-word|initial|inherit;

I also notice that line height in the default theme is expressed in -em -fx-cell-size: 4.0em; rather than in pixels as previously posted. I presume that a different multiplier here would work to change the row height.

Line wrapping and variable row height would also be nice to have in the UI, but I will start with a theme file since I am not a developer. Would someone please share advice on how to make the change?

2

Hi,

that sounds interesting. You can play around with creating a new theme based on the old one:
Pixel vs em: em is the prefered unit because it’s relative to the font size in contrast to pixel

respectively https://docs.jabref.org/advanced/custom-themes

3

I have copied the original CSS. I am trying to figure out where in the file to put the overflow-wrap property, which I think is supposed to be -fx-wrap-text. Maybe in the .table-cell section?

The previous topic showed this

.table-view .cell{
	 -fx-cell-size: 100; //default is 24
}

I think this is the section of interest where I might add -fx-wrap-text: true

.table-cell,
.tree-table-cell,
.table-cell .glyph-icon,
.tree-table-cell .glyph-icon {
-fx-padding: 0.5em 1em 0.5em 1em;
-fx-cell-size: 4.0em;
-fx-text-fill: -fx-text-background-color;
-fx-fill: -fx-text-background-color;
}

Messing around with Scenic View is something that would have to wait for another time.

Edit above: incorrect guess. table-view not table-cell

Solution

I added the .table-view section according to the previous instructions, plus the wrapping property. The location of this addition to the default theme does not matter as this new properties do not conflict with any existing styles.

.table-view .cell{
    -fx-cell-size: 100;
    -fx-wrap-text: true
}

Success!

image
image1470×684 161 KB

Also works with em and adapts as expected with changes in font size. A value of 5.6 was the first .1 increment that fit three lines per row

.table-view .cell{
    -fx-cell-size: 5.6em;
    -fx-wrap-text: true
}

image
image1414×533 133 KB

2 Likes
4

Did you mean the other way around? Pixel is absolute and em is relative to font size.

5

em is the prefered unit because it’s relative to the font size in contrast to pixe

Did you mean the other way around? Pixel is absolute and em is relative to font size.

All fine :wink:

Thanks for the cool css solution!
Feel free to add your theme to https://themes.jabref.org/

6

I meant the remark about pixel vs. em as a question, not as a correction. I think there might be situations where pixels are the preferred (or necessary) approach. :slightly_smiling_face:

Em values seem to be working well with JabRef’s entry table. I got the best three-line view from -fx-cell-size: 5.6em and the best two-line view from -fx-cell-size: 4.3em.

I think this is a feature that merits consideration for inclusion in the GUI. I made these rough examples of row-height icons used by other applications that have implemented this.

Click or hover over row-height icon
row-height

Choose small, medium, or large
row-height-s row-height-m row-height-l

1 Like