That's it, I'm on Mac Mojave with weasyprint-44, python 3.6, and Cairo etc. versions match. The PDF renders nicely otherwise - symbols and letters are fine - just no numbers?
So weird.
Can anyone point me in the right direction?
I was able to fix this problem by eliminating the font "Segoe UI Emoji" from a font-family CSS declaration. Numbers started appearing again once this font was removed from CSS.
The bug seems to have started with some change on macOS 10.14.4.
I am on Mac (Mojave 10.14.5) and have the same problem. I managed to fix it by defining a different font family for print. In my case, I use:
font-family: "Open Sans", Calibri, Candara, Arial, sans-serif;
everything prints out nicely.
The same issue occurs on Sierra (10.12) and High Sierra (10.13), as well as Mojave (10.14), especially when using Bootstrap 4.
The default body definition looks as follows:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
Where both Apple Color Emoji as well as Segoe UI Emojii can cause the final PDF to not display numbers properly.
Removing all mentions of the Emojii fonts brings the numbers back.
Note: The numbers are still there, you can copy and paste them, however, they are not actually visible.
Related
I am new to VTK and try to set Arial font for a text. The final rendered text is not Arial; rather, it is only some kind of font close to Arial. Could anyone tell how to correctly set Arial font in VTK?
The code to set the font:
legendAxis->GetLabelTextProperty()->SetFontFamilyToArial();
I found the same problem in ParaView, where the default font is Arial, but the rendered font is only a font close to Arial (and some kind of not good-looking).
I have never been able to get vtkAxisActor to respond correctly to SetFontFamily as you have done.
Instead, try:
legendAxis->SetUseTextActor3D(1)
legendAxis->GetLabelTextProperty()->SetFontFile("C:\Windows\Fonts\arial.ttf");
To point it directly at the Arial font file available for your system. Of course, you'll have to tweak the path to fit your specific OS/platform.
Let me know if it works.
I have a problem rendering the "font-smoothing" CSS property with html2canvas on all browsers I have (FF/Chrome/Safari/0pera)
But trying desperately to solve that, I eventually wondered why I had to smooth the text in the first place and i noticed that only the fonts displayed on a dark background were causing problems.
So, I made a JSFiddle to make some tests (see the link below)
If you are on Mac (I don't know about PC's browsers), you can see with jsFiddle that:
the black font on a white background is totally ok.
the white version of the same font on a black background is now bolder and messier for whatever reason.
And this would be resolved only if I apply a css "font-smoothing" property to it.
Nothing changed in the css and the font is absolutely standard.
All that changed is the constrast: dark background with a bright font or the contrary.
So, clearly, it's not a problem related to the font or to a technically blocking issue. It just depends on the background and the font color.
I originally thought it was because of my fancy font but even the standard webfonts will generate the problem.
So, at the end of the day, it only seems to be a matter of contrast.
Black on white is ok while white on black is not.
Is there any (css) workaround to get the same results, whatever the background luminosity/contrast or font color, whitout using "font-smoothing" as a non standardized fix then?
The contrast thing is probably a known issue and I can't believe it has no standard fix or, at least, a workaround that would work without browser-specific css properties.
Applying a css property according to the background color seems very awkward.
Here is the html:
<div class="white_no_smoothing">Test of text 0123</div>
<div class="black_no_smoothing">Test of text 0123</div>
<div class="black_smoothing" >Test of text 0123</div>
Here is the CSS:
.white_no_smoothing{
background:#fff;
color:#000;
width:250px;
height:50px;
display:block;
font-size:36px;
}
.black_no_smoothing{
background:#000;
color:#fff;
width:250px;
height:50px;
display:block;
font-size:36px;
}
.black_smoothing{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background:#000;
color:#fff;
width:250px;
height:50px;
display:block;
font-size:36px;
}
JSFiddle:
https://jsfiddle.net/Lzy4s4tw/3/
Thanks.
We have a web application. The application runs on both Windows and Linux.
On windows, the application works fine (Layout is proper etc.)
On linux, the complete layout is haywire. I figured there is a font's problem on Linux.
On my JSF page, I have specified Calibri font. I am using JBoss server.
How can I ensure the layout on windows and linux is identical. I need to eliminate the Fonts problem.
I tried installing the Calibri fonts on the server, but this becomes a pre requisite before any installation which surely I would like to avoid.. Infact even after installing I could not notice changes in the layout (this indicates app failed to read the font).
Kindly guide.
Is it possible to bundle fonts in JBoss and ship it along with the application. If yes, how can I instruct my application to use fonts present inside JBoss.
You can use the #font-face CSS, as described here:
Define a new font, named myFirstFont:
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
And use it to style an element:
.myFirstFontStyledThing {
font-family: myFirstFont;
}
This means that the font file must be available from the web. So you either host it in your server (besides your images perhaps - BUT BEWARE THE LICENSING OF THE FONT) or use Google fonts: http://www.google.com/fonts/
if you are defining fonts you are using most probably a css line like that:
font-family: Arial, Calibri, sans-serif;
css is 'cascading' so in this case if neither arial nor calibri are found sans-serif evaluates to a default sans-serif font on your machine - on Windows - Arial on Mac - Helvetica, on Linux it might be something else.
A good tip would be to use Google's Fonts this way you make sure everyone gets the same font and you don't need to install anything on your JBoss and save you some traffic couse it uses CDN!
Hey folks, I'm attempting to style a client's article h1's with a simple background color and padding. I need the text to be centered vertically and horizontally within the padding, but I'm finding there's a baseline difference between OS X and Windows. At least that's my best guess. Here's the specific code for the offending elements:
.entry-title {
color: #fff;
background: #A3BCC3;
font-size: 24px;
text-transform: uppercase;
text-align: center;
}
.normal .entry-title {
float: left;
width: 100%;
padding: 10px;
margin-bottom: 30px;
}
Here are the screenshots:
OS X: http://i54.tinypic.com/2a0bx1v.png
Windows: http://i56.tinypic.com/2gv4vie.png
You'll notice it's rendering just fine on Windows, but it's a few px too high on OS X. They render the same throughout browsers, the only difference is between the operating systems. The font is Quicksand Book, and is being implemented via #font-face. If you need to see a working version of the site, it's available at http: // angryg.nom.es/rosebud. If you do manage to check it out, you'll notice I'm having the same problem on the static content footer at the bottom of the home page.
Anyway, any help would be greatly appreciated.
You need to specify a line-height for the specific browser (painfull) use this type of properties: 1.1, etc over specifying pixels, from my experience it works better.
Also, still in the Mac, between Safari and Firefox you'll notice a difference between line-heights! So this isn't just OSX vs Windows.
Your font-files may be incorrect.
I had the same issue with a local installed webfont too.
Thankfully Google provided the same font as a webfont, solved the problem for me.
Default font of operating systems is different so add a font-family: Arial to your elements css. It should work in OSX and Windows because Arial is supported by both of them.
It seems to me that sIFRed text when selected allways have black background. My site design is dark (mostly black). So when use select sIFRed text it looks like nothing happens, it is selected but no one can see that cause both site and selected text background are black. Normal text have white or some kind of dark-green color depending on font color.
How to change color of selected text background?
http://yourpalmark.com/2007/08/13/changing-selection-color-on-dynamic-textfields/
use this and compile your font .swf again. but i would use cufon, sifr is too laggy!
After all those years things has changed. Best way to do it now is to omit sIFR, cufon and others and use just CSS #font-face. Best with fallbacks e.g.:
#font-face {
font-family: 'font-name';
src: url('fonts/font-name.eot');
src: url('fonts/font-name.eot?#iefix') format('embedded-opentype'),
url('fonts/font-name.woff2') format('woff2'),
url('fonts/font-name.woff') format('woff'),
url('fonts/font-name.ttf') format('truetype'),
url('fonts/font-name.svg#fontname') format('svg');
font-weight: normal;
font-style: normal;
}
Always fresh things about that can be (and probably will be in a future) found at http://www.fontsquirrel.com/