Netbeans 8.2 code completion for CSS font-family - css

I am using Netbeans 8.2 and finding it generally great... however, when coding CSS font-family there is a very limited code completion list (sans-serif, serif, etc.). I have to fully type Arial, Helvetica, sans-serif;. Am I missing something? I have only the HTML5/PHP install.
If using Visual Studio Code the code completion for font-family is working.
Thanks in advance for any light you can shed on this.

Am I missing something?
No. I have a full install of NetBeans and get the same result as you.
If using Visual Studio Code the code completion for font-family is
working.
Well that depends on what you mean by "is working"...
A font-family name can be a family-name or a generic-family.
The generic-family names are formally defined ("serif", "sans-serif", "cursive", "fantasy", "monospace"), and those are provided as options in NetBeans with code completion:
However, family-name is defined as "the name of a font family of choice", meaning you pick a font that you want your web page(s) to use. Given that there are thousands of available fonts, NetBeans cannot know what specific fonts to provide during code completion for font-family. It has no idea what operating system or browser your application is going to use (and you may not either). And even if NetBeans did know the target environment, it would still not be able to provide a guaranteed list of safe fonts during code completion.
Of course some fonts are more popular than others so I suppose you could raise a bug report with NetBeans suggesting that they offer some additional font names on code completion based on popularity, but the process would be very subjective, and different people would would come up with a different lists.
I also checked what Eclipse and Intellij IDEA do for code completion for font-family. Eclipse is the same as NetBeans, offering only the generic-family names, but Itellij IDEA offers a huge list of fonts:
I am running on Windows 10 and it looks like Intellij IDEA is loading up all the names it finds in C:\Windows\Fonts. Perhaps that is what you would like NetBeans to do as well, but be mindful that selecting fonts from that list will not mean that the font will necessarily be available when your application runs in a browser of the user's choice on Android or macOS or iOS or Linux or some different version of Windows.
My own view is that NetBeans and Eclipse are doing the right thing, forcing you to think about what family-name(s) you want to specify, but others may feel differently.

Related

Resetting qt5 application font to sensible default

So my QT5 applications (OK, that's only OpenSCAD) now have a huge font. So huge actually that I can only read three words on the screen (“File”, “Edit”, “Editor” for the OpenSCAD menus). (I don't know which change caused that: I did not open it for some time).
I tried installing qt5ct to reset fonts to a sensible default value... except that this tool uses itself qt5 (that's logical, if a bit unsafe) and so is also unreadable.
Which configuration file should I try editing to make the thing usable again?
Info that might be useful: the machine is Debian testing; I don't know the exact QT version info since qt5ct does not recognize the --version switch.
Edit to add: although fonts are huge, icons are normal size, so this is probably not a screen resolution problem, but really a font problem.

Getting all font families in React JS

I am new to ReactJS. I am trying to display all the font families in a dropdown, so that if i select one of the font family the text (displayed in a SVG) font-family will change.
I know in .net we can use System.Drawing.FontFamily.Families to get all the font familes. Like wise in react is there anything? Or else is there any other way to do this?
Thanks in advance...
You want to get all the available fonts on current machine, right?
I think there is no way to do that.
But with some trick we still can list almost available fonts on the current machine with:
1. A list of fonts
Windows fonts
Mac fonts
Some common fonts
2. JavaScript font detector
http://web.mit.edu/jmorzins/www/fonts.html
You got the idea, right? Now we just need to check what fonts are available in our font list and display them in the dropdown.
If you are building a web application using React, then it is impossible. For that matter, it is impossible with any library or framework. There is no JS API exposed by browsers that allow you get a list of all the fonts installed in the system (It can be a security issue).
However, if you are using React to build a Desktop application using electron.js or node-webkit.js, then you can export a binding for system API call to JavaScript and get this list. But it is a very cumbersome process. (I thought of this because you are comparing .net API with Web API.)
In general, as #Jared suggested, that is what most of the online(web applications) tools do when they want to provide font-selection dropdown for users.

Incorrect font rendering in Qt (Symbian)

I've been trying to get custom font rendering working in a Symbian Qt app (4.6) for some time. For most fonts and most glyphs, it all works just fine using a method similar to this.
However, for the majority of fonts many glyphs are rendered incorrectly - essentially, the wrong glyph is rendered. I've tried a Symbian C++ app using the same loading method, and that does render correctly. So, this does seem like a Qt bug, and in fact all the gory details are here.
Can anyone suggest a workaround to get full TTF font rendering working on Symbian^3 devices in Qt 4.6?
Although I have no experience with Symbian Qt Apps, I was working last year for several months in a dual environment Qt application (Win32 & Mac OS X) which has to do mainly with font rendering.
QFont rendering -in Win32/Mac OS X- in general runs smoothly, but if you have advanced font rendering requirements you may encounter several and severe problems:
a) It's not possible to find if a specific unicode character is really present in a specific font (i.e. it's not possible to totally disable the character-substitution mechanism - you can only provide substitution hints)
b) If you try to load some specific (bad?) TTF/OTF fonts for exclusive use of your application (i.e. to load not-installed fonts to use them in you application) the application crashes and the crash is inside the Qt Libraries code (it's trying to double-free some buffers).
This is a very rare bug to encounter: It was happened to me for just 5-10 fonts out of 90.000 fonts I tested, but it's still annoying if the main task of your application has to do with font-rendering.
My workaround was to use the FreeType2 (open source) library:
-> It never crashes (it just returns an error on bad fonts)
-> It's about 4-5 times faster than QFont rendering
FreeType2 is not a direct replacement for QFont and it for sure requires to spend some extra time to understand some basic (low-level) concepts before using it, but if you really need a fast and reliable library to render any TTF/OTF (+other) font into a gray or bw image, I highly recommend it as the ultimate choice.
The ultimate answer is that this is a QT bug, but happily it is fixed in QT 4.7.2. Now, just have to wait until the Ovi Store accepts Nokia QT 4.7.2 apps....

On the web, what fonts should I use to create an equivalent experience cross-platform?

Because Linux (and its variants) have a completely different set of fonts than Windows and Mac OS X, is there anyone with any experience of creating cross-platform font families - ideally finding equivalents to the common fonts found on the aforementioned operating systems?
If so, what is the best route to take?
Here are some good up-to-date listings of the most-installed fonts for PC, Mac, and Linux:
Sans serif font sampler and survey results
Serif font sampler and survey results
Hope this helps your decision!
List of Web Safe Fonts.
Most OS'es have support for Microsoft's Core Fonts For the Web. They all come bundled with OSX, and I'm reasonably sure they'll work (or have near-identical variants) on most any linux distro.
The Microsoft Typography page is also pretty cool
Just to clarify: You are looking for names of fonts that will make your website-design look similar to Windows and Mac OS X when viewed under Linux, you are not looking to design new fonts, correct?
(I read your question in the same way that Jason Navarrete did, so at least two people misunderstood your question.)
The font names you are looking for might be something like the Liberation fonts that RedHat has released?
Incidently, 'sans-serif' doesn't give the user "any sans-serif", it gives the user his/her preferred sans-serif - which may arguably be better than one you pick.
Well, this is a hard question.
There are generally 3 fonts that are in some form or other always supported. These fonts are Adobe Times, Adobe Helvetica, and Adobe Courier. The problem is that while every system and foundry have a clone of these, they have different names. They are also not entirely the same, but have the same metrics. The windows trio: Arial, Times New Roman, and Courier New are the monotype clones of them. On linux these have been provided as bitmap fonts by adobe, and as outlines in form of the URW Nimbus {Sans, Roman, Mono} clones. The outlines however are not pretty on screen (they are on a printer) as they lack hinting.
The solution would be to go for a multichoice for websites. As microsoft has at some point made the "core fonts" available for redistribution, many unix/linux systems do have those fonts available. So go with them. The liberation fonts are straight clones of the MS/monotype fonts, so should go ok as alternatives with a similar experience. Then go for "Helvetica", "Times", and "Courier" before the sans/serif/mono choice that puts you in the user's hands.
Sitepoint has an excellent article on font stacks:
http://www.sitepoint.com/article/eight-definitive-font-stacks/
TrueType Fonts (TTF) will generally work on Windows, Mac, and Linux platforms.
Thanks Jason, but this isn't the answer I'm looking for. Many Linux distributions come with their own fonts that are different in name to the Mac/Windows versions - presumably because of font licensing issues.
I'd like a response from a Linux user (preferably developer) who has experience with coming up with similar looking fonts. I really don't want to have to give Ubuntu Firefox users 'any sans-serif'.
This article explains the basic approach that has the most chance of working cross-platform. You have to think in terms of stacks which are sets of broadly similar fonts which cover most platforms.
You are always safe saying 'serif' which will get you Times New Roman or similar or sans-serif which will get you Helvetica/Arial or similar on most platforms. Then as the article suggests you can go further and distinguish between 'wide' and 'narrow' groupings.
You can take a more 'progressive enhancement' approach choosing your ideal font and providing generic substitutes for those platforms which do not have it. However at the end of the day the web is not print and you only get approximate control over font choice. You can do a lot of custom typography using the well-supported CSS properties such as line-spacing. But you will never be able to say 'use this font' and have it work the identically even across Mac/Windows/Linux let alone mobile devices, kiosks etc...
TrueType Fonts (TTF) will generally work on Windows, Mac, and Linux platforms.
http://en.wikipedia.org/wiki/TrueType

What is the best way to handle English and Chinese in a Flex application?

I have a requirement to be able to provide a flex component in English and several asian languages. I have looked at the flex documentation and it seems that I have to build several swf's, which feels wrong.
Does anyone know of a straightforward and practical way of bundling string resources in different languages and handling the fonts?
I guess you know the basics of how to localize a Flex application, but if you would like to know more there's a good and thorough description here: Runtime Localization.
In Flex 3 you have three options on how to solve your problem:
compile all languages into the SWF and switch language at runtime
compile a separate SWF for each language
compile no, or a default, language into the SWF and load additional languages at runtime
The first option is probably the most common, the least complex and doesn't have many drawbacks. The other two can be used if you have special needs, like having to keep down the size of the SWF at all cost, or need to load all strings from a database at runtime.
To implement the first option you create a resource bundle for each language (basically a number of .properties files that lives in a directory named after the locale, for example en_US for US English or sv_SE for Swedish). In the code you refer to strings by calling the resource manager:
<Label text="{resourceManager.getString('mybundle', 'mystring")'}/>
That will retrieve a string called "mystring" in the resource bundle compiled from "mybundle.properties" in the current locale.
To make sure each locale is actually compiled into the application you add -locale=en_US,sv_SE to the compiler flags (but change the en_US,sv_SE part to the languages you have resource bundles for). You also need to add the location of the directories to the source path: -source-path+=locale/{locale} (the "{locale}" part will automatically be replaced by the values of the -locale flag).
Now you have compiled all your languages into the SWF and can change languages at runtime. The way to do that is to modify the localeChain property of the resource manager:
resourceManager.localeChain = ["sv_SE", "en_US"];
With the settings shown above the resource manager will first look in the Swedish resource bundle, and secondly in the one for US English. You can set another order at any time, and doing so will change all texts in the application then and there.
I encourage you to read the description I referred to above, it explains this in greater detail, and most likely in a more understandable way. It also explains how to do some preparations you need to do before you can compile applications with locales other than en_US.
The other problem you have is with fonts. That one is trickier. The best thing would be to have a font that had the full Unicode range of characters, that way you would only need to embed that and any text could be displayed. However, that means that your options are a bit more limited. I know that there is at least one version of Aria in Windows that has an enourmous number of characters, and on the Mac there is a Helvetica (I think, or it might be Lucida Grande, or both) that also has most of the ones you need to display many asian languages.
Embedding all languages into the same SWF usually does very little to increase the file size, because text is very lightweight, but fonts are definitely not. Embedding a the whole Unicode version of Arial can increase the file size of a SWF by several megabyte, which kind of sucks for web applications. Depending on the situation you may have to compile one SWF per language, just because the font data would otherwise make the SWF unwieldy.
Beware of fonts. System fonts aren't the prettiest but Asian fonts are too large to embed. We resorted to embedding Latin fonts for English and switching to system fonts for Chinese.
Be careful about rotating system fonts - your text will disappear. I think Flash 10 might have fixed this.
Also, be very careful with the font string you specify for Chinese.
Most OSes have nifty fall-back logic - if you specify Trebuchet and try to render a Chinese character, your OS might decide to use some Asian font instead. Flash seems to mess up this fall-back logic and switch between two or more Asian fonts dynamically. We had cases where mousing over a text block would switch the font.
To fix this, specify a font which includes all the characters you need (without falling back to some other font). You will need to test this across OSes, etc.
We use Flex for the client part of our application and support I18N via ResourceBundles.
In Flex 2.01 the language has to be built into the SWF - you can't change it at runtime. In Flex 3 you can switch language at runtime.
http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:_Runtime_Localization
An important step left out above is to run the command:
copylocale.exe en_US sv_SE
from the bin folder of the sdk. This is in the article though.

Resources