Comments (3)
The big difference between iOS and Android is that:
- iOS supports wide range of typography out of the box (You can see the list of fonts available here: http://iosfonts.com/)
- Whereas, Android.....just check out this stackoverflow post http://stackoverflow.com/questions/29384114/what-fonts-are-installed-by-default-on-android - There are 3 fonts. Yes 3.
Of course you can include additional fonts to the project bundle, but this has limitations. I initially attempted to add as many fonts as I could on Jasonette-Android, and ended up with a huge file size. We've been trying to slim down the apk size so this was far from desirable, so I got rid of most of the font files (except for a couple which you can find under app/assets/fonts
.
You can actually use the font names directly in JSON and it should work, but the problem is these font names are not cross-platform. So it's hard to make it work both on iOS and Android.
One way to get around this would be to create two separate JSON files for iOS and Android.
Another (better) way would be to use the newly introduced mixins and environment variables to detect the operating system and selectively mix in fonts.
However these are all so complicated and not ideal. That's why I didn't bother to dig deep into this yet. If anyone has a good idea on how to tackle this issue, please feel free to share.
p.s.
The current algorithm for font detection on Android is super primitive--it looks at the font name (for example HelveticaNeue-Bold
) and if it contains the keyword bold
, it just makes the font bold (with the Android default font). See here for the implementation.
from jasonette-android.
Generally speaking, what I'd like in this area is ability to write my JSON stylings in a head.styles setup and then be able to reliably call on that font in any style block without having to wonder if I got the right font for the right OS.
While it's disappointing Android only ships with three, it looks like they can be thought of as three major font families, serif, sans, and monospace. So a good Jasonette supported solution could be to assume 80% of apps built with it will use one of three variants with variants applied by setting bold, italics, etc. and provide OS specific font choices to match. So, for example, today, we're doing this:
"styles": {
"menu_item": {
"font": "HelveticaNeue-Bold",
"size": "16",
"background": "#698269",
"color": "c8c8c8",
"align": "right",
"padding": "8"
},
Which is necessarily iOS specific. At this point I am feeling somewhat trapped into tying the JSON too closely to the target device and really don't want to get into mixing in and responding based on device/env variables. To avoid this device dependency trap, we could utilize the adapter pattern and supply the three main families Android supports, namely, sans, serif, and mono across both iOS and Android by introducing a new "font_family." The goal is that we could do this:
"styles": {
"menu_item": {
"font_family": "sans-serif",
"font_style": "normal",
"font_weight": "bold",
"size": "16",
"background": "#698269",
"color": "c8c8c8",
"align": "right",
"padding": "8"
},
Then make it so "sans-serif" would, by convention, translate to HelveticaNeue-Bold on iOS and, I'm guessing, Ruboto-Bold on Android.
To add support for any font, I recommend taking a chapter out of CSS's own solution to the problem. That is, we're able to do something like this to either override convention or name a new font family:
"styles": {
"@font_face": [{
"font_family": "sans-serif",
"font_weight": "normal",
"font_style": "normal",
"src": "app/assets/my_favorite_sans.ttf"
},
{
"font_family": "sans-serif",
"font_weight": "bold",
"font_style": "normal",
"src": "app/assets/my_favorite_sans_bold.ttf"
},
{
"font_family": "fancy-pants",
"font_weight": "bold",
"font_style": "normal",
"src": "app/assets/a_fancy_pants_bold.ttf"
}
]},
Now, given the above, the conventional sans-serif font is replaced with my own font choices and I now have a new font family, "fancy-pants" I can use throughout my styling.
I suggested "@font_face" instead of "font_face" to call out that we're going to override what the framework does by convention and that these fonts will be used wherever we're utilizing said font_family names in our styles.
The unresolved thing in the above is what to do if I declare "fancy-pants" bold, but then use "font_weight": "normal" in my stylings. My suggestion, if the OS doesn't support approximations, then fallback to the conventional sans font. If this is the case with the OS, then falling back allows the developer to spot the problem and supply additional font face file to handle normal weights. Otherwise if approximations are supported, feed the necessary info to the OS.
These are just some initial thoughts, so feel free to critique or improve.
from jasonette-android.
Another idea, we could add a font
object under head
linked to ios and android font name:
{
"$jason": {
"head": {
"fonts": [
{
"name": "mycustom_name",
"android": "Droid Sans",
"ios": "HelveticaNeue",
"src": "myfont.ttf"
}
]
}
}
}
Then, anywhere I need to pass a font, I provide mycustom_name
.
What do you think about that ?
EDIT: After reading the @mwlang, CSS inspiration is a good idea. But I would no put it under styles
since it's not a style.
from jasonette-android.
Related Issues (20)
- IndexOutOfBoundsException Error - App crashes at second load HOT 1
- Security Guidelines
- No example of loading.json HOT 2
- Close Preload only when html in WebView completes rendering
- Ability to detect that WebView failed to load
- POST request with json data HOT 1
- Development moved to https://github.com/jasonelle/jasonelle HOT 8
- Gradle error: 'Could not find lint-gradle-api.jar' HOT 1
- Back button closed app HOT 4
- Jasonette-android build.gradle
- get value of TextField and set it to label as text
- Can't run demo app at Android 4.4.2 device HOT 4
- App only saying Offline... HOT 1
- Web Container to have location access HOT 3
- cookies are not stored
- 64bit Warning when submitting to Google Play store. HOT 4
- Top section of web browser doesn't get taps HOT 3
- web container not downloading pdf file
- Filter items through Menu-Search
- Link
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jasonette-android.