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.
Related
I have a page where the <title> tag contains some text (specifically: the department name) that screen readers do not pronounce very well (the department's name is ‘AskHR’ -- it’s the HR department’s helpdesk).
I want to provide screen readers with a more pronounceable version (‘Ask H R’) whilst keeping the more stylised version for visual display. I was thinking of using aria-label to achieve this, but I’m uncertain whether it can be applied to the <title> element in the <head>.
Can anyone confirm whether or not this is valid?
I don't think this is valid.
First not all screen readers are made equal!
What you're trying to do may work in some but not in others. For example VoiceOver reads out "AskHR" as you would expect. (And ignores the aria-label attribute.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title aria-label="xxx">AskHR</title>
</head>
<body>
<button aria-label="close">X</button>
</body>
</html>
I think this is perhaps closer to what you're trying to do but support is limited:
.label {
speak-as: spell-out
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/#counter-style/speak-as
If we inspect the example above in Chrome, you see this for the <button> element:
The aria-label attribute takes over the button content. VoiceOver reads out "close" instead of "x".
However this is what we see for <title>:
i have a pdf form that i need to be able to import as a background then use Dompdf to overlay html/text.
can this be done?
thanks
Dompdf is a library for converting HTML -> PDF. I'm no expert on that particular library but as far as I can tell it doesn't do things like overlaying html/text.
PDF cannot be imported into HTML because it isn't an HTML format and it isn't an image. There might be a parser library somewhere (e.g. http://www.pdfonline.com/easyconverter/sdk/pdf-to-html/), but without your own fairly extensive work you wont get that PDF document to be displayed in HTML.
HOWEVER, you CAN use something like this, it'll show your PDF document as the background, create a div that covers the screen just above the PDF document to make it non-interactive, then you can put all your contents above that. Note that there will be controls showing on the sides which as far as I know can't be prevented since they're provided by the browser when displaying a PDF file (you could use some fancy JS/CSS to prevent it I'm guessing but I don't know exactly how off the top of my head).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PDF as background</title>
</head>
<body>
<iframe src="http://unec.edu.az/application/uploads/2014/12/pdf-sample.pdf" style="width: 100vw; height: 100vh;position:absolute;top:0;z-index:0;"></iframe>
<div style="position:fixed;width:100%;height:100%;z-index:1"></div>
<div id="content" style="position: absolute;top:50%;left: calc(50% - 4cm);z-index:2">
<h1 style="font-size:20px;background:#00ff00;">I am on top of the PDF document!</h1>
</div>
</body>
</html>
I want the hyperlink to apply to the image only but do not know how to end the linking.
It continues to link the header and other text blocks below my hyperlink line. I'm not sure what I'm doing wrong. How do I isolate the hyper link to just the image? I am using google chrome as my browser
Here is my code:
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"
<title>Example Document</title>
</head>
<body>
<h1>This is Craig's Favorite Dog.</h1>
<p>Click on image for more information.
<article>
<dd><a href="https://en.wikipedia.org/wiki/Newfoundland_(dog)">
<img src="https://media.mnn.com/assets/images/2016/04/newfoundland- dog.jpg" height="240" width="360"
</a></dd>
</article>
</p>
</body>
<br>
<br>
<h2>This is the fart of the dog<h2>
<audio controls>
<source src="fart.mp3" type="audio/mpeg">
<source src="fart.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</html>`
The image tag is not terminated - finish it with a greater than character (i.e. >).
<img src="https://media.mnn.com/assets/images/2016/04/newfoundland-dog.jpg" height="240" width="360" />
Also note that I added a slash (/) before the end of the tag. That is because image tags have no permitted Content - from MDN:
Permitted content None, it is an empty element.
Other suggestions:
Don't add the closing body tag (</body>) before the rest of the contents are added (e.g. the h2 tag, the audio tag, etc).
Permitted content for the paragraph tag (<p>) is Phrasing content but the article tag is flow content so just move the article tag after the paragraph tag.
The closing tag for the heading 2 towards the end is missing the closing character: </h2>
See this plunker example with the updates applied
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 £ 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>
i have an jpg where the height is larger than a regular 8.5x11 piece of paper (the height is around 2000px)
here is the link
http://i39.tinypic.com/121d7ur.jpg
so obviously when you try to print this picture its going to print on more than 1 piece of paper ....however when i try to print the page (or even go to print preview)...it only shows half the image on the first page....but there is no second page?...there should be a second page to show the rest (or even a 3rd page)
if i use FF there is no problem...it prints on 3 pages....but with IE 7 i'm limited to just printing 1 piece of paper.
i have right right clicking on the image itself within IE7 and clicking "print this image" and still no luck.
anyone have a solution for this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Blank XHTML 1 Transitional Page</title>
<style>
#media print {
html { height: 100%; }
img { height: 100%; }
}
</style>
</head>
<body>
<img src="bigimage.jpg" />
</body>
</html>
EDIT: Sorry, didn't initially realize your image was too TALL rather than too WIDE. To reduce the image height whilst maintaining aspect ratio, use CSS to set both HTML and IMG to have a height of 100% - see modified example.
I know this probably isn't the answer you are really looking for, but if you are intending on the users printing the image, I would consider putting it into a PDF. That way it will always print the same, everytime for everyone.
Try wrapping the image in a div, in the div css apply the following:
image_wrapper {*height:1%; position:relative}
The star/* selector should limit to IE, this is a variant of the holly hack.