I am using react and meteor for web development. I want to able to change font family respect to language change. I am using i18n to translate to different language. For english I want 'Century Gothelic' and for thai text I want to change it to Sukhumvit font.
How I can achieve this.
You might try to use a global css class and relatively change font-family based on language.
On how you can achieve that, if you're using redux, it's pretty easy, every time you change language (click button or something), dispatch an action to change the state that related to the global css class.
Otherwise, you have to figure out how to store that language change to express it so that main app component can detect that change.
Related
I am in the brainstorming phase of a website and trying to select how to write my CSS. The website will support two languages. One language is latin based, think French, and the other is not, think Arabic. Arabic is rtl language. Also, that means menus text are going to change along with other elements. For example if I have a menu button with "Who are we", it must be translated to the other language.
Do I need to define two separate CSS files and pick one based on region/or user selection? Or is there a better way to approach this?
Also, when it comes to changing menu text, do I change only these fields or the entire HTML? Or it depends on the amount of text needs to be changed per HTML page?
The way I do it, in vanilla JS, is I make a copy of each text element for each language and add language class to it(so I can query select it later). Make a html selector for languages. From JS I add class "hide" to all elements belonging to unselected languages. All CSS that class hide contains is display:none. Frameworks, like Angular, contain more elaborate solutions, but for JS this one makes due.
For react you can use npm install i18next react-i18next --save. This solution will leave you with much cleaner view template since there you are just going to name every text field and then in code add to each field its possible translations. As margins, alignments and rest of css goes, usually you don´t even have to touch it, translated text is usually quite similar so if there are breaking differences go with individual solutions. For example, since Arabic is written from right to left, add class with text-align: right; when detecting Arabic.
I am working on an application using Vue.js 2.0. and Vuex for state management. I need to implement the possibility of so-called "branding", i.e. the user needs to have the ability to select a theme for their account, a specific color which will then be applied to the application's style.
The first option I went for and managed to implement as a proof of concept was to use Vuex to store the desired style in the application store as an object with Vuex which I then used for binding to the style of the elements it needs to be applied to. The color picker for choosing the color triggers a mutation on the state to change the color. This works completely fine and isn't even too hard to use as it allows for just using an expression like :style ="$store.state.brand" on the html elements it needs to be applied to. It updates on all components as I change the color. This option has its advantages as it is pretty straight forward and also allows the user to select whichever color he/she wants from a color picker. However, it has its limitations in terms of design, as complicated styles cannot be implemented in this way (e.g.color change on hover, active classes for tabs or pages etc.)
So the second option I would like to try and suggest to our client is to have a set of predefined themes from which the user can choose. Those themes would be defined in css files (using sass/less or something similar). What I need to implement now is the following:
When the user chooses a theme, let's say from a dropdown, I want to load the style for the application from the appropriate css file and reload the application to reflect those changes.
What is the most efficient and best practice way to do this in Vue?
So in case anyone else needs this, we ended up using styled components. For more details, checkout https://www.npmjs.com/package/vue-styled-components. We created styled components for elements that need to receive the specified theme's color (button, radio button, header, menu items etc.) and passed them the required color in as a prop. The value of the prop comes from the Vuex store so it is consistent across the whole application. The benefit of this approach is that the color choices are limitless for the client (compared to the predefined themes we were considering). Furthermore another benefit is that now the client can let's say change the color in the vuex store through a color picker and see the theme changing live. Finally, this approach also enables you to use all features of css like creating more complex styles with css selectors for example. This was not possible with regular vue style bindings. Feel free to contact me if you need more details on this.
I would like to build a custom TextArea (or a Text objects...).
Here are the limitations I found in the currently available nodes:
TextArea: provide functionality to apply font styles, select, and "getSelected" text. but it does not allow for applying different style to sub-Strings. A style is applied to the whole TextArea.
HTMLEditor: provides means to apply different styles, but not ways to get what string the user selected.
TextFlow: Allows to program different styles to strings. But it is like a label. Not interactive.
I need something a Text Area where users can type, selected, and my code would know what they selected to give them option to apply font styles to the selected string. So I guess what I need a custom object.
Do you agree? How do I go about that?
It seems like you are waiting, like many of us, a kind of JEditorPane (or StyledText, for those who uses SWT) in Java FX.
For now, there is no component of this kind in Java FX.You can use CodeAreaFX, but the performances are not at the best.
If you ant to use WebView as a text editor, you can get selected text by using javascript.
I imagine changing the styling is a common requirement. Say a user wishes to change the background colour and the font style. I'm looking for a component fit into any flex application and edit the style sheets.
I know I can build one from scratch using the (get/set)Style methods and using the StyleManager class, however I didn't want to "reinvent the wheel." I assume there is a component that someone has already written - google hasn't thrown up a suitable candidate.
There's no such base component. Setting styles is very personal, so there's no common solution.
BTW, look up here
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.