The following character gets rendered differently when rendered under Chrome and Firefox -
œ
Chrome -
Firefox -
I am getting this characters in my application as part of Polish text. Is there a way I can make this consistent across browsers?
Related
So I have a small issue with typography on a website (made with Wordpress). It works fine on all pages and all browsers, except one page on safari that just won't show nicely. Normal characters have the right font but the special ones (éèà ..) use a different one.
I'm using the Suisse BP font, and it works well on other pages apart from this one, and the font is called the same way for each page.
Here are some screenshots of the issue:
on safari - mobile
on safari - computer
https://dev.w3.org/html5/html-author/charref
follow the Character Entity Reference Chart at that link
In a particular html file all "ti","fi","tt" characters are missing while viewing (The characters are there when we view it in inspect element).
eg: "Solution" is miss spelt "soluon".
Sample screenshot
The same html works well with FireFox. The above issue reproduces in Chrome and Safari.
Version
Chrome version : Version 50.0.2661.94 (64-bit)
Safari version : Version 9.0 (11601.1.56)
Kindly help me to sort this out.
The above issue occurs only in - webkit web browsers like chrome and safari - which provides support for ligatures - whereas browser like firefox does not.
A ligature is a combination of two or more letters joined as a single
glyph
Root cause
This issue with missing characters is due to ligature support provided by these modern browsers - let me explain how
1.The tool while converting - it converts characters to glyphs using poppler for rendering - now these browser when they come across characters like tt tf ti ff fi consider them to be ligature and searches for glyphs corresponding to tt and not t t
2.Since they do not have their corresponding glyphs - they just skip the characters and renders the rest - so, we fount the characters missing
Could be solved by
Disabling/ Turning-off the ligature in these browsers - embedding the css in the generating content
For more details please refer:
Prevent ligatures in Safari (Mavericks/iOS7) via CSS
Please correct me if I am wrong.
FONT ISSUES WITH PDF TO HTML CONVERSION
All "ti","fi","tt" characters are missing
SAMPLE SCREENSHOT
Font overlapping issue
SAMPLE SCREENSHOT
NOTE: I don't get this issue with firefox. Getting the above issues in chrome in safari browser
I AM USING
Using the 0.13.6 version of pdf2htmlEX
Using the following command to convert pdf to html
pdf2htmlEX --split-pages 1 --zoom 3 --fit-width 920 --correct-text-visibility 1 --dest-dir $1 $2 2>&1
TRIED
Using --fallback 1 option solves all my above problems. But
The fallback option reduces the clarity of document.
Table in the page disappears rather replaced with empty space.
DOUBTS
Could you please explain a bit more on fallback?
I have tried the above one (using fallback). Please suggest me if you prefer a different approach to solve the above problem with fonts.
Getting the above issues with chrome and safari whereas, in Firefox it is working fine.
The above issue occurs only in - webkit web browsers like chrome and safari - which provides support for ligatures - whereas browser like firefox does not.
A ligature is a combination of two or more letters joined as a single
glyph
Root cause
This issue with missing characters is due to ligature support provided by these modern browsers - let me explain how
1.The tool while converting - it converts characters to glyphs using poppler for rendering - now these browser when they come across characters like tt tf ti ff fi consider them to be ligature and searches for glyphs corresponding to tt and not t t
2.Since they do not have their corresponding glyphs - they just skip the characters and renders the rest - so, we fount the characters missing
Could be solved by
Disabling/ Turning-off the ligature in these browsers - embedding the css in the generating content
For more details please refer:
Prevent ligatures in Safari (Mavericks/iOS7) via CSS
Please correct me if I am wrong.
I am using simple Unicode characters in my HTML file,Firefox and IE are fine with it but Chrome wont render it. Is there a way this issue can be fixed keeping various end users in mind?
I have a really strange behaviour in Safari. The problem is that I have a string (inside an tag) which has one part of it written in cyrillic (Bulgarian) and the other part written in latin (English).
On all the desktop browsers I have, it's all working good and there are no problems at all. Then I took my iPhone, and I noticed a surprise: part of the sentence is bold (as it should be according to the CSS), and part is normal.
You can see this weird behaviour here:
http://www.buderus-bg.com/bultherm/product/10
What can it be? And why I get this problem only on iOS?
The charset of the website UTF-8. And that field in the database is a utf8_general_ci.
You are trying to display the text using a font that doesn't contain Cyrillic characters (Google's Open Sans with subset=latin), so the browser will need to find a different font to display the Cyrillic text.
Solution: remove the subset=latin bit.
Edit: the fact that it happens only in iOS with Safari is a coincidence. The browser searches for a font that can display the Cyrillic characters, and what it finds is sufficiently different from Open Sans that you can see the difference in thickness. On my desktop machine, I see the difference too.