Circled bullets ⦿ not appearing on android WebView for API < 21 - java

I'm trying to load an html file that contains the circled bullet symbol: ⦿. It's showing up fine for API 29 but doesn't seem to be working for API 21. Is there a workaround for lower APIs to fix this issue?

If it might help anyone with the same/similar issue, what I did was inject #font face with fallback fonts inside my html file and specified the order in which I wanted the fonts to load - "Times New Roman" being the primary font I chose followed by "CODE2000" in case the primary font had missing glyphs. And if there were any missing glyphs still, it would fallback to an available serif font. So here, I wanted "Times New Roman" to be my primary font, but since it did not support the circled bullet glyph in API 21, a reserve font supporting the circled bullet glyph was added which fixed the issue for me.
<style>
#font-face {
font-family: 'Times New Roman';
src: url('file:///android_asset/fonts/Times New Roman.ttf');
}
#font-face {
font-family: 'Code2000';
src: url('file:///android_asset/fonts/CODE2000.TTF');
}
body { font-family: 'Times New Roman', 'CODE2000', serif; }
</style>

Related

How to use custom fonts with CSS in JavaFX?

I'm going to lose my mind now. I am unable to connect my font in css styles for a label in my javafx project. I just don't know what the matter is, the stylesheet is connected correctly, because I can change the color of the label. I put the font file in the same directory as the stylesheet, tried even specifying the absolute path. Nothing works. What am I doing wrong?
Java 11, JavaFX 16.
And yes, I checked all the titles and the name of the font. Everything matches
CSS
#font-face {
src: url("Lobster-Regular.ttf");
}
.label {
-fx-font-family: "Lobster";
}
FXML:
<Label id="main_label" layoutX="237.0" layoutY="47.0" stylesheets="#styles/lable.css" text="Test" textFill="WHITE">
</Label>
enter image description here

Unicode emojis with colour

I'm trying to build a instant messaging application using JavaFX. I want to implement emoji support by using unicode however, when using a font such as Google's Noto Color Emoji the emoji's only appear as greyscale. like so:
I've applied the font like so and can confirm that it is loading correctly.
#font-face {
font-family: 'Noto Color Emoji';
src: url('/fonts/NotoColorEmoji.ttf');
}
.message-widget-font {
-fx-font-family: Noto Color Emoji;
}
Applying the CSS to the Text object:
messageText.getStyleClass().add("message-widget-font");
Is there a way to get the emoji's to have colour?

How to change font on css?

I'm trying to manipulate the font in Agenda from jfxtras (javafx).
I have a css file linked to it.
I figured out how to make it black and bold as well.
.AgendaText {
-fx-text-fill: BLACK;
-fx-font-weight: bold;
}
But I don't know how to change the font to say, Arial.
Thanks,
Browser will try to take first font, second font and if it wont be able to find it it will serve a sans serif system font
.AgendaText {
font-family: arial, helvetica, sans-serif
}

Convert HTML to PDF with Special Characters using Java

I am using flying saucer with iText 2.1.7 for converting html to pdf. It works fine, but the problem occurs when there are some chinese, korean, etc characters in the html.
I get unexpected characters in my PDF instead of the normal chinese characters
I found this issue opened, so I assume there is currently no way of making flying saucer into rendering the PDF correctly?
PS: I also found this issue, but I can't understand the solution they have provided.
This is the code that I am using
String doc = file.toURI().toURL().toString();
ITextRenderer renderer = new ITextRenderer();
renderer.getFontResolver().addFont (
"C:\\ARIALUNI.TTF",
BaseFont.IDENTITY_H,
BaseFont.EMBEDDED
);
renderer.setDocument(doc);
String outputFile = "report.pdf";
OutputStream os = new FileOutputStream(outputFile);
renderer.layout();
renderer.createPDF(os);
os.flush();
os.close();
Where file is the html which I am trying to convert.
Is there some other way or library to do the same?
This is the css that i am using
#font-face {
font-family: "Arial";
src: url("media/arialuni.ttf");
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
The HTML file that I need to convert
These are the re-compiled flying saucer jar compatible with itext 2.1..x
Your font is probably not embedded in the PDF file. ( How do I know if the fonts in a PDF file are embedded or not? )
Every font has a name, ARIALUNI.TTF defines Arial Unicode MS, you should use that.
So change this:
#font-face {
font-family: Arial1;
src: url("arialuni.ttf");
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
* {
font-family: Arial1;
}
To this:
#font-face {
font-family: Arial Unicode MS;
src: url("arialuni.ttf");
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
* {
font-family: Arial Unicode MS;
}
This way the font will be embedded.
And you don't need to call renderer.getFontResolver().addFont, the css is enough.
Try this:
font.addFont(Html2Pdfs.class.getResource("SIMSUN.TTC").toString().substring(6),BaseFont.IDENTITY_H,BaseFont.NOT_EMBEDDED)

Changing the rich:simpleTogglePanel header style

Is it possible to change the header style of a rich:simpleTogglePanel ?? The font of the header is always "bold" and I want it to be normal.
I tried with the style attribute this way: style="font-weight:normal" without result.
Any idea?
Have you tried putting the !important at the end of your style definition(i.e. style="font-weight:normal !important;")?
Also, as I'm sure you are aware, it is usually better to specify your style in a separate stylesheet. I've customized the <rich:extendedDataTable in this manner (not sure if this is a hack or not, but it works great for me). Open your page in a browser and then crack open the developer tools (press F12 in Firefox with FireBug installed, or in Chrome right click on the rich:SimpleTogglePanel and click 'Inspect Element'. This will let you see the CSS definition name used by the RichFaces framework. Just create a new .css file and define the style you want using the name you find RichFaces is using.
/*This class defines styles for a table cell.*/
/*tableBorderWidth, tableBorderColor border-bottom*/
/*tableBorderWidth, tableBorderColor border-right*/
.rf-edt-c {
border-bottom: 1px solid #021e2f;
border-right: 1px solid #021e2f;
height: auto !important;
min-height: 26px;
}
As you can see, you may need to specify the !important tag there as well, but it keeps the style outside of your page...
Hope this helps.

Categories