Flying Saucer font for unicode characters - css

I am generating PDF using Grails export plugin (basically, Flying Saucer). My GSP page is an UTF-8 page (or at least properties are showing that it is UTF-8, also in the beginning of the GSP page there is a <?xml version="1.0" encoding="UTF-8"?> directive). At first generated PDF properly contained umlaut characters "äöüõ", but Cyrillic characters were missing from PDF (not rendered at all). Then I've changed my css file as described in documentation by adding following:
#font-face {
src: url(ARIALUNI.TTF);
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: UTF-8;
}
body {
font-family: "Arial Unicode MS", Arial, sans-serif;
}
ArialUni.ttf is also deployed to the server. But now I am getting both umlaut characters and Cyrillic characters rendered as boxes. If I am changing -fs-pdf-encoding property value to Identity-H then umlaut characters are rendered properly, but Cyrillic characters are rendered as question marks.
Any ideas of what font can be used to properly render both umlaut and Cyrillic characters? Or may be my CSS is somehow wrong? Any hints would be much appreciated.
Upd 1:
I have also tried following css (which was generated by http://fontface.codeandmore.com/):
#font-face {
font-family: 'ArialUnicodeMS';
src: url('arialuni.ttf');
src: url('arialuni.eot?#iefix') format('embedded-opentype'),
url('arialuni.woff') format('woff'),
url('arialuni.ttf') format('truetype'),
url('arialuni.svg#arialuni') format('svg');
font-weight: normal;
font-style: normal;
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: UTF-8;
}
body {
font-family:'ArialUnicodeMS';
}
I've added <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
I was also trying to run grails with -Dfile.encoding=UTF-8, as was mentioned here: http://grails.1312388.n4.nabble.com/PDF-plugin-Having-problems-with-instalation-td2297840.html, but nothing helps. Cyrillic characters are not shown at all. Any other ideas what might be the problem?
*BTW:*I am packaging my PDF as zip and sending it back to browser in the response like that:
response.setHeader "Content-disposition", "attachment; filename=test.zip"
response.setHeader "Content-Encoding", "UTF-8"
response.contentType = 'application/zip'
response.outputStream << zip
response.outputStream.flush()
response.outputStream.close()
Do I need to somehow consider encoding while zipping????, which I do like that:
public static byte[] zipBytes(Map<String, ByteArrayOutputStream> fileNameToByteContentMap) throws IOException {
ByteArrayOutputStream zipBaos = new ByteArrayOutputStream();
ZipOutputStream zos = new ZipOutputStream(zipBaos);
fileNameToByteContentMap.eachWithIndex {String fileName, ByteArrayOutputStream baos, i ->
byte[] content = baos.buf
ZipEntry entry = new ZipEntry(fileName)
entry.setSize(content.length)
zos.putNextEntry(entry)
zos.write(content)
zos.closeEntry()
}
zos.close()
return zipBaos.toByteArray();
}

I managed to "enable" unicode characters (cyrillic or czech) within java code and furthermore providing a true type font in my resources (CALIBRI.TTF).
import org.w3c.dom.Document;
import org.xhtmlrenderer.pdf.ITextRenderer;
import com.lowagie.text.pdf.BaseFont;
...
ITextRenderer renderer = new ITextRenderer();
URL fontResourceURL = getClass().getResource("fonts/CALIBRI.TTF");
//System.out.println("font-path:"+fontResourceURL.getPath());
/* HERE comes my solution: */
renderer.getFontResolver().addFont(fontResourceURL.getPath(),
BaseFont.IDENTITY_H, BaseFont.EMBEDDED);
renderer.setDocument(doc, null);
renderer.layout();
baos = new ByteArrayOutputStream();
renderer.createPDF(baos);
baos.flush();
result = baos.toByteArray();
...
Finally I added the font-family 'Calibri' to the css section of my document:
...
<style type="text/css">
span { font-size: 11pt; font-family: Calibri; }
...

For some reason it started working with following css and .ttf file, which was generated by face-kit-generator:
#font-face {
src: url('arialuni.ttf');
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
body {
font-family: Arial Unicode MS, Lucida Sans Unicode, Arial, verdana, arial, helvetica, sans-serif;
font-size: 8.8pt;
}
Weird thing is that if I put font into some folder, let say "fonts", it will find the font but characters won't be rendered.

Related

Is there a css selector for punctuation or character?

Given the element :
<span>一、對話 Dialogues</span>
One of my font is really unelegant on that side, adding an overly wide space :
Is there a css rule to style only the punctuation 、 ?
NB: I searched the web and found nothing. Currently assume only HTML elements can receive styles. So I have to use JS to get the string, then str.replace('、','<span class="punt">、</span>'), then put back the string with the dedicated html element and class. But I would like to ask the community and create this question, even if dumb, so other users may find this question/answer in the future.
You could use #Font-face and Unicode range to style your punctuation with an other font.
First, identify your characters' code :
var charcode = '、'.codePointAt(0).toString(16); // "3001"
alert(charcode) // "3001"
Then, load your default font and your support font with unicode range
/* For general characters *********************************** */
#font-face {
font-family: 'MyFont';
font-style: normal;
font-weight: 400;
src: local('Font1onPC'), /* tries to load local font file */
url('https://fonts.gstatic.com/font.woff2') format('woff2'),
url('https://fonts.gstatic.com/font.woff') format('woff');
}
/* For special characters ********************************** */
#font-face {
font-family: 'MyFont'; /* IMPORTANT: same name*/
src: local('Font2onPC'), /* tries to load local font file */
url('https://fonts.gstatic.com/anotherFont.woff2') format('woff2'),
url('https://fonts.gstatic.com/anotherFont.woff') format('woff');
unicode-range: U+3001; /* IMPORTANT */
}
Should work.
Source : https://jakearchibald.com/2017/combining-fonts/
Alternatively, you could edit that font on this character.

How to configure custom fonts in mdbook that are used automatically in the generated book?

Few days ago I found mdBook. Looking around for an easy, small, not
oveloaded static site generator, I'm excited. It's easy to use, simple,
fast and completely well designed.
In spite of an easy an fast setup, details hold problems inside. I'd like
to tweak the font in a customized theme.
In the mdBook manual font configuration possibilities are only mentioned
with the HTML renderer options:
A 'copy-fonts' config option copies 'fonts.css' and respective font files
to the output directory to be used in the default theme.
But reading a few bullet points above 'default-theme' is defined as the theme color
scheme to select by default in the 'Change Theme' dropdown.
How does that fit together? In my configuration the automatic copying of font files
does not work. I wrote a little bash script that does the copying after building book output.
So I'd like to describe the configuration steps I did:
set up a new book with copying the default theme's basic files into
a separate directory:
mdbook init testBook --theme
rename the 'theme' directory to 'peters-theme'
create new directory 'peters-theme/fonts
copy the Libertinus TeX font into this directory
create a new css file 'peters-theme/fonts/libertinus-sans-font.css'
#font-face {
font-family: libertinus-sans;
font-style: normal;
font-weight: normal;
src: url('LibertinusSans-Regular.otf') format('opentype');
}
#font-face {
font-family: libertinus-sans;
font-style: italic;
font-weight: normal;
src: url('LibertinusSans-Italic.otf') format('opentype');
}
#font-face {
font-family: libertinus-sans;
font-style: normal;
font-weight: bold;
src: url('LibertinusSans-Bold.otf') format('opentype');
}
tweak file 'peters-theme/css/general.css'
add additional css import rule
#import '../fonts/libertinus-sans-font.css'; /* added individually: use 'libertinus sans' fonts */
change HTML selector
html {
font-family: libertinus-sans; /* added individually: use 'libertinus sans' fonts */
color: var(--fg);
background-color: var(--bg);
text-size-adjust: none;
}
create file 'peters-theme/fonts/libertinus-sans-font.css'
#font-face {
font-family: libertinus-sans;
font-style: normal;
font-weight: normal;
src: url('LibertinusSans-Regular.otf') format('opentype');
}
#font-face {
font-family: libertinus-sans;
font-style: italic;
font-weight: normal;
src: url('LibertinusSans-Italic.otf') format('opentype');
}
#font-face {
font-family: libertinus-sans;
font-style: normal;
font-weight: bold;
src: url('LibertinusSans-Bold.otf') format('opentype');
}
place font files into 'peters-theme/fonts' directory
'peters-theme/fonts/LibertinusSans-Bold.otf'
'peters-theme/fonts/LibertinusSans-Italic.otf'
'peters-theme/fonts/LibertinusSans-Regular.otf'
tweak file 'peters-theme/index.hbs'
<!-- Fonts -->
<link rel="stylesheet" href="{{ path_to_root }}FontAwesome/css/font-awesome.css">
{{#if copy_fonts}}
<!-- added additionally to include custom font CSS -->
<link rel="stylesheet" href="{{ path_to_root }}fonts/libertinus-sans-font.css">
{{/if}}
create bash script 'build-book.sh' (with copying as workaround)
#!/bin/bash
#
# Author: Peter
# Date: 2020-11-20
#
ROOTFOLDER='/home/peter/Documents/Peter/Notes/mdBook/testBook/'
#
# change to book directory
cd $ROOTFOLDER
#
# clean up old book files
mdbook clean
#
# build the book
mdbook build
#
# copy fonts for custom theme
cp -r ./peters-theme/fonts/ ./book/
#
# display book in browser
mdbook serve --open
Greetings
Peter
Additional information
Unfortunately, the first hint above doesn't solve the problem completely. It causes one effects: The custom font css file is copied to the correct
subdirectory automatically. It's new location is
book/peters-theme/fonts/libertinus-sans-font.css
In consequence, I changed the tweak of file 'peters-theme/index.hbs'
accordingly.
<!-- Fonts -->
<link rel="stylesheet"
href="{{ path_to_root }}FontAwesome/css/font-awesome.css">
{{#if copy_fonts}}
<!-- added additionally to include custom font CSS -->
<link rel="stylesheet"
href="{{ path_to_root }}peters-theme/fonts/libertinus-sans-font.css">
{{/if}}
But one part of the problem is remaining.
The local font files are not copied to the destination 'book/fonts' directory.
Looking around at fulfilled pull requests led me to
this one. Following the descriptions, I changed the 'book.toml' configuration file
and added one new 'output.html.font' section.
[output.html.font]
enable = true
woff = true
The complete 'book.toml' configuration file is listed here:
[book]
title = "Rust Never Sleeps"
description = "An adventure getting in touch with mdBook and Rust"
author = "Peter"
language = "en"
multilingual = false
src = "src"
[output.html]
theme = "peters-theme"
default-theme = "rust"
copy-fonts = true
additional-css = ["peters-theme/fonts/libertinus-sans-font.css"]
[output.html.font]
enable = true
woff = true
Additionally I changed the font css file
'peters-theme/fonts/libertinus-sans-font.css' to match the woff font type.
#font-face {
font-family: libertinus-sans;
font-style: normal;
font-weight: normal;
src: url('LibertinusSans-Regular.woff') format('woff');
}
#font-face {
font-family: libertinus-sans;
font-style: italic;
font-weight: normal;
src: url('LibertinusSans-Italic.woff') format('woff');
}
#font-face {
font-family: libertinus-sans;
font-style: normal;
font-weight: bold;
src: url('LibertinusSans-Bold.woff') format('woff');
}
The woff font files are located in a 'peters-theme/fonts' directory
'peters-theme/fonts/LibertinusSans-Bold.woff'
'peters-theme/fonts/LibertinusSans-Italic.woff'
'peters-theme/fonts/LibertinusSans-Regular.woff'
I would expect that these local font files are copied to the output
directory... But this isn't happening.
Now I hope getting a golden hint what I'm doing wrong.
Greetings to you
Peter

How does PHP / CSS deal with missing glyphs?

So I can specify my fonts in my website style CSS, and then set the font-family:
#font-face {
font-family: "custom-helvetica";
src: url("/assets/HelveticaNeue.ttf");
src: url("/assets/HelveticaNeueBold.ttf");
src: url("/assets/HelveticaBlkIt.ttf");
}
#font-face {
font-family: "custom-tahoma";
src: url("/assets/Tahoma.ttf");
src: url("/assets/Tahomabd.ttf");
}
html {
font-family: Tahoma, Helvetica, Arial, sans-serif;
}
Here's an example piece of text:
Testing glyphs in PHP: ± µ ⁓ â ฿ ₿
So let's suppose that the font Helvetica contains all the glyphs in the example apart from ±, µ, ⁓ and that the font Tahoma contains all the glyphs in the example apart from â, ฿, ₿. Let's suppose that the font Arial contains every glyph in the example.
How does PHP/CSS work with this?
Will it apply Tahoma to the example and get this result? -
Testing glyphs in PHP: ± µ ⁓ ࠀ ࠀ ࠀ
Or will it decide that Arial is the only font that can render the entire string correctly, and apply that font to the whole string? Or will the font change dynamically throughout the string to adapt to any missing glyphs?

Add an external font in css using file of type .File

Is it possible to add an external font in css using file of type .File?
Here is what I tried with no luck:
#font-face {
font-family: AvenirHeavy;
src: url("fonts\AvenirLT\AvenirLT-Heavy.tff");
}
.applyFont {
font-family: AvenirHeavy;
}
Also I tried this:
#font-face {
font-family: AvenirHeavy;
src: url("fonts\AvenirLT\AvenirLT-Heavy.File");
}
.applyFont {
font-family: AvenirHeavy;
}
Here are the details about the font:
And for some reasons ide (WebStorm) does not know about font inclusion and tells me that it Cannot resolve file:
The first four characters are:
NUL NUL NUL NUL.

Css Font won't import online

i have a imported css font with the following code:
#font-face
{
font-family: font;
src: url('myriad pro/myriad pro/MyriadWebPro.ttf'),
url('myriad pro/myriad pro/MyriadWebPro.ttf');
}
The problem is that online doesn't work but locally works.What is causeing the problem
Try renaming the file path, for example ---> "myriad-pro/myriad-pro/MyriadWebPro.ttf". Is your css file in the folder with the font. Check if your path is right.
P.S: Remove the bottom url (that on the third line.). When I use font-face I use only two. Example: font-family: Consolas;
src: url('Consolas.ttf');
#font-face
{
font-family: MyriadPro; /* just declares a font in your stylesheet */
src: url('myriad pro/myriad pro/MyriadWebPro.ttf'),
url('myriad pro/myriad pro/MyriadWebPro.ttf');
}
body
{
/* now you need to use it */
font-family: MyriadPro, sans-serif;
/* so name it something useful, instead of just "font" */
}
answering old questions
for those who come looking after

Resources