Certain Unicode Characters Not Showing Up In Certain Browsers? - mobile

So I am having consistency issues with a certain set of unicode characeters. The characters within the buttons under the reply section, and at various parts of the page show up as squares: http://bit.ly/zlhgEI
When I copy them into google i can navigate to a wikipedia page describing that character. So it seems like it is a rendering issue. Or perhaps that platform is just missing characters? I don't know.
Where it works: Firefox (I think on any platform), Chrome on windows7 and ubuntu maybe osX
Where it is broken: Chrome on XP, iphone4 and droid incredible
Does anyone know a way to ensure this character set will get added. I already tried adding to utf-8 meta tag, which seems to do nothing. What can I do?
Thanks!

This is primarily a font problem. The buttons contain Syriac letters, which are not present in most fonts. The CSS setting is font-family: Helvetica,Arial,sans-serif, but Helvetica and Arial do not contain Syriac letters, so browsers will first try the font to which they map the generic name sans-serif. It most probably does not contain Syriac letters either, so browsers will either give up and e.g. show a square or (more properly) scan through the fonts available on the system. So indirectly this is a browser issue too.
The odds are that the vast majority of users will not see the Syriac letters unless you use an embedded font for them. For suitable fonts, you could check
http://www.wazu.jp/gallery/Fonts_Syriac.html
where many download links don’t work, but try
http://www.bethmardutho.org/index.php/resources/fonts.html
You could also write a CSS rule with fonts that contain Syriac letters, e.g.
font-family: Estrangelo Edessa, TITUS Cyberbit Basic, Sun-ExtA, Code2000, unifont. But most people don’t have any of them in their computers, so consider adding the downloadable font of your choice into the list, once you’ve selected and installed one.
The character encoding is not a problem. The data is UTF-8 encoded and declared as UTF-8 in HTTP-headers, so meta tags don’t affect encoding issues (as long as the page is viewed online).
The buttons look really odd (each occupying the full width of the window) on IE 9, but this seems to be unrelated to the problem at hand, and it’s a Quirks Mode issue and can be fixed by adding <!doctype html> at the start.

This could be an example of mojibake. There's probably not a ton you can do about it -- I believe it depends on the fonts available and the range of encodings they support.

Related

Total head scratcher: same page in different language scores differently. Is it me? Is it a bug?

Our website uses an optional language parameter for displaying pages in either English or Spanish, for instance:
https://www.spotmodel.com/product_info.php?products_id=17442&language=en
https://www.spotmodel.com/product_info.php?products_id=17442&language=es
Of course, code is exactly the same, performance is exactly the same, and page generation speed is exactly the same (just selecting different rows for page text locales)
BUT
In PageSpeed, mobile tab, pages with "language=en" consistently score about 10 points LESS than pages with "language=es" (about ninetysomething in "es", about eightysomething in "en").
According to my tests, it happens on every single page (within the bounds of the small score variations). The generated code is exactly the same (except the small text changes), html sizes are also similar or even bigger in the ES version (370k EN vs 377k ES), functions do NOT perform anything differently.
Problem is that, by default, if the parameter is not found, the page served is the English version, hence i'm getting an "orange" score most of the times, instead of the nice "green" on the Spanish pages.
Any clues on what I'm missing? Is it a bug in lighthouse parsing pages with <html lang=es>

Interpolating custom data onto a PDF

I am building an Angular test preparation app (with Laravel 5.1 API). One of the requirements is to allow the user to print a certificate of achievement.
The client wants the person's name and credentials interpolated into the document (e.g., highlighted below). Here is a snapshot of the PDF template they sent:
The way I'm handling PDF viewing is simply by storing the file on S3 and giving them a link to that file.
Interpolating information into a PDF doc doesn't seem trivial and I haven't found much information on programmatically allowing this, but there are tools like DocHub, that allow you do edit while viewing the PDF.
I'm interested in learning:
is doing this programmatically trivial?
are there 3rd party tools I'm unaware of?
would I even be able to send this information along to the S3 link to interpolate in the first place?
Using PDF as a format for editing is usually a bad choice. If you have a form with fixed fields, then it's easy. Create a PDF template with an interactive form. In this form, based on AcroForm technology, you'll define fields with fixed coordinates, and a fixed size. You can then add content to these fields.
One major disadvantage with this approach is the lack of flexibility. Did you notice that I used the word "fixed" three times in the previous paragraph? If text doesn't fit the predefined field, you're out of luck. If the field is overdimensioned, you'll end up with plenty of white space. This approach is great if you can predict what the data will be like. A typical use case is a ticket or a voucher. For instance: the empty form is a really nice page, with only a couple of fields where an automated system can put a name, a date, a time, and a seat number.
This isn't the best approach for the example you show in your screen shot. The position of every line of text, every word, every character is known in advance. If you want to replace a short word with a long word (or vice-versa), then all those positions (of each line, of the complete page, possibly of the complete document) need to be recalculated. That's madness. Only people with very poor design skills come up with such an idea.
A better idea, is to store the template as HTML. See for instance chapter 5 of iText's pdfHTML tutorial, where we have this snippet of HTML:
<html>
<head>
<title>Invitation to SXSW 2018</title>
</head>
<body>
<u><b>Re: Invitation</b></u>
<br>
<p>Dear <name>SXSW visitor</name>,
we hope you had a great SXSW film festival experience last year.
And we would like to invite you to the next edition of SXSW Film
that takes place from March 9 until March 17, 2018.</p>
<p>Sincerely,<br>
The SXSW crew<br>
<date>August 4, 2017</date></p>
</body>
</html>
Actually, it's not really HTML, because the <name> tag and the <date> tag don't exist in HTML. All HTML processors (browsers as well as pdfHTML) ignore those tags and treat their content as if the tag was a <span>:
It doesn't make much sense to have such tags in the context of pure HTML, but it does make a lot of sense in the case of pdfHTML. With pdfHTMLL, you can configure custom tags, and have a result that looks like the PDFs shown below:
Look at the document for "John Doe" and compare it with the document for "Bruno Lowagie". The name "John Doe" is much shorter than my name, hence more words fit on that first line. The text flows nicely (we could also have chosen to justify the text on both sides). This "flow" is impossible to achieve with your approach, because you will never get a PDF template to reflow nicely.
OK, I get it, you probably say, but what about the practical aspects? You talk about a Java / .Net library, but I am working with Laravel and Angular.js. First, let me tell you that I don't think you'll find any good PDF tools for Laravel or Angular.js, because of the nature of PDF and those development environments (in my opinion, those technologies don't play well together). Regardless of my opinion, this shouldn't be much of a problem for you because you work in an Amazon environment. AWS supports Java, and the Java code needed to get pdfHTML working is minimal. Most of the code samples I wrote for the pdfHTML tutorial are shorter than 15 lines. So why not try Java and pdfHTML?
If you're already using Amazon services, why not use an amazon lambda function, in combination with iText7 (java), to generate the pdf on demand?
That way, you are guaranteed that the pdf is correct, and has nice layout every time.
Generating the pdf can either be done by:
converting HTML,
programmatically creating your entire document,
filling and flattening an XFA form.
I think for your use-case, either option 1 or 2 are the most sustainable.

Custom font Xcode 4.6 using storyboard

I have added Imago font (including bold, italic and those both with those names: boolta, med and medlta) to Info.plist, but now I'm totally stuck with several tutorials.
I'm using storyboard mode.
Could someboby tell me what codes I have to write and where to get these font to work?
been having a lot of issues with fonts myself recently and there are a few things I suggest checking: -
1/ Always use .ttf format
2/ Make sure your font is included in 'Copy Bundle Resources' in your project 'Build Phases'
3/ Custom fonts should be defined in the array in your '[appname]-Info.plist' like you said above, it's under the heading 'Fonts provided by application'
4/ Make sure that you are using the correct font name as it is usually different to the filename. To get a list of available font names use the below code. Just using finders 'Get Info' is not always reliable: -
for (NSString* family in [UIFont familyNames]){
for (NSString* name in [UIFont fontNamesForFamilyName: family]){
NSLog(#"font=%#", name);
}
}
Then use the font name outputted in your log
5/ If that STILL doesn't work, it may mean your font encoding is a little messed up. I had this recently with a .ttf font, the app just couldn't see it so I stuffed the file into this online converter and whatever the issue was disappeared, magic!

Paragraph character in URL?

I just ran across this an Google App Engine article that uses that funny backwards 'P' character in some URL's (look near the top of the first code box). You know that character that your high school English teacher used to mark new paragraphs (which I've learned, thanks to Wikipedia, is called a "pilcrow").
I've never seen this in a URL. So which is it?
This has a standard specific meaning which is ...
This is a typo, it should be ...
This is something that somebody at Google just made up. What they might mean is ...
What character? I'm seeing things.
&para is in the URL which forms part of the html escape sequence ¶, i.e. ¶. It is odd browser behavior that, given the escape sequence is not complete (missing ;), Chrome is still rendering the symbol. The escape sequence itself has just not been escaped correctly in the snippet I believe..
What happens is that the page contains the sequence &para some browsers (Chrome at least) interpret that as if it was ¶ the escape code for the symbol ¶. Funny browser behaviour, but the page should not have contained raw ampersands.
Escaping everything properly and dealing with divergent browser behavior is a pain: Accidental HTML entities in urls.
The odd thing in this case is that &param should not be recognized by the browser as &para and then m.
My shot... rendering bug.
IE - shows it
Chrome - Shows it
FireFox - Displays the correct & symbol (used in URLS+parameters)
Checked source with the 3 browsers, and they all show the & char.

Exporting SSRS reports to PDF when they contain Wingdings with char value above 127

In Report Builder 2008 I use code such as
=Chr(224)
in textbox expressions to get Wingdings chars such as the up, down, straight arrows, etc. I run the report and it looks fab on screen, as well as exported to Excel.
But if I export to PDF, I've noticed any Wingdings with character values above 127 do not display inside the PDF correctly (just an empty little box.) Inside Acrobat, I go to File-Properties, look at the Fonts tab and I see that Wingdings is successfully embedded, but the encoding is set to ANSI. (If I export a document from OpenOffice using their excellent PDF export feature, the encoding says "Built in" and the Wingdings characters all look great.)
Wingdings under Chr(127) look fine on the SSRS reports. Any idea if I can do anything about the higher chars?
Thanks,
Bill
Workaround:
I wanted to use an empty square and a square with a tickbox in it.
Originally I was using windings characters 254 and 168.
Basically try to use characters below 128, and don't forget that there's wingdings 2, 3 and webdings. I found Wingdings 2 characters 82 and Wingdings 111 would work instead.
Also, you can mix and match multiple fonts by setting an expression for the font property of your expression.
Note for others: If your looking for a basic tick for your document you can switch to WebDings and use a lower case "a". This exports to PDF correctly as a tick.
I got an answer over at the official Sql Server Reporting Service forum.
The long and short of it: it's a bug. I'll be filing an issue as Andre Milbrandt suggested.
I faced the same issue with Chinese locale. Then i fixed that issue by installing Chinese language on server (where SQL reporting services are running).
Also same issue fixed by installing SQL CU6 update (without installing language pack). Here is the link for that update http://support.microsoft.com/kb/2489376

Resources