I am building a mobile application with localization support. The app supports three languages and it is targeted for android and ios. Everything works fine for debug builds; i can test everything for all the languages. When i do a release build, all the text on the app disappear! Buttons show with no text. If i change some of them to no use resourcemanager, the changed ones show the text. Does anyone knows why would this happen? I am using Flashbuilder 4.6, Apache Flex 4.11 air 13 beta.
Thanks.
To resolve this issue you must embedded font in you app. its a common scenario say when your system have XYZ font, so your app in your system give proper output, so there have different case say someone have a font so not got an issue but someone may be not installed font in his system at that time what our application do????? simple nothing. so i have solution for this question is to embedded a font in your app.
several way to embedded font in your app
first way(in css)
#font-face {
src: url("location");
fontFamily: alias;
[fontStyle: normal | italic | oblique] ;
[fontWeight: normal | bold | heavy] ;
[embedAsCFF:true | false] ;
[advancedAntiAliasing: true | false];
}
.customStyle {
fontFamily: myFontFamily;
fontSize: 24;
skinClass: ClassReference("spark.skins.mobile.TextAreaSkin");
}
second way(in Main app)
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#font-face {
src: url("../assets/MyriadWebPro.ttf");
fontFamily: myFontFamily;
embedAsCFF: false;
}
.customStyle {
fontFamily: myFontFamily;
fontSize: 24;
skinClass: ClassReference("spark.skins.mobile.TextAreaSkin");
}
</fx:Style>
for more help on embedding a font in your app go to
http://divillysausages.com/blog/as3_font_embedding_masterclass
may this will help you
Regards
JK Patel
I have finally figured out the problem, it was a bug in my code! There was no default value for ResourceManager localeChain on the first initialization of the app. I was not seeing this problem on my testing devices as the app had saved the localechain value in the device local storage. Every time i do a new development build and install on my devices, it would read the saved localechain on the first initialization. Thank you Patel
Related
I've been told by developer that only Regular 400 and Bold 700 can be implemented. Can someone please confirm this? Thanks!
It's possible.
Step 1. Install the font
The fastest way will be using expo-font and #expo-google-fonts/inter
https://docs.expo.dev/guides/using-custom-fonts/
BUT double-check on real devices because sometimes there are bugs like the famous 2 last characters trimmed
Step 2. Update app-mapping-theme.json
Update your ApplicationProvider customMapping props
// app-mapping-theme.json
{
"strict": {
"text-font-family": "roboto"
}
}
I imported the file on my App.js like this
import { default as mapping } from "~/constants/app-mapping-theme.json";
I'm trying to use some font ttf files placed in src/main/resources/fonts/ in JetBrains Compose for Desktop. How do I use the font files in the function androidx.compose.ui.text.font.Font()? I tried using the R.fonts.font_file mentioned in many online articles, but it seems like it only works on Android.
I know that there's this. He's facing the exact same problem I'm having here. I've tried this. Unfortunately, it didn't work. The only answer in the question I linked above says that the solution was to put the font files in src/main/resources and use:
Font(
resource = "font.ttf",
weight = FontWeight.W400,
style = FontStyle.Normal,
)
But it doesn't work. The androidx.compose.ui.text.font.Font() function on my machine requires 3 params, resId, weight, and style.
public fun Font(
resId: Int,
weight: FontWeight,
style: FontStyle,
)
(copied from the Idea tooltip)
As you can see, it requires a resId: Int. How am I supposed to specify it in an Int?
Since JetBrains Compose for Desktop is still in its early beta stage, resources I could find on the web is really scarce. I tried searching for "kotlin resource id" to find the way to refer to the font file as an ID, but all I could find are really Android-targeted things. I also tried searching for "jetpack compose desktop font" and "jetbrains compose font", and the results I get are also flooded with Android things. Yes, I tried using "-android" in the search query, but all that's left in the results are irrelevant. The question I linked is the only thing I could find about Jetpack Compose for Desktop font.
Here's most of my project structure.
Here is the tooltip that IntelliJ Idea shows when I hover over Font(). It isn't that useful, is it?
Kotlin version: 1.5.10
Jetpack compose version: 0.5.0-build225 (latest pre-release)
By the way, I'm using Manjaro Linux on a MacBook if it matters.
You can't use androidx.compose.ui.text.font.Font for this. Import androidx.compose.ui.text.platform.Font instead.
Perhaps counter-intuitively, androidx.compose.ui.text.platform.Font is a valid parameter type in a androidx.compose.ui.text.font.FontFamily, and supports resource, weight and style.
I found this link on how to embed custom fonts in XAML apps. Is there some way I can achieve the same while building using JS? The following method did not work.
#font-face {
font-family: "MimicRoman";
src: url("/fonts/MimicRoman.otf") format('opentype');
}
Looks ok to me, that's how it should work. You are sure the path to the font file is correct and you did also actually use the font-face somewhere? For instance,
body {
font-family: MimicRoman;
}
Also, you are sure there are no other font-family declarations taking precedence over the declaration you've made? (this can be seen quite easily with the DOM Explorer).
If nothing else works, you might want to test some other font file, just in case that file is corrupt or something (some working examples from here, for instance).
I'm a friend clean GUI's. Unfortunately I need to overwrite the "chrome://global/skin" stylesheets for some reason.
What's the best method, to implement different os-based stylesheets into xul-documents - eg. for GUI's like windows xp, windows aero or macosx aqua (overlay-aero.css, overlay-aqua.css...).
Does Mozilla provide any standards for os-based stylesheet-implementing?
Without really knowing how you intend to overlay the styles: yes, the usual approach would be using manifest flags. For example, if you define a style overlay in your extension's chrome.manifest file, you would do it like this:
style chrome://browser/content/browser.xul chrome://myExtension/skin/overlay-win.css os=WINNT
style chrome://browser/content/browser.xul chrome://myExtension/skin/overlay-osx.css os=Darwin
style chrome://browser/content/browser.xul chrome://myExtension/skin/overlay-linux.css os=Linux
You can also use Mozilla-specific media features to distinguish between different themes of one OS in your stylesheet. For example:
#media all and (-moz-windows-classic)
{
...
}
#media all and (-moz-windows-theme: aero)
{
...
}
#media all and (-moz-windows-compositor)
{
...
}
Sounds to me like you want to create your own Firefox Theme (essential an extension made up of CSS files and images that replace the standard look of the browser). There's a whole section about this on Mozilla Development Center: https://addons.mozilla.org/en-US/developers/docs/how-to/theme-development
I'm trying to gauge the possibility of a patch to WebKit which would allow all rendered graphics to be rendered onto a fully transparent background.
The desired effect is to render web content without any background at all, it should appear to float over the desktop (or whatever is displayed behind the browser window).
Has anyone seen an app do this? (I can think of some terminal emulators that can.) If anyone has worked inside of WebKit (or possibly Gecko?) do you think it would be possible to do this?
Update: I've come to realize that Mac OSX dashboard widgets use this exact technique. So, this must be possible.
Update 2: I've compiled WebKit on linux and noticed the configure options include:
--enable-dashboard-support
enable Dashboard support default=yes
I'm getting closer. Can anyone help?
Update 3: I continue to find references to this in posts on various related mailing lists.
https://lists.webkit.org/pipermail/webkit-dev/2008-September/005019.html
https://lists.webkit.org/pipermail/webkit-dev/2009-June/008182.html
Solved!
Through ongoing research, scouring forums and source code repositories, I peiced together the necessary steps to accomplish this using only libwebkit and a standard compiz desktop (any Xorg desktop with compositing should do).
For a current libwebkit (1.1.10-SVN), there is an Ubuntu PPA:
deb http://ppa.launchpad.net/webkit-team/ppa/ubuntu jaunty main
deb-src http://ppa.launchpad.net/webkit-team/ppa/ubuntu jaunty main
As far as the code goes, the key is calling webkit_web_view_set_transparent.
And of course the system you're running it on should have a capable graphics card (intel, radeon, or nvidia) and be running a compositing window manager (like Compiz).
And finally, to actually see transparency, the content you're viewing must set a transparent background using CSS3, otherwise it's still completely opaque.
It's as simple as:
BODY { background-color: rgba(0,0,0,0); }
Here' is the full sample for the simplest possible webkit browser app, with transparency support:
#include <gtk/gtk.h>
#include <webkit/webkit.h>
static void destroy_cb(GtkWidget* widget, gpointer data) {
gtk_main_quit();
}
int main(int argc, char* argv[]) {
gtk_init(&argc, &argv);
if(!g_thread_supported())
g_thread_init(NULL);
// Create a Window, set colormap to RGBA
GtkWidget* window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
GdkScreen *screen = gtk_widget_get_screen(window);
GdkColormap *rgba = gdk_screen_get_rgba_colormap (screen);
if (rgba && gdk_screen_is_composited (screen)) {
gtk_widget_set_default_colormap(rgba);
gtk_widget_set_colormap(GTK_WIDGET(window), rgba);
}
gtk_window_set_default_size(GTK_WINDOW(window), 800, 800);
g_signal_connect(window, "destroy", G_CALLBACK(destroy_cb), NULL);
// Optional: for dashboard style borderless windows
gtk_window_set_decorated(GTK_WINDOW(window), FALSE);
// Create a WebView, set it transparent, add it to the window
WebKitWebView* web_view = web_view = WEBKIT_WEB_VIEW(webkit_web_view_new());
webkit_web_view_set_transparent(web_view, TRUE);
gtk_container_add (GTK_CONTAINER(window), GTK_WIDGET(web_view));
// Load a default page
webkit_web_view_load_uri(web_view, "http://stackoverflow.com/");
// Show it and continue running until the window closes
gtk_widget_grab_focus(GTK_WIDGET(web_view));
gtk_widget_show_all(window);
gtk_main();
return 0;
}
Back in Safari 1.3 and 2, there was a hidden debug menu (invoked via the Terminal: defaults write com.apple.Safari IncludeDebugMenu 1) that included a “Use Transparent Window” option.
http://www.macosxhints.com/article.php?story=20050418015445258
http://www.wiredatom.com/blog/2005/10/20/safari-transparency/
Not sure if this was a WebKit thing or a Safari thing though.
(In Safari 3, the debug menu seems to have been replaced by the “Develop” menu (enable in Preferences > Advanced) which doesn’t have the transparent window option.)
Basically you want to be setting the ARGB colour space to be sending to the window manager. Obviously only window managers that support compositing will be able to take advantage of this.
You might want to talk to the screenlet and compiz developers they should be able to help out more.
This gist works for me, as of 2013, tested only with ubuntu:
https://gist.github.com/pouria-mellati/7771779
I have a new solution which is really easy to do, for a single screenshot. It's using node.js with phantom.js library.
install node.js
run 'npm install -g phantomjs' in console/terminal
save the following as script.js and run it from console 'phantomjs script.js'
var page = require('webpage').create();
page.viewportSize = { width: 1920, height: 1500 };
page.open("http://www.theWebYouWantToRender");
page.onLoadFinished = function(status) {
page.evaluate(function() {
document.body.style.background = 'transparent';
});
page.render('render.png');
phantom.exit();
};
profit? :) enjoy