I am trying to display phonetic symbols in a WebView, but so far I am only getting squares.
For instance, for the word "apostrophe", this should be displayed:
əˈpåstrəfi
but all I am getting on the display is:
□□påstr□fi
If it would help, I am getting the strings from an SQLite database. The string I retrieve has some HTML tags in it, so I use this:
webView.loadDataWithBaseURL("file:///android_asset/",
article, "text/html", Encoding.UTF_8.toString(), null);
where I have my CSS files in /assets. And the article variable contains some text enclosed in HTML tags.
I've resolved problem to display phonetic symbols in TextView. The problem is the default android fonts are not implement IPA symbols. I can advise to use ccs like this
#font-face {
/* Regular */
font-family: "ConstructiumRegular";
src: url("http://openfontlibrary.org/content/RebeccaRGB/412/Constructium.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-variant: normal;
font-stretch: normal;
}
In me case mentioned Constructium.ttf fits.
If you pick up a unicode font like Gentium,
and you make sure you can change your font with a utility like this, you should be good to go. I don't have an Android, so there may be issues surrounding types of fonts that can be installed. You may need to check into that, or the font install utility that I've cited may not work well for you. ymmv
Related
I am trying to allow the HTML font-size in a Xamarin.Forms WebView to increase/decrease in size according to the user's accessibility Large Text settings.
I want to do the following:
1: Get the preferred font size for text options (title, body, caption, etc.) from the Accessibility Large Text options for iOS and Android.
2: Get the default size for some HTML text (h1 could be 15px, h2 could be 13px, h3 could be 11px, p could be 7px, etc.) and use that with the correct text option (h1 <-> title, p <-> body) to calculate the new font-size for that HTML element.
I have found some links for iOS, Android/iOS and Xamarin.Forms on how to get some font-sizes but I can not figure out how I would get these sizes, translate the sizes of these text options to the size of some default HTML elements (H1,H2, P) and do the math to calculate the new font-size for the CSS.
Can someone help me out by figuring out some sort of plan on how I would do this? Or can someone help me by giving me a link on how I can get some sort of percentage on how big a font-size is compared to a certain default value thanks to Accessibility large text?
Thanks!
I've figured it out:
Android changes the HTML text size according to the accessibility settings automatically. No work required!
iOS allows a developer to implement several CSS classes to make the WebView change
it's text size to the accessibility settings on the iOS device.Click here to find out more
These are the classes:
-apple-system-headline
-apple-system-subheadline
-apple-system-short-headline
-apple-system-short-subheadline
-apple-system-body
-apple-system-short-body
-apple-system-tall-body
-apple-system-caption1
-apple-system-caption2
-apple-system-short-caption1
-apple-system-footnote
-apple-system-short-footnote
Go to this website on your iOS device to see what the classes look like
To use Apple's predefined fonts:p {font: -apple-system-body}
To use your own font: (You can also create your own font-family with #font-face and reference that instead of Arial!)
p {
font: -apple-system-body;
font-family: Arial, sans-serif;
font-weight: normal;
}
You can use the following properties:
font-family
font-weight
font-style
font-variant`
To use your own font-size:
p {
font: -apple-system-body;
font-family: Arial, sans-serif;
font-weight: normal;
}
.body-text-size {
font-size: 1.1em;
}
<p><span class="body-text-size>This is some text in my page.</span></p>
Hope it helps!
Update 04-2020: I noticed one of my preview links was dead. I fixed it by finding another repo that hosted the file. I have linked that one instead and in case my links die again, I have added them to the web archive so you can find them there! :)
I am quite new (read absolute beginner) to mobile development using hybrid framework. For my first project I decided to use the Supersonic framework by AppGyver. The problem occured, when I wanted to change the font of title in navigation bar. Here's what I tried:
I put downloaded font-related files into folder appName/app/common/assets/fonts.
Afterwards I created a stylesheet, that contains "custom" font definition:
#font-face {
font-family: 'ralewaybold';
src: url('/fonts/raleway-bold-webfont.eot');
src: url('/fonts/raleway-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/raleway-bold-webfont.woff2') format('woff2'),
url('/fonts/raleway-bold-webfont.woff') format('woff'),
url('/fonts/raleway-bold-webfont.ttf') format('truetype'),
url('/fonts/raleway-bold-webfont.svg#ralewaybold') format('svg');
font-weight: normal;
font-style: normal;}
saved it into raleway.css (here, I need to say, that I tried to put this code into android.css and application.css files, but none of those worked.)
Finally, I wanted to change the font of navigation bar title of default application (created by steroids create appName) by editing
navigation-bar title {
...
font-family: "ralewaybold";}
but nothing happenned.
As I said in beginning I am quite new to hybrid development (and stuff around it), so I will appreciate very much, if you'd advice anything that would help me.
I also had some trouble with Fonts in Android like yours. Simply as that: some Fonts work some dont and it doesnt matter if it is ttf or somewhat else supported.
You can jsut check if it doesnt work with other fonts. If one Font doesnt work Android just uses the default font Android Sans...
I possess two complementary fonts that are installed on my computer (Linux), and that are used to render every characters that the two fonts have.
I would have liked to use in the same way these fonts in Android. Unfortunately, I don't know how to do this (I know how to load one font).
I have tried to merge them with FontForge, but unfortunately I couldn't because the total number of glyphs is over 65535 glyphs (which is the limit of the sfnt format).
Is there a possibility to go over 65535 glyphs, so that the font can be used in Android?
If not, is there a way to use these fonts conjointly in Android in general, so that the characters not recognized by a font are recognized by the other (like my computer does)?
If not, is it possible to use two Typeface in a TextView, so that the characters not recognized by a font are recognized by the other?
I know that we can use Spannable to use different Typeface for different parts of the TextView, but that's not exactly my need here.
If not, is it possible to detect all the unrecognized characters of my TextView, so as to use the other font only for them?
Is it possible to use the CSS style "font-family" in a TextView, so as to provide an alternative font in the case the first fails for some characters?
Thanks to the direction given by JaiSoni, I have managed to find a way to solve my problem using HTML and CSS : I have used a WebView, and have declared the #font-face to define my fonts. Then, I have used them in the CSS attribute "font-family" like this :
<style type="text/css">
#font-face {font-family: MyFont; src: url("file:///android_asset/fonts/font.ttf")}
#font-face {font-family: MyFont2; src: url("file:///android_asset/fonts/font2.ttf")}
body {font-family: MyFont2, MyFont; }
</style>
Thank you very much.
Hello Stackoverflow—to make what I'm asking about more clear, I'll elaborate.
I'm using the following symbols in a rotation transformation: ☎ and ♦ and ✔
(☎ and ♦ and ✔ respectively).
On my android device though (smart phone, LG G4), it replaces these text symbols with non-text picture emojis that do not format with my transformation or font size styles.
I want to force the browser to use the regular symbols in the font that I have supplied on my website (using #font-face with an included .ttf file). On desktops, I have no issues at all displaying my selected symbols as intended.
Your help is greatly appreciated as I'd rather not be forced to make an image substitute of my text arrangement. Thank you.
You should include a webfont with support for the characters you want to use.
To include an icon font in your CSS, use the following code :
#font-face {
font-family: 'myfont';
src:url('fonts/myfont.eot?-td2xif');
src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'),
url('fonts/myfont.woff?-td2xif') format('woff'),
url('fonts/myfont.ttf?-td2xif') format('truetype'),
url('fonts/myfont.svg?-td2xif#myfont') format('svg');
// Different URLs are required for optimal browser support
// Make sure to :
// 1) replace the URLs with your font's URLs
// 2) replace `#myfont` with the name of your font
font-weight: normal; // To avoid the font inherits boldness
font-style: normal; // To avoid font inherits obliqueness or italic
}
.emoji {
font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback
speak: none; // To avoid screen readers trying to read the content
font-style: normal; // To avoid font inherits obliqueness or italic
font-weight: normal; // To avoid the font inherits boldness
font-variant: normal; // To avoid the font inherits small-caps
text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase
line-height: 1; // To avoid the font inherits an undesired line-height
-webkit-font-smoothing: antialiased; // For improved readability on Webkit
-moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla
}
You can then include your symbol like this:
<span class="icon">☎</span>
<span class="icon">✉</span>
If you don't know a webfont that supports your character, you can easily create one yourself using the Icomoon App. See also my open source Emoji icon font for an example of an Icon font with support for 650 symbols, which I created with the Icomoon App.
If you plan on using my Icon font (or any other icon font), I would recommend that you edit the font in the Icomoon app to remove all symbols except the ones you need, as that would reduce your filesize significantly!
More info:
Create webfont with Unicode Supplementary Multilingual Plane
symbols
I have a simple line of text
<h4>This is just some placeholder junk</h4>
with the following CSS:
h4 {
font-size:20px;
color:#000000;
font-style:italic;
}
This is working in everything but the default browser on Android GS3.
I've tried wrapping the text in a span with font-style:italic;, as well as including <i> and <em> tags, but the font will not slant. Am I overlooking something simple here?
In terms of performance I would not recommend to use a custom font on mobile devices at all, unless there is really no other way. But this seems to be a problem caused by Samsung: https://code.google.com/p/chromium/issues/detail?id=169446#c11
So I think this is one of the rare situations where you should go with a custom font. Of course it should be a custom font that supports the italic font style. Don´t forget the font-styleproperty in the #font-face declaration.
#font-face {
...
font-style: italic, oblique;
}