I have a software running on an embedded Linux written in Qt/QML. I am using a font family, let's call it SomeFontFamily.otf. This font family doesn't support Chinese characters, therefore when I want to display a Chinese text I am getting empty squares instead. If I run the same software on my desktop Linux I get the same result with Chinese text, but if I add a .font directory in my home folder with a font family that supports Chinese then it displays the characters. So I thought I can do the same on the embedded device and added a .font folder in my home directory with the right font, but unfortunately it didn't work. Then I have found this doc about Qt fonts on embedded devices. It says that I should put my font under lib/fonts directory because Qt will search there for it on embedded devices. I tried it, but unfortunately with no success. Anybody had a similar issue? Just for the record this is not translation related. I just want to be able to display Chinese characters in an english text.
Embedded QT versions often lack features, disabled by people who want to cut on dependencies without checking what the dependencies are there for in the first place.
To get font substitution to work you need a build with fontconfig enabled. To get complex text support (anything that exercises more than latin glyphs) you need harfbuzz, the newer version (harfbuzz-ng) the better.
I have fixed the problem with Arabic language by using my own FontConfig. You have to enable it using FontConfig & Font Qt Embedded
My final solution was actually creating a wrapper class for QFont and adding QFont::insertSubstitution(...) in the constructor for my set font. Then expose it to QML and use it as a default font. It works like a charm.
As a side note: if you have bundled your fonts with a resource file (.qrc) you have to add those fonts with QFontDatabase::addApplicationFont.
Related
I've been referencing the findings in this thread and in this question when trying to get a custom font that uses embedded bitmaps to render them via #font-face, and in my experimentation with fonts that I know are configured correctly, I found the following results displaying 日本語 using Windows 10 and Vivaldi (Chrome, etc), with ClearType on and configured (unsure if this matters):
span {
font-family: "SimSun"; // or just omitted, since this is a fallback font
}
#font-face { font-family: "font"; font-weight: normal; src: url('simsun_0.ttc'); }
span {
font-family: "font";
}
simsum_0.ttc is the font that I pulled from C:/Windows/Fonts/ and placed in the folder where the css lives. I've also verified that this file does indeed have embedded bitmaps and is configured correctly.
I've since just installed the font I'm working on and referenced it via its system name, which then loads the bitmaps correctly. Is there any way to get browsers to load the bitmaps from fonts loaded via #font-face? Is there any documentation or spec on this limitation, or possible work-arounds?
More examples
This works the same for custom-built fonts as well - here's an example with an .otf font in Chrome. The font loaded via it's name when installed on the system:
and the same font loaded via #font-face's url:
Chrome and Firefox (and likely others) run OTS on the fonts not available in the system, which removes the EBDT & EBLC tables (where the bitmaps are stored) from the font.
From the OTS readme:
The OpenType Sanitizer (OTS) parses and serializes OpenType files (OTF, TTF) and WOFF and WOFF2 font files, validating them and sanitizing them as it goes.
The C library is integrated into Chromium and Firefox, and also simple command line tools to check files offline in a Terminal.
The CSS font-face property is great for web typography. Having to use images in order to get the correct typeface is a great sadness; one should be able to use vectors.
However, on many platforms the system-level TrueType font renderers have never been part of the attack surface before, and putting them on the front line is a scary proposition... Especially on platforms like Windows, where it's a closed-source blob running with high privilege.
In 2014, there was interest in adding color bitmap tables to Chromium, and support was added to pass-through the color bitmap (CBDT & CBLC) tables to OTS, so it seems possible that support could be added for these as well, if the browser requests it.
The steps I see to make this possible are:
Add the ability to pass-through the EBDT & EBLC tables to OTS. This is the current location of the code that passes the color tables through.
Request that each project (Chromium, Firefox, etc) allow the pass-through.
Wait for all the updated code to be pushed down-stream.
There might be more complicated implementations of this sort of support (options in #font-face, etc), but this seems like the easiest, since the color tables are already supported (somewhat) in the same way.
A reliable and easy option is to use a service like FontSquirrel.
https://www.fontsquirrel.com/tools/webfont-generator
Upload the fonts and it will generate everything you need so you can download, copy and paste into your project.
Good luck!
The problem is #font-face doesn't support TrueType Collections (.ttc) files, so it will fail loading it. Does the console give you errors indicating something like this?
You could use a tool to extracy the needed .ttf from the .ttc file, if the license allows this. Or you could ask the foundry you got the font from to supply you with a .ttf (or .woff2, whatevr you need).
I've downloaded mbtiles from openmaptiles and Also displayed them in web page. I used this to translate labels from english to other languages. but it doesn't work. Does anybody know how to change languages?
(Should mention that i display it with mapbox gl)
In a similar situation, the styles I got from running the docker setup of tileserver-gl contained many layers such as: "poi_label-en". These label are preventing the new label created by klokantech/openmaptiles-language to display properly (the library will create layers such as "poi_label-de" based on the definition of "poi_label" for German for instance).
I'd suggest the following steps to make openmaptiles-language works properly:
Take the latest style you want, such as: https://github.com/openmaptiles/klokantech-basic-gl-style
Update the style to point to your source, glyphs and sprites. (use your current style as a basis)
Potentially change the name of the fonts if they do not match the ones served by your server (I had to update from "Noto Sans Regular" to "Klokantech Noto Sans Regular")
Then if you follow klokantech/openmaptiles-language instructions and example it should work properly.
A quick way to check your javascript implementation would be to use the cloud solution of openmaptiles for the tiles and the style. If it works properly, the javascript part is OK and the problem is in how your style is defined.
When I create the "Command link button" (QCommandLinkButton) it has relatively nice green arrow icon.
I would like to see what other nice icons can I choose. When I try to change the icon, [Theme] appears instead of path or some GUI selection dialog:
I also noticed the context menu:
When I click Set icon from theme, again expecting some GUI selection list, I get just a text field:
What I was imagining:
Where's the list of icons from which the green arrow was taken?
QIcon::fromTheme works under specific conditions.
If it can find it in the QIcon::themeSearchPaths() for the QIcon::themeName()
If the desired icon isn't there, Qt Designer won't be able to do any of the from theme, named icons.
But... if you check your target system for the theme search paths and set the theme name, you are more likely to have success.
Example
On linux, I wanted to get a plus and a minus icon.
I found list-add.png and list-remove.png fit the bill.
https://github.com/GNOME/adwaita-icon-theme/tree/master/Adwaita/16x16/actions
http://standards.freedesktop.org/icon-theme-spec/icon-theme-spec-latest.html
http://standards.freedesktop.org/icon-naming-spec/icon-naming-spec-latest.html
I did a locate on my system and found these:
/usr/share/icons/gnome/16x16/actions/list-add.png
...
/usr/share/icons/gnome/32x32/actions/list-add.png
/usr/share/icons/gnome/scalable/actions/list-add.svg
/usr/share/icons/oxygen/16x16/actions/list-add.png
...
Forcing with fallback icon in QIcon::fromTheme
Find the icon on the filesystem:
ui->toolButton->setIcon(QIcon::fromTheme("list-add",
QIcon("/usr/share/icons/gnome/16x16/actions/list-add.png")));
Find the icon in the qt resource system...
Add the icon in a qrc file in your build, then reference it's path.
ui->toolButton->setIcon(QIcon::fromTheme("list-add",
QIcon(":/list-add.png")));
Overriding the current icon theme
qDebug() << "themeSearchPaths:" << QIcon::themeSearchPaths() << QIcon::themeName();
// themeSearchPaths: ("/usr/local/share/icons", "/usr/share/icons", ":/icons") "hicolor"
The default theme for the system, and for the target deployment machine, likely didn't have the icons in it I wanted... but the gnome or oxygen icon desktop theme installed would almost always have it...
QIcon::setThemeName("oxygen");
Note that you won't see the preview in Qt Designer necessarily because it doesn't set the theme until runtime of your code.
The gnome icon library has 1100+ icons in it. Here is one list:
https://gist.github.com/peteristhegreat/c0ca6e1a57e5d4b9cd0bb1d7b3be1d6a
This works as long as you know what themes are available on the target system.
The list from freedesktop.org has 286 icons listed.
Use icons included in Qt
Just like #peppe pointed out, Qt includes 70 standard icons, too.
widget->setIcon(widget->style()->standardIcon(QStyle::SP_BrowserReload));
http://doc.qt.io/qt-5/qstyle.html#StandardPixmap-enum
Conclusion
Using a stock library on your target system is probably the fastest. Using the Qt built-ins is fast to figure out and use, but is fairly limited. Using a resource file is probably the most robust method, and gives unlimited options on what icon to use.
Be sure to pick a standard icon pack, and think about licensing and attributions, and some other things like that.
And there is no shortage of icons available online:
https://www.quora.com/What-is-the-best-icon-library
https://www.google.com/search?q=open+source+icon+library
Hope that helps.
I don't think that's the function you want to use. The "theme" name there corresponds to the QIcon::fromTheme functionality, which uses icons named according to the FDO specification
http://standards.freedesktop.org/icon-theme-spec/icon-theme-spec-latest.html
http://standards.freedesktop.org/icon-naming-spec/icon-naming-spec-latest.html
And they're not really supported on non-FDO platforms (Windows, Mac, ...) unless you deploy your own theme files.
Now some stock icons are shipped with Qt itself; I don't know how to set them from Designer, but from code you can use QStyle::standardIcon:
widget->setIcon(widget->style()->standardIcon(QStyle::SP_BrowserReload));
If the icon you need is not provided by Qt, you'll need to ship it. In that case the Resource System is a convenient way to bundle it alongside your executable.
Last, but not least, from a UX point of view you should consider using QToolButtons unless you're really building a Vista-like wizard.
I need to use some custom font for numbers in my Qt app, but company ask me to use image as font, font file is not allowed(For example: ttf).
the font image like this:
So i wonder is possible to converting the font image to QFont?
like a Qt font generator.
Or any other solution?
There is nothing out of the box that supports what you are looking for. You would need to get around this company rule by building your own TrueTypeFont data programmatically from your image, keeping it in memory only and load that into your application with addApplicationFontFromData(const QByteArray & fontData).
Unfortunately I cannot find a single library that does this, and the TTF format appears dauntingly complex. I would suggest looking into this open source project for font creation. Perhaps you can use this as a starting point? http://fontforge.github.io/en-US/
You may want to find out the reason your company is telling you that you cannot use a custom font. (I just remembered reading that QT has difficulties storing a font as a "resource". If it's not due to copyright issues, then you could suggest not using an image, but storing the entire file in the source code in a text format like base-64. Then convert it back into binary at startup, then load it up as a new font from a QByteArray.
I guess it's about copyright issues ? There are lots of ttf fonts available for completely free commercial use. E.G. have a look at Droid Sans Mono : https://www.google.com/fonts/specimen/Droid+Sans+Mono
Otherwise it would be good to know the reason why ttf is not allowed.
It is possible to create a font from a vector graphic.
If you have resonable high resolution images of every letter (if not already vector graphics) you can try to convert them to vector graphics (SVG).
Afterwards you can use tools to convert SVG to a font. This would be most likely a ttf font which can be used with QFont.
Today, I learn how to localize my Flex application and to support multiple languages. The tutorials on-line are great. However, non of them mention the Arabic locale.
So basically, I created the Arabic (Jordan) locale files in the SDK folder by using:
copylocale en_US ar_JO
I navigated to the locale folder and I was able to see the ar_JO folder in there... So I assume everything went smooth.
Next, I followed the tutorials (www.babelfx.org) and was able to localize my test application in English, French, and Arabic. Clicking on any of those languages switches the labels of my simple form/into the desired language... however:
When switching to the Arabic language the labels turn into empty square symbols. If you are wondering, yes I can open a notepad and type Arabic text and save it successfully.
When I type Arabic text into the text boxes, I can see the Arabic words that I typed correctly (the labels are still square symbols).
Any ideas what I might be missing here??
I tried changing the font of my application (right on the application tag I set the fontFamily) into Simplified Arabic which comes by default on Windows.
Thanks
Have you embedded a font into your swf which can render Arabic? Are you using that font? If the answer is no to either, then I suggest reading up on the subject.
One thing to remember about Flash and fonts is that it has incredible power which comes from the fact that one is able to embed actual fonts into the swf itself. One also needs to remember that Flash is incredibly finicky and is prone to throwing fits if you fail to do so.
The solution is to change the context-type to UTF-8. Three ways to accomplish this from within Flex Builder:
(Option 1) Right click the file from the File Navigator and select Properties
(Option 2) With the file open, navigate to the File menu and choose Properties
(Option 3) With the file open, press Alt + Enter to bring up the file Properties
Once the properties window is displayed, you will see the option to change the file encoding from Default to Other (UTF-8).
Note: At least for me, once I changed the content-type to UTF-8, I had to close my unsaved file, open it back up, and paste my contents back into the file in order to clear the error message. Then clean the project (Project -> Clean...) and let it rebuild.
I found the solution. Actually, I didn't have to embed any fonts or anything in order to get it working.
My problem was the encoding in the resources.properties file. I opened it in Notepad++, then I noticed the Encoding menu. At that time, I remembered reading something about that the encoding of the resources files should be UTF-8. So I converted the encoding to UTF-8 from the menu, compiled, it didn't work! After couple of retries and cleaning the project, it worked successfully!!!
Just a reminder for everybody (as I have fallen into this while working this problem out):
For mx components, embedded fonts must have the embedAsCFF set to false.