How to use Windows raster (.fon) fonts in JavaFX? - css

For backwards compatibility with the look and feel of existing applications I am looking for support in JavaFX for displaying Windows fonts of type *.fon. Is this possible in JavaFX? I have already tried to use CSS to apply the font named "System" which is defined in 8514sys.fon but it skips that and goes instead to Segoe.

Related

QML font fallback search

I am developing a chat application with QML that will run on Windows (from 7 to 10). I want to be able to display messages in any languages (Japanese for instance). Does QML fallback to any font installed system-wide until it find a font with the asked glyph? To put it another way, if I make sure my system has at least a font for any language would it be displayed correctly in QML without doing anything special?

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.

How to reflect updates to CSS at runtime in Visual Studio 2012?

I am working on a Metro-app for Windows 8 and using MS Visual Studio 2012. Currently I'm using SASS and Compass to automatically convert SCSS to CSS when I save the SCSS-file.
What I want is to be able to change the CSS at runtime. That is; I want to have the SCSS-file open on my right screen and when I make changes to it the running application on the left screen shows the changes. Currently I have to refresh the app in visual studio, but that does not preserve state.
So to summerize:
I have successfully installed Compass and SASS. When I change a SCSS file the CSS file (which is included in the project) is re-generated correctly
My running app does not reflect the changes made in the CSS-file. I need to reload the app in order to show the changes.
I want to be able to see the changes at runtime.
Any suggestion or help is much appreciated! I am willing to convert to LESS if needed.
Web Workbench from Mindscape is another tool that automatically generates CSS based on your SCSS. I'm not sure if it solves your problem of reflecting changes at runtime, but it's worth a try.
Microsoft Visual Studio 11 comes with an application called Blend (previously Expression Blend). In Visual Studio you can open a project in blend by right-clicking it in the solutions explorer and choose "Open in Blend".
In Blend it is possible to use something called "interactive mode" to switch states in the application and then freeze them to do CSS-changes. The CSS-changes made in Blend will automatically be displayed, even though the state is freezed.
One may also want to activate the option of reloading files in blend on changes without prompting. This will make it possible to watch changes done using SASS on the fly inside Blend. One downside is that Blend needs to get focus in order to reload the CSS-files. Up-side is that it does not reset state-information, thus making it possible to style pop-ups and dialogs with ease.
One can also choose to use the built-in GUI to change CSS with ease. The problem of doing this is that Blend do not support SCSS, so you will have to copy the modified CSS generated by use of Blend into the appropriate SCSS-files.
More on Blend and VS11 here.

Qt and UI Skinning

I wanted to consult with the sages here regarding Qt and skinning, get your opinion and chart a path for my development. My requirements are as follows:
My Qt/C++ application (cross platform with Mac, Windows and Linux versions) needs to have modular skins.
A skin is defined as a set of one or more elements: - Window background texture - Look/feel of UI controls such as edit boxes, drop down, radio buttons, buttons etc. - Look/feel of window "caption", resize grips etc.
Skins will be installed with the application installer, allowing the user to choose which one he/she wants to use. Users should be able to change skins on the fly.
Can I go the QML route? should this be custom and based on simple resources which are built into the application? Any design advice will be appreciated.
Thanks.
If I understood you correctly then stylesheet is the best way forward. You can create stylesheets similar to CSS and then pass them as command line option to your application or load on invocation to style your application at runtime. That way you can create multiple stylesheets each having a different look and feel and allow user to load them at will. Since its CSS it doesn't need any new learning and you can keep all your styling outside your source code.
Here are a list of resources that can get you up and running quickly:
http://blog.qt.io/blog/2007/11/27/theming-qt-for-fun-and-profit/
http://doc.qt.io/qt-5/stylesheet.html
I haven't played with QML yet, but you could also create a custom QStyle implementation that supports your resource format. Note that you'd lose style sheet support if you went this route.
Changing window captions is a little trickier if you want portability.
QML, if I understand correctly, doesn't really skin the widgets, it mainly deals with GUI layout etc etc.
QStyle is used to change the looks. It is a bit low-level though, and requires programming, so if you want to load different user-created skins (from an XML or so) it might be tricky to support extensive skinning. Chaining colors and a few items are easy enough though. (There might be someone else who've done something you could re-use.. not sure.)
For modifying widgets, use QStyle::polish(). You could use that to change the background picture (if it's a top-level window, or of a certain class). There are numerous repaint method to change almost every part of every widget.
Store/load the style using QSettings, by reading and setting the desired Style just after QApplication but before your main window is constructed.

How to approach problem of creating graphic buttons with dynamic text for web page

I want to be able to create links looking like buttons with dynamic text and graphic bakground, these buttons also have to change their apperance on mouse over/mouse down and when subpage which button corresponding to is currently opened ame as mouse down)
I want to avoid using
- java script/jquery
- server-side generated images
- flash
Ny first choice was CSS, technology called sliding-doors. Everyting was great until i tested my site on non-windows machine. And it seems that there is poblem with rendering same font of different platforms. I suspect that problem is connected with way of rendering of fonts of different systems or maybe somethuiing elese, anyway on MAC (and possibly on machines running linux) it looks like this
http://img196.imageshack.us/img196/3598/45257410.png
on windows it looks slightly different and in some way worse
http://img168.imageshack.us/img168/3590/41024479.png
If it is possible to get the same effect?
What other choices do i have?
I considered using CSS sprites, and manipulating button-link size and background position only but this including creating a wide image with all buttons in certain language with all three states.Is that way would be efficent? Is there any serious directions to not use this way of creating buttons?
Thanks in advance for any suggestions
MTH
Fonts are machine dependent. Outside of the basic ones, you cannot depend on a machine having the font you want. You need to have 3-4 roughly equivalent fonts, that you list for any given font in your css. List them most prefered to least (left to right) for your font-family. Machines will also display even some common fonts slightly differently.
Also remember that while you will often pull your site up side by side in both IE and Firefox, on Mac and Linux, your users almost never will. It doesn't need to look the same in all browsers, it just needs to look good in all browsers.
You're basically asking for rich functionality without any of the rich functionality platforms (javascript, flash, etc.)
I realize this doesn't answer your question, I'm trying to step it back a bit. Image rollover without any of the above platforms is hard, but possible. But it will probably require that you give up on the site being exactly the same in all browsers and just go for "good"

Resources