I have 'OCR A Extended' font installed in Windows and I created the following test.html file, but in Chrome only the OCR A gets rendered as OCR text (class p.b), OCR A Extended (class p.a) gets rendered (computed) as Times New Roman, what's going on? In IE both are rendered as OCR. Same behavior in Windows 7 and Windows 10. Looks like a bug to me.
<html>
<head>
<style>
p.a {
font-family: "OCR A Extended";
}
p.b {
font-family: "OCR A";
}
</style>
</head>
<body>
<p class="a">1234567890</p>
<p class="b">1234567890</p>
</body>
</html>
Edit:
New clue, I notice in Chrome, Settings, Appearance, Customize fonts, that the OCR font is listed at OCR A and not OCR A Extended as is shown in the Windows Font name. If I select OCR A for the Standard Font, then I can work around my problem.
Related
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 am using Laravel-Snappy for generating pdfs with wkhtmltpdf. I want to add a border in all pages that are created in the pdf file. At the moment, I have added this to the css:
body.pdf {
border: 1px solid #000;
}
My pdf html is like this:
<html>
<head>
<title>{{ $title }}</title>
</head>
<body class="pdf">
.....
</body>
</html>
With the above css, the border shows fine if it is a single page pdf. However, when it has multiple pages, the border breaks at the bottom of the first page and no more border shows from page 2 onwards after the page-break. I also read the documentation and I dont think there is an feature to add borders using setOption().
Is there a way to resolve it so the border appears in all pages when pdf is generated?
Please take look at here, you can find all available options available including border.
You didn't mentioned how you used page break.
I am using this way
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
Working fine for me
If you're like me, your eye will be twitching by the end of reading this. I don't blame you.
Our client has requested us to develop a responsive HTML email template, with two specifications:
Using as few images as possible
Using as many "fancy css-enabled features" as possible. Mostly, this just means rounded corners on boxes.
This question is specifically about executing the rounded corners. Gmail and Apple support CSS rounded corners, and Outlook requires vector graphics. For the remaining platforms, they're ok with using square edges.
Here's how we're detecting and executing outlook:
<!--[if mso]><v:shape>...</v:shape><![endif]-->
Works like a charm, even back to Outlook 2000. The problem is, I can't figure out how to create a fallback. Intuition says this:
<!--[if !mso]>...<![endif]-->
but it just gets ignored outright as a comment by most other email clients, and then corners are missing from the boxes altogether. I ask you, fine members of the SO community: is it possible to deploy markup for all platforms except MSO? Perhaps there's a more clever way to accomplish this that I haven't considered? Or is email HTML still too stone-age to attempt something like this?
Found a solution after much brain-wracking. Instead of this:
<!--[if mso]><v:shape>...</v:shape><![endif]-->
<!--[if !mso]>[fallback goes here]<![endif]-->
This works very well:
<!--[if mso]>
<v:shape>...</v:shape>
<div style="width:0px; height:0px; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">
<![endif]-->
[fallback goes here]
<!--[if mso]></div><![endif]-->
All it does is wrap the fallback in an invisible div in MSO, and deploys the vector solution instead.
Hope this helps someone in the future!
This also works, without the need for the hidden div.
<!--[if mso]>
Outlook content
<![endif]-->
<!--[if !mso]> <!---->
Non-outlook content
<!-- <![endif]-->
The trick is to re-open the comment before closing it on the 4th line - the
<!---->
bit. If you don't do that, IE renders "-->" before the non outlook content. Other browsers don't have that problem.
Although CodeMoose's solution does hide the fallback; in my tests, it left space for where the fallback would be (I read that Outlook doesn't render overflow:hidden). That didn't work for my layout since it bumped other elements out.
After a lot of searching, I found that if you make a small modification to CodeMoose's suggestion, it'll hide your fallback and won't add any unnecessary spacing:
<!--[if mso]>
<v:shape>...</v:shape>
<![endif]-->
<[fallback goes here] style="mso-hide:all;">
By adding "mso-hide:all;" to the actual style of your fallback, Outlook will collapse and ignore your fallback code, thereby preserving your layout. And your fallback still displays fine in clients that can handle the complex CSS you used VML to try to replicate, like in Outlook for Mac.
I had some troubles with Outlook falling back to Times New Roman when using a custom font with #font-face declaration. Not only did I have to hide the #font-face declaration from Outlook using the conditional around it's own style block. (all other styles go in another block). I also had to double wrap my textual content in spans with the conditional tag. Just to give an example of how this technique as posted by #CodeMoose (above) works while using a custom font.
<!--[if !mso]><!-->
<style type="text/css">
#font-face {
font-family: 'Museo100';
src: url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.eot');
src: url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.woff') format('woff'),
url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.ttf') format('truetype'),
url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.svg#museo100') format('svg');
font-weight: normal;
font-style: normal;
}
<!--<![endif]-->
First I tried to put the conditional around my "Museo300" font declaration inside the inline style but that obviously didn't work, so I had to double wrap my content into two span's with style declarations. The inner one being conditional for non MSO.
<span style="color: #00B2EB; font-family: arial, sans-serif; font-size: 14px; line-height: 19px; font-weight: normal;">
<!--[if !mso]><!--><span style="font-family: Museo100;"><!--<![endif]-->
Text goes here, shown in Museo in Apple mail while this method shows in Arial in Outlook (and others that do not support custom fonts
<!--[if !mso]><!--></span><!--<![endif]-->
</span>
This works great in getting Outlook to show the text in Arial while Apple mail will show the text in font Museo. Other clients (like mail on Android) have a normal fallback behaviour and just show Arial.
I've been making websites for a few years now, but only recently have I started using the html5 doctype and today I discovered the behaviour where a padding-bottom of 4px is added to images.
The padding disappears if you change the doctype to xhtml1.0
here is the simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Technic-Al</title>
<style>
html, body {
margin:0;
padding:0;
}
#contain {
width: 900px;
background-color:#6C0;
}
</style>
</head>
<body>
<div id="contain">
<img src="images/head.gif" width="900" height="100" border="0" alt="head">
</div>
</body>
</html>
changeing the doctype to any of the others removes the bottom-padding (green from the background)
Quite a few people have come on here to suggest the fix
line-height=0
I believe there is another fix that works as well.
Or should I say "work-around"
but surely this is a bug with the html5 doctype?
who do we speak to about it?
who deals with a bug like this?
how do we get it fixed?
Does anybody here know how to get this fixed?
It's not a bug, it's what the CSS spec says should happen. It's not HTML5 specific, the HTML 4.01 strict and XHTML 1.0 strict doctypes will do the same thing.
It's not padding - it's the consequence of the computed height of the line box.
There's no hope of getting it changed, Too many web pages depend on the existing behaviour.
The appropriate authority for this is the W3C CSS working group.
I had an issue where page was showing padding in bottom of page
img { display:block ; }
writing above in css file solved my problem. Hope this help
Use the vertical-align property in your css :
img{
vertical-align:top;
}
In windows XP mode IE8 browser when user type password only the curser moves the bullets is not showing up.Any body crossed across this situation.I want my user to display what ever they type as bullets in the field
Perhaps you are using Google Web Fonts, or something else other than standard fonts?
Try putting this in your page's <head> tag:
<!--[if lte IE 8]>
<style>
input {
font-family: Arial;
}
</style>
<![endif]-->
Make sure to replace input with whatever CSS selector it takes to override the font-family.