canvas not outputting expected £ text symbol to canvas, contains an additional character - html5-canvas

When I try to write a £ sign on to canvas
context.fillText("£ ",600,165);
The output will write  £ to the canvas object, anyone got ideas on what to do... I tried
context.fillText("£ ",600,165);
but that only writes &pound to the output object.

it's likely not to work if encoding of the page isn't defined. try this in the html page at the very top
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> <!-- THIS ONE !! -->
blabla...
example below show it works when it is a html5 page with utf-8
document.getElementById("myCanvas").getContext("2d").fillText("£ ",10,10);
<canvas id="myCanvas" width="300px" height="50px">no html5 support</canvas>

Related

unknown characters in CC number field with SqPaymentform

Using
<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>
In the CC number field rather than bullets it is the "unknown character" symbol - a gray diamond with a question mark in it. The field is created with
<iframe id="sq-card-number" name="sq-card-number" class="sq-input" frameborder="0" width="100%" scrolling="no" height="18" src="https://connect.squareup.com/v2/iframe?type=cardNumber&app_id=sandbox-sq0idp-TG4xugNydWOz_H_OO4W45Q">
The html page starts with
<!doctype html>
and in the head is
<meta charset="UTF-8">
though that shouldn't be necessary for html5.
Any suggestions, other than live with it?
The problem is the bullets in the value of the placeholder var for the CC number field. The file with the bullets in it had been saved with ANSI encoding rather than UTF-8.

strange initial-scaling behaviour for viewport

I am trying to understand how viewport and initial-scaling works. I read this, this and this and tried the following experiment, which I can reproduce on a samsung galaxy s4 using firefox version 43.0.
If I open a webpage on the galaxy s4 containing this code:
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
<meta name="viewport" content="width=300px, initial-scale=2.0"/>
</head>
<body>
<div style='background-color:red;width:100%'>Adam 8</div>
</body>
</html>
then I get the following result:
This makes sense to me, because the div has a width of 300 CSS pixel, the galaxy s4 has 640 device pixel, and initial-scale=2 should force my phone to use 600 device pixel to represent the 300 CSS pixel div-container, which gives a blank space of 40 device pixel (however, the blank space does look wider then 40 device pixel to me but I will ignore it for now).
Then, I changed the initial-scale from 2 to 1:
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
<meta name="viewport" content="width=300px, initial-scale=1.0"/>
</head>
<body>
<div style='background-color:red;width:100%'>Adam 9</div>
</body>
</html>
Since initial-scale=1, I assumed that my phone only uses 300 device pixel to represent the red bar. However, I get this:
Why is the redbar now 640 device pixel long instead of 300 device pixel?
In your second example, your viewport meta tag is over-constrained. The browser will limit the minimum zoom level such that you can't zoom out to see beyond the extents of the content. In your case, the content is ~300px and the screen size is 640px so the minimum-zoom level would be ~2.1. However, you specified initial-scale=1.0 so there's no way to realize that. In this case, the browser chose to honor the initial-scale by extending the content-width to allow the specified scale.
The first case is a little more puzzling to me as the same thing should be happening to a lesser extent. Here's a picture of how it looks in Chrome on my Nexus 4 which has the same screen height.
In general, the viewport meta tag isn't specified and the behavior in these kinds of cases will vary by browser. I would avoid setting the initial-scale at all and let the browser do that automatically. Typically they will try to zoom out to fit all the content on the screen.

UTF-8 Special Characters not working in header file

I am facing a strange issue with wkhtmltopdf. While in Footer and Content, all special characters are shown as supposed, in the header file, they don't show up or get replaced by blocks with a question mark. All of the three files are built the same:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
</body>
</html>
Is there some kind of trick to tell the header to use utf-8 to?
Btw, I am already telling wkhtmltopdf to use utf-8 not only as meta but also in the script call:
--encoding utf-8
EDIT: I am using an html-header (as you can see on the code I posted). Every 3 HTML files are built the same way. But while it is working in the content, the header don't likes my special chars. Maybe it is a problem that the content in the header comes from a $_POST variable while in the content, the text is built out of the db?

Importing HTML table into OO Calc as UTF8 without converting to entities

I have a problem when opening a HTML table in OpenOffice or LibreOffice if it contains UTF8 extended characters like ÅÄÖåäö.
When opening the table into M$ Excel it works as intended but I can't make OO do the same thing.
By converting all extended characters to its HTML entity eqivalent Å etc. it works but it would be nice to get the correct characters directly.
Is there anyone who knows what I should do?
The following content I have in a file called excelsample.xls and if I open that with OO Calc it will not look nice.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="application/vnd.ms-excel" charset="UTF-8">
<meta charset="UTF-8">
</head>
<body>
<table>
<tr>
<td>Prawn sandwich</td><td>Räksmörgås</td>
</tr>
</table>
</body>
</html>
Your meta tag is malformed and OO doesn't probably recognize the html5 charset tag.
So fix it with:
<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">

Character encoding in ruby

I am parsing some data from one Holland site using Nokogiri, and saving data into csv. But data are not correctly displayed. For example on form thre is Einddatum1 empty space but when I print it into console before saving it is showed as "\u00A0". Also other strings are not correctly displayed, for example "Univ\u00E9 Zorg Geregeld Polis".
{:Bsn=>"112511111",
:Verzekerde=>"VerzekerdeAHM Andes-Faasse",
:Pakketnaam1=>"Univ\u00E9 Zorg Geregeld Polis",
:Verzekerdennummer1=>"1234987654",
:Begindatum1=>"01 jan 2012",
:Einddatum1=>"\u00A0",
}
Maybe header of this html page could be relevant:
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head id="Head1"><meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet)
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" /><title>
Verzekeringsrecht controleren
</title><meta http-equiv="cache-control" content="no-cache" /><meta http-equiv="content-language" content="nl-NL" />
It seams like it's utf-8 but there is problem with these characters. How to properly encode them?
Then the line would read :Pakketnaam1=>"Univé Zorg Geregeld Polis",
Is that what is supposed to be there and your console encoding is just not defined so Ruby does not know how to display the Unicode characters when printing them or should there be some more text?

Resources