Why fonts in Qt are appearing blurry or pixelated? - python-3.x

All my fonts are appearing pixelated, so I used AntiAliasing but it isn't helping out. As you can see the pixelated font in the image itself:
This is the code I am currently using:
butt1 = QtWidgets.QLabel("""Scrappr""")
font = QtGui.QFont()
font.setStyleStrategy(QtGui.QFont.PreferAntialias)
font.setPixelSize(22)
font.setFamily('Segoe UI Bold')
butt1.setFont(QtGui.QFont(font))
I tried different solutions on SO, qtforums etc but nothing works for me :(
I tried:
Different combinations of ClearType text but It didn't work out as, by default all the text appears good on windows and chrome but with Qt only, it becomes pixelated.
Changing windows aero theme to classic one...
But none of them helped.
Here are My PC Specs:
windows: 7 ultimate
PySide2 version: 5.14.2.1
Resolution: 1360 X 768

I'm using BrownPro font and the texts were blurry at all resolutions, but much more evident at low resolutions.
I was able to solve the issue by setting the hinting preference for the font to: PreferNoHinting. Applying it at the application level, fixes the issue everywhere.
Here is the documentation: https://doc.qt.io/qt-5/qfont.html#HintingPreference-enum
And here is the code I used:
QFontDatabase::addApplicationFont(":/fonts/BrownPro-Bold.ttf");
QFontDatabase::addApplicationFont(":/fonts/BrownPro-Regular.ttf");
QFontDatabase::addApplicationFont(":/fonts/BrownPro-Light.ttf");
QFont brown_pro_font("BrownPro");
brown_pro_font.setHintingPreference(QFont::HintingPreference::PreferNoHinting); //This line did the trick
QApplication::setFont(brown_pro_font);

Try to see the fonts used by PyQt5:
import PyQt5
from pyQt5 import QtGui
dir(QtGui.QFont)
the result will show all you need for QFond and the fonts can be used:
[..., 'Helvetica',...,'SansSerif',..., 'Serif',..., 'Times', ...
You can try to add your custom fonts but you need to test each font.
For example, the documentation tells us:
In Windows a request for the “Courier” font is automatically changed to “Courier New”, an improved version of Courier that allows for smooth scaling. The older “Courier” bitmap font can be selected by setting the PreferBitmap style strategy (see setStyleStrategy() ).
Once a font is found, the remaining attributes are matched in order of priority:
fixedPitch()
pointSize() (see below)
weight()
style()

I happen to work with Qt last year and i used qml for building the UI part of my application.
Qt itself prefers us to use qml for building UI, since they have written a UI engine that renders everything better compared to the old engines.
In case of PyQt you are using the python only approach which is only not usually recommended, i am not saying that the qml version is pixel perfect. it still works bad at drawing curves (but that is not the stuff we usually require). As far as your problem is concerned qml will work fine for you (it has much better text rendering).
You might struggle a bit finding the learning resource for qml. But at least give it a shot and yes it is easier much easier than Python only approach.

Related

Text distorting during PNG rendering in Apache Batik

There are some very strange distortion in the images that are rendered via Apache Batik.This issue is not temporary as the distortion is happening every time the call is made, at the very same co-ordinates for the same svg. This happens in Linux environments and I am not able to reproduce this issue in mac OS environments.I am using Oswald custom font (from google fonts) and there is usage of transformation attributes like letter-spacing, rotate functionality.
Tried many of the suggestions like:
1) Verified if the Oswald font is registered to the Graphics environment.
2) Removed text transformation attributes like letter-spacing,rotate, but still the distortion is occuring. We have also replaced letter-spacing attributes with kerning.Tried with shape-rendering="geometricPrecision" also to no success.
3) Tried with other fonts and din't face the distortion with Arial custom font, but with Oswald, Roboto the distortion still exists.Our usecase needs Oswald Font, hence we cannot use Arial font.
4) Tried SVG fonts by embedding the svg fonts in the svg file - No success.
5) Tried trim functionality but no success.
6) Replaced the characters where the distortion is happening and the issue is solved, but I am not able to deduce anything from this.
7) Increased And decreased the font size by 1px where the distortion is happening and the issue is solved, but I am not able to deduce anything from this.
I found few threads where the reason was mentioned that Batik rendering varies per OS environment but was not able to find any solution. Was anyone able to solve this?
Upgrading JDK from 8 to 11 has solved the problem.

unicode box-drawing does not render correctly in browsers

I recently discovered this historical document, which purports to act as a test of UTF-8 encoding for whatever application displays it.
When I paste it into my terminal (iterm2), it loads the box drawings at the end beautifully (except for a couple at bottom right):
But in both Chrome and Firefox, they are crooked and clearly wrong:
It seems the difference has to do with the width of the rendered character: for example "╲" displays in my terminal as wide as other characters such as "a", but in the browser it displays wider.
Is this a deliberate choice, and if so what inspired it? If not, where is the right place to file a bug?
EDIT
Thanks to Tom Blodget's answer, I am now aware that fonts are an important consideration. I'll clarify:
In my screenshots above, Firefox and Chrome are using Courier as the monospace font, while the terminal is using Monaco. In both contexts, the font seems to apply as much to the box-drawing characters as to the ASCII ones: when I change the font, the appearance of the drawings changes as well as that of the surrounding text.
When I switch the terminal to either Courier or Courier New, it shows the box drawings equally well -- in some ways better!
When I switch either browser to Monaco, it still shows the box drawings wrong, again from characters apparently displaying at a wider-than-monospace width.
So it still seems like the browsers are doing something wrong.
When I go to dev tools, I see the entire test is one pre element. Several fonts are being used on my system. Everything looks okay except the hatch pattern on the right.
If I hack out all of the other text, the only font used is Consolas and it looks okay. I think it's down to which fonts you have, how the browser prioritizes them, especially when it has to use more than one, and (conjecture) two monospaced fonts need not have the same width.
A terminal is likely to be less adept at using multiple fonts, instead, using one fixed one or selecting one "best" match for the required characters.
[Google Chrome 72.0.3626.96 on Windows 10.]
This is likely the same as https://bugs.debian.org/981577
If you have any old fonts installed that don't cover the unicode BOX DRAWING range, it's likely that your browser is stitching them together. While each font itself might be monospace (each glyph is the same width within the font), the combination of fonts might not be monospace (because glyph width differs between fonts), which is why the alignment fails.
I found on my system that uninstalling the legacy Bitstream Vera font resolved the issue. (Bitstream Vera has been superseded by DejaVu Sans)

How do you create a perfect pygame fullscreen?

I am making a game, and I want it to be fullscreen. However, the pygame fullscreen is strange, creating a screen too large. So I referred to this: Pygame FULLSCREEN Display Flag Creates A Game Screen That Is Too Large For The Screen. However, when I followed these instructions
import ctypes
ctypes.windll.user32.SetProcessDPIAware()
true_res = (ctypes.windll.user32.GetSystemMetrics(0), ctypes.windll.user32.GetSystemMetrics(1))
pygame.display.set_mode(true_res,pygame.FULLSCREEN)
from an answer (but instead using pywin32 instead of ctypes, like this: win32api.GetSystemMetric(0)).
I used this, and while it does create a fullscreen, it also creates a black border around my screen and enlarges everything a slight bit, including my cursor. How can I get rid of this black border and get all shapes to normal size? Or is there a better way to create a good fullscreen?
If it helps, I use Windows 10.
Thanks in advance!
I think the problem of enlarging everything arose with the use of ctypes module as because the ctypes module makes use of a function named as GetSystemMetrics() whose work is to get the size of the screen of your system.
And might be the import pygame is loading some dll that is not compatible with a dll that windll needs.
So I suggest either you update the ctype library or pygame library or update both libraries or you can enlarge screen size by providing custom width and height values according to the resolution supported by your system.
Hope this helps !!

Creating a cross browser icon webfont

I have been making my own webfont taking as a starting point articles from web designer depot and intridea.
I know different engines render fonts differently and but the issue I'm having is that firefox renders the font higher than chrome - at the size I am displaying the font this is very noticeable (3 or 4 px - which on a button means they're totally misaligned).
I have also referenced Github's octicon documentation - when checking out how octicons compare browser they look great! No noticeable difference as far as I can see. How did they achieve this?
I am using inkscape and have tried a couple of different svg starter templates. Setup is Set width: 1024 and have tried the icons at various sizes with no different outcome. i.e. 512pt square and aligned just under the baseline.
My question is what rules do I need to impliment when creating a webfont to get the smallest difference between browser rendering of the font?
This is a complicated question that involves something called vertical metrics. A font has three sets of these. the first set, found in the 'hhea' table, are generally specific to Mac. The other two sets, found in the 'OS/2' table relate to Windows (and Linux). The idea is to get these values equalized. Our Generator has a feature called oddly enough 'Fix Vertical Metrics' which does a best guess at these. Note that Github used the Generator for finishing their icons.
I know this doesn't relate specifically to SVG fonts, but I'm pretty sure this is where your problems lie. Having different vertical metrics values screws up the baselines across platforms.
Some reading:
http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/
http://webfonts.info//webfonts-know-how/part-1-we-need-talk-about-line-height
http://code.google.com/p/googlefontdirectory/wiki/VerticalMetricsRecommendations
There's a webapp, icomoon : http://icomoon.io/app/
It make the job pretty well but you have to test the rendering of the different icons.
They offert a lot of icons if you don't want do design everything.
I had the same problem, and solved it by manually setting the metrics for all three types.
You can see my working solution with screenshots of the settings here: https://stackoverflow.com/a/20609766/955413
I used the Icomoon App to create the Emoji icon font as well as for creating custom icon fonts on a per project basis.
The Icomoon App allows you to do each of the following :
Get one or more icons from several popular icon fonts
Upload other fonts, which may be icon fonts but also regular fonts
Upload SVG files to use as icons
Combine any number of icons from any number of available fonts
Set the UNICODE hex value for whichever characters you need
Export and/or save the font set you create
For more details, see Create webfont with Unicode Supplementary Multilingual Plane symbols.

Weird rendering bug in Vim (or feature?)

There are small lines appearing sometimes in front of words. In the pictures they are to the right of +syntax/ and swo and delmenu.vim.
Is this a bug or those lines mean something?
Do this happened to you before?
Would they get worse in the future?
PS: I'm using Microsoft Windows XP SP2 AMD
alt text http://img97.imageshack.us/img97/7673/picpd.jpg
EDIT: I change the font to Consolas and they disappeared. Is there a way to solve the problem while still using my favorite font, Monaco (and not turning off Cleartype)?
This is caused by cleartype font smoothing.
If you use a fixed font for gvim the problem goes away (.fon files). ttf files contain font smoothing information which gets messed up in gvim.
fixedsys renders well. There are a bunch of other ones that also work well.
An alternative is to turn off font smoothing altogher using the display properties, but that will have undesirable effects on all other applications.
This does indeed look like a rendering bug. You should report it to the gvim team. But you should also never use jpegs for screen shots - the compression doesn't work nearly as well as pngs, and could potentially introduce distortion in shots exactly like this one.
Just a guess, but it may be related to the font you are using. Maybe you could try to change it to see if these lines still appear, or disappear, or move to other lines ...

Resources