Bad JavaFX font smoothing

[halirutan]

I'm using the latest dev-version that is available in the download section and I'm seeing a similar issue that appeared in IntelliJ IDEA's markdown preview. The font-smoothing for gray/black text uses RGB antialiasing which looks irritating. Here is a magnified example of the bibtex-source view:

In IDEA they provided a feature to use grayscale font smoothing which vastly improves the appearance. Please compare the two versions below:

Would it be possible to provide this as well?

JabRef 4.1-dev--snapshot--2017-10-12--master--6768ecbd1
Linux 4.4.0-96-generic amd64 
Java 1.8.0_111

[halirutan]

Here is a related answer on SO. That being said, using

java -Dprism.lcdtext=false -jar JabRef-4.1-dev--snapshot--2017-10-12--master--6768ecbd1.jar

fixes this issue. However, the font still seems to be blurry. While the main menu, the entry table and its tab-labels are crystal clear, the tab-labels and entries at the bottom have a different/larger font and appear blurry to me. Below, the two top lines are from the article-table, things below seem blurry:

Side note: Would someone know why changing e.g.

java/org/jabref/gui/Main.css

inside the jabRef.jar would have no effect when I restart it? Should this work?

[lenhard]

Thanks for reporting this and actually looking into a solution!

Changing the CSS file should have an effect, at least according to Oracle's documentation. I suspect that Main.css might be the wrong file, though. We have a separate CSS file for the entry editor: java/org/jabref/gui/entryeditor/EntryEditor.css and that's the part where you are seeing the problems.

Could you try setting the font smoothing there and let us know if it helps?

[lenhard]

By the way, this is probably the same issue: #3268

[halirutan]

@lenhard

I suspect that Main.css might be the wrong file

Yes, it was only an example. I tried EntryEditor.css too but maybe I misplaced the -fx-.. option. After cloning and compiling the repo, changing the css file worked as expected.

Question: In EntryEditory.css I don't see any changes of font sizes or font types. Still, the font is different (at least of different size) in the EntryEditor. Is there some high-level overview of the project-structure, GUI design, or something similar in the Wiki on GitHub?

[lenhard]

Ok, good to hear that this is actually resolvable. Would you mind proposing a pull request with a fix?

There is some documentation regarding project structure and coding here in the wiki on github, but it is very very limited. We have little time for development and unfortunately even less time for documenting it. But if you have questions, we'll try to help here in the issue tracker.

The font size in the entry editor is indeed different. However, it's not set in CSS, but in Java, here: https://github.com/JabRef/jabref/blob/master/src/main/java/org/jabref/gui/entryeditor/EntryEditor.java#L211 This happens because we need to read the size from the preferences at runtime.

The change discussed in this issue should go into the CSS file in my opinion. It's nothing that we want to make customizable by the user in the UI.

[halirutan]

The change discussed in this issue should go into the CSS file in my opinion.

Yes, I agree. As long as this doesn't break anything it probably should go statically into the css file. I was asking about the font-size since I might look into this as well if I find some time this weekend.

Today, I tested the fonts on a different OS:

JabRef 4.1-dev
Mac OS X 10.12.6 x86_64
Java 1.8.0_74

and when I open the EntryEditor, I see the same blurry fonts for a glimpse of a second before it changes to the correct rendering. Have a look at this video and set the speed to slow-motion. Pay attention to the editor-tab labels in second 7 and second 8.

Do you have an idea if this is introduced by JavaFX when it re-adjusts the size of the windows or might this be a problem in JabRef?

[halirutan]

It seems I cannot fix this in a meaningful way. For me, the setting of -fx-font-smoothing-type: gray; does not have any effect and it doesn't matter if I set it in the css file or in code like here for the source editor. The only way that works is setting the system property either by command line or in the main.

Additionally, I looked why the FX fonts look so bad. It seems an inherent problem of FX. I checked which default font they use and FX doesn't use the default font of my system. First, I though that something with the calculation of org.jabref.preferences.JabRefPreferences#getFontSizeFX must be off since the font appeared larger than the rest of the swing fonts, but that wasn't the case.

I got the best result by hard-coding it for my system like for the source-editor:

     codeArea.lookup(".styled-text-area").setStyle(
             "-fx-font-size: " + Globals.prefs.getFontSizeFX() + "pt;"
                     + "-fx-font-family: \"Droid Sans Mono\";"
                     + "-fx-font-smoothing-type: gray;"
     );

(although the last line has no effect). You can compare the two results:

• original built from master
• fonts and antialiasing fixed

It looks definitely more system-like but still blurry. However, I have no idea how this should be implemented in a platform-independent way. Maybe one could make a condition for Linux like you did in other places, but for this one needs to find the correct system font first.

Additionally, I could change some settings in EntryEditor.css and saw effects, however especially this entry

.text-area *.text {
    -fx-alignment: center-left;
}

doesn't change the alignment when I set it to center-right and I was sure it was meant for the text areas of single fields.

[lenhard]

Thanks for looking into this so deeply.

Overall, JavaFX doesn't seem to be too well-supported on mac. We are having a number of freeze issues on macOS Sierra as well. The problems should rather come from the default usage of FX, since we do relatively little customization here in JabRef. Maybe it also comes from the fact that we are combining JavaFX and Swing here, something that's just unavoidable as we evolve the application towards JavaFX.

We cannot really hard-code the font, because that is customizable for the users and there are other aspects to it apart from sharpness, such as the support for mathematical symbols. But we still should set the font smoothing to gray and if the only option to achieve this is via a command line option or in the main, then this is how we should do it.

@lynyus As our only developer with a mac, what do you think about all this?

@tobiasdiez Any idea why changes to the CSS seem to have no effect here?

[LinusDietz]

I'll have a look tomorrow.

[halirutan]

@lenhard Your argumentation is completely sound and I support every bit of it. In the end, I decided that the least-harmful way is to incorporate the font-rendering settings for FX into the preferences and make it only turned on on Linux per default.

Sidenote: I'm on OSX 50% of my time too :)

[lenhard]

I think this has been fixed by #3305 and we can close the issue.

[Siedlerchr]

@jsotuyod You can modify the starter script for JabRef and pass the options as java options in the JabRef.cfg file
add -Dprism.text=t2k -Dprism=lcdtext

https://docs.oracle.com/en/java/javase/14/jpackage/packaging-tool-user-guide.pdf
See section 3, JVM Options