When I use Flying Saucer to convert html page with Chinese character. The Chinese character displayed as a box like below
I have tried both methods: using the css as in this answer Flying Saucer font for unicode characters and using the code as in this answer Flying Saucer iTextPDF Chinese Fonts, but they did not work. Does anyone have another suggestion?
I have declared the UTF-8 charset in meta tag as below:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html language="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"> </meta>
<link rel="stylesheet" type="text/css" href="file:///opt/template/employer.css"/>
<link rel="stylesheet" type="text/css" href="file:///opt/template/style.css"/>
<link rel="stylesheet" type="text/css" media="print" href="file:///opt/template/print.css"/>
</head>
Here is the relevant section with the chinese characters:
<tbody><tr>
<td align="left" width="150" valign="top">
Name
</td>
<td align="left" width="305" valign="top">
<label id="candidateName">VU DINH THE / 你好</label>
</td>
</tr>
<tr>
<td align="left" width="150" valign="top">
Gender/Status
</td>
<td align="left" width="305" valign="top">
<label id="gender">Female</label> / <label id="status">Single
</label>
</td>
</tr>
<tr>
<td align="left" width="150" valign="top">
Date of Birth/Age
</td>
<td align="left" width="305" valign="top">
<label id="dob">12 Sep 1985</label> / <label id="age">30</label>
</td>
</tr>
And the content of print.css:
#font-face {
font-family: Arial Unicode MS;
src: url('file:///opt/template/arialuni.ttf');
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
Replacement of a character by an empty square or rectangle usually means that the character is not defined in the font file, and the system doesn't find information to draw it.
In this case, the HTML and CSS code is correct, but the arialuni.ttf file is incomplete.
For reference, the arialuni.ttf should be ~23 MB.
Related
Right now when I am parsing some html (front page of hacker news for example), it works fine. I can call class on something like doc = Nokogiri::HTML(open('news.ycombinator.com')) and I will get back Nokogiri::HTML::Document < Nokogiri::XML::Document
The issue is, in the terminal, I am seeing the HTML and not the actual Nokogiri Element. I want to see it because it shows me valuable info like the Nokogiri Elements Children, or an array of links or or or.
I get the HTML using the Watir Gem using the following method:
[1] pry(main)> browser = Watir::Browser.new(:firefox)
#<Watir::Browser:0x2c5654b29ef00c22 url="about:blank" title="">
[2] pry(main)> browser.goto('news.ycombinator.com')
"http://news.ycombinator.com"
[3] pry(main)> browser.html
Where browser.html is an instance variable (I think?) containing un-parsed HTML.
Here is what I get back right now if I call doc = Nokogiri::HTML.parse(browser.html)
And here is what I would like to get back:
Where am I going wrong?
adding raw code as requested:
Nokogiri::HTML::Document < Nokogiri::XML::Document
[31] pry(main)> doc = Nokogiri::HTML.parse(browser.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html op="news">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="referrer" content="origin">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="news.css?stXbi7LCyutClfTUMe1b">
<link rel="shortcut icon" href="favicon.ico">
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss">
<title>Hacker News</title>
</head>
<body>
<center><table id="hnmain" width="85%" cellspacing="0" cellpadding="0" border="0" bgcolor="#f6f6ef">
<tbody>
<tr><td bgcolor="#ff6600"><table style="padding:2px" width="100%" cellspacing="0" cellpadding="0" border="0"><tbody><tr>
<td style="width:18px;padding-right:4px"><img src="y18.gif" style="border:1px white solid;" width="18" height="18"></td>
<td style="line-height:12pt; height:10px;"><span class="pagetop"><b class="hnname">Hacker News</b>
new | past | comments | ask | show | jobs | submit </span></td>
<td style="text-align:right;padding-right:4px;"><span class="pagetop">
login
</span></td>
</tr></tbody></table></td></tr>
<tr id="pagespace" title="" style="height:10px"></tr>
<tr><td>
<table class="itemlist" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr class="athing" id="19388248">
<td class="title" valign="top" align="right"><span class="rank">1.</span></td> <td class="votelinks" valign="top"><center><a id="up_19388248" href="vote?id=19388248&how=up&goto=news"><div class="votearrow" title="upvote"></div></a></center></td>
<td class="title">
Getting Too Absorbed in Your Side Projects<span class="sitebit comhead"> (<span class="sitestr">bennettnotes.com</span>)</span>
</td>
</tr>
<tr>
<td colspan="2"></td>
<td class="subtext">
<span class="score" id="score_19388248">42 points</span> by _davebennett <span class="age">1 hour ago</span> <span id="unv_19388248"></span> | hide | 27 comments </td>
</tr>
<tr class="spacer" style="height:5px"></tr>
<tr class="athing" id="19384878">
<td class="title" valign="top" align="right"><span class="rank">2.</span></td> <td class="votelinks" valign="top"><center><a id="up_19384878" href="vote?id=19384878&how=up&goto=news"><div class="votearrow" title="upvote"></div></a></center></td>
<td class="title">
Facebook’s Data Deals Are Under Criminal Investigation<span class="sitebit comhead"> (<span class="sitestr">nytimes.com</span>)</span>
</td>
</tr>
<tr>
<td colspan="2"></td>
<td class="subtext">
<span class="score" id="score_19384878">661 points</span> by tysone <span class="age">13 hours ago</span> <span id="unv_19384878"></span> | hide | 156 comments </td>
</tr>
<tr class="spacer" style="height:5px"></tr>
<tr class="athing" id="19388091">
<td class="title" valign="top" align="right"><span class="rank">3.</span></td> <td class="votelinks" valign="top"><center><a id="up_19388091" href="vote?id=19388091&how=up&goto=news"><div class="votearrow" title="upvote"></div></a></center></td>
<td class="title">
Krita 4.2.0: First painting application with HDR support on Windows<span class="sitebit comhead"> (<span class="sitestr">krita.org</span>)</span>
</td>
...
It sounds like you want:
doc = Nokogiri::HTML browser.html
I have created the application that stores the Information about dogs in the database,while running the project the tables where created but dogs information were not updates.
There is an error in running this below html file
The following code is not working
<html lang="en">
<head>
<!-- META SECTION -->
<title>Dog Rescue</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- END META SECTION -->
<!-- BEGIN STYLE -->
<style>
table, th, td {
border: 1px solid black;
padding: 1px;
}
</style>
<!-- END STYLE -->
</head>
<body>
<h2>Current Dogs In Rescue</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Rescue Date</th>
<th>Vaccinated</th>
</tr>
</thead>
<tbody>
<tr th:each="dogs : ${dogs}">
<td th:text="${dogs.id}">Text ...</td>
<td th:text="${dogs.name}">Text ...</td>
<td th:text="${dogs.rescued}">Text ...</td>
<td th:text="${dogs.vaccinated}">Text...</td>
</tr>
</tbody>
</table>
</div>
<h2>Add A Dog</h2>
<form action="#" th:action="#{/}" method="post">
<label>Name<input type="text" name="name" id="name"></input></label>
<label>Vaccinated<input type="text" name="vaccinated" id="vaccinated"></input></label>
<label>Rescued<input type="text" name="rescued" id="rescued"></input></label>
<input type="submit" value="Submit"></input>
</form>
</body>
</html>
The html file is not fetching the information.
Kindly help me
Whole Project is available in
https://github.com/arulsuju/DogRescue.git
You are using the same variable name for iteration as the list variable (dogs)
, Consider using different name for iteration variable like (dog), so the code should be:
<tr th:each="dog : ${dogs}">
<td th:text="${dog.id}">Text ...</td>
<td th:text="${dog.name}">Text ...</td>
<td th:text="${dog.rescued}">Text ...</td>
<td th:text="${dog.vaccinated}">Text...</td>
</tr>
I'm using outlook 2013 and I want to create email signature.
When I finished coding I found a 1px gap appear right to the image inside a table cell.
I gave that cell a background color to see if the problem from the image or from the cell itself.
I don't know if it a padding or its a right transparent border.
I search a lot for two days here and in other websites and nothing fixed.
I create another template to demonstrate this gap and here's my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
</style>
</head>
<body>
<table width="234" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="117" height="33" style="border-collapse:collapse;padding:0;margin:0;border:none;">
<img src="http://amraymancom.ipage.com/signtures/mazaya/images/mazaya-logo.png" border="0" width="117" height="33" border="0" style="display:block;border:none;"/>
</td>
<td width="117" height="33" style="border-collapse:collapse;padding:0;margin:0;border:none;">
<img src="http://amraymancom.ipage.com/signtures/mazaya/images/mazaya-logo.png" border="0" width="117" height="33" border="0" style="display:block;border:none;"/>
</td>
</tr>
</table>
</body>
</html>
And here's a screenshot to the cell gap:
I know that coding for Outlook is a headache but I would appreciate your help if you explain to me why this gap appear and what should I do to fix this.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
</style>
</head>
<body>
<table width="234" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" width="117" height="33" style="border-collapse:collapse;padding:0;margin:0;border:none;">
<img src="http://amraymancom.ipage.com/signtures/mazaya/images/mazaya-logo.png" border="0" width="117" height="33" border="0" style="display:block;border:none;"/>
</td>
<td align="left" width="117" height="33" style="border-collapse:collapse;padding:0;margin:0;border:none;">
<img src="http://amraymancom.ipage.com/signtures/mazaya/images/mazaya-logo.png" border="0" width="117" height="33" border="0" style="display:block;border:none;"/>
</td>
</tr>
</table>
</body>
</html>
I'd try this. This isn't removing the gap, but I added align="left" to the td's , so the gap will be on the right and not in between. Also I would suggest to save both images as one. This makes sure it will always display correctly and will make loading times faster, as it saves on memory space.
Also since the images are on a white background maybe add them as jpg. For Email signatures its important to save as much space as possible, since you are sometimes mailing to mobile phones and you you send you signature again with each answer in each conversation.
I keep encountering problems with my conditional comments for outlook desktop version. When viewing the email in outlook 2013 it is still showing it with border and the same font-size as for non-mso clients.
I also put the conditional comments in the head tag, but it did not work either.
If any of you can spot a typo or error somewhere in the code?
Thats the entire code I am using:
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>Outlook conditional comments</title>
<meta charset="ISO-8859-1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
</head>
<body>
<!--[if gte mso 9]>
<table class="lookout" border="0" cellpadding="0" cellspacing="0" align="left" style="max-width: 600px;
width: 100%; height: auto; font-size:3em;"> <tbody> <tr> <td>Increasing sales </td> </tr> </tbody> </table>
<![endif]-->
<table class="lookout" border="1" cellpadding="0" cellspacing="0" align="center" style="max-width: 600px; width: 100%; height: auto; font-size:1em;">
<tbody>
<tr>
<td>Increasing Sales</td>
</tr>
</tbody>
</table>
</body>
</html>
Many thanks in advance
Danie
It is showing the border because the second <table> is not hidden from Outlook. Outlook 2007/10/13/16 displays both <table>s.
We want to write two tables and wrap each in an <mso> tag: one that displays a <table> only for Outlook 2007/10/13/16, and one that hides a <table> only for Outlook 2007/10/13/16. Something like this:
<body>
<!--[if gte mso 9]>
<table class="lookout" border="0" cellpadding="0" cellspacing="0" align="left" style="max-width: 600px;
width: 100%; height: auto; font-size:3em;">
<tbody>
<tr>
<td>Increasing sales In Outlook 2007/10/13/16</td>
</tr>
</tbody>
</table>
<![endif]-->
<!--[if !mso 9]><!-->
<table class="lookout" border="1" cellpadding="0" cellspacing="0" align="center" style="max-width: 600px; width: 100%; height: auto; font-size:1em;">
<tbody>
<tr>
<td>Increasing Sales everywhere else</td>
</tr>
</tbody>
</table>
<!--<![endif]-->
It shows with a Border and font-size bacause the Bottom Table isn't hidden. Also I most times use this Term: <!--[if (gte mso 9)|(IE)]> It seems to work the best for most MSO Clients
#Niklas and #Ted: many thanks for your replies.
I did another attempt and sent the email exactly the way you suggested Ted, but unfortunately the border and 1em font-size were there again in Outlook 2013.
I was wonder whether the email client it is sent from can have an impact on how it is displayed in the email client it is viewed later on. I sent it from gmail. I saved the html doc from the browser and copied it over to gmail.
This is how the html file I copied looks like:
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>Outlook conditional comments</title>
<meta charset="ISO-8859-1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
</head>
<body>
<!--[if gte mso 9]>
<table class="lookout" border="0" cellpadding="0" cellspacing="0" align="left" style="max-width: 600px;
width: 100%; height: auto; font-size:3em;"> <tbody> <tr> <td>Increasing sales 13</td> </tr> </tbody> </table>
<![endif]-->
<!--[if !mso 9]> <!-->
<table class="lookout" border="1" cellpadding="0" cellspacing="0" align="center" style="max-width: 600px; width: 100%; height: auto; font-size:1em;">
<tbody>
<tr>
<td>Increasing Sales everwhere else</td>
</tr>
</tbody>
</table>
<!--<![endif]-->
</body>
</html>
Any thoughts or comment on the new code are highly appreciated.
Danie
**Edit, the issue only exists in the preview pane of the Outlook Web App**
I have tried just about everything, but I cannot seem to rid the white spaces/line breaks that Outlook 2007/2010 renders in its preview box on the right side of the screen. When you double-click the e-mail from the inbox list, the HTML loads perfectly. However, when it is displayed in the split inbox list/e-mail preview window, line breaks/white spaces are generated.
I have tried every trick in the book. border-collapse, border=0, display:block, cell-spacing/cell-padding:0, !important, etc. Nothing works.
Here is what I am complaining about. (I have blacked out everything for privacy sake) :
209.67.20.161/email/linebreaks.png
209.67.20.161/email/linebreaks2.png
209.67.20.161/email/linebreaks3.png
It might be the "Printed Page Limit (Microsoft Word)" that is referred to in this article:
www.emailonacid.com/blog/details/C13/horizontal_spacing_issues_in_outlook_2007_and_2010
But, I don't think so because there are some line breaks very close to each other.
BTW, I am slicing an image in photoshop and saving for web devices.
Here is the sliced image: http://209.67.20.161/email/slices.png
Be my savior...
Link to my HTML: http://209.67.20.161/email/email_sliced_forss.html
You can send the HTML e-mail to your own outlook inbox by using ctrlq.org/html-mail and copy and pasting the source of my HTML in the box after selecting HTML editer.
Style your html emails like in this example and it will render perfectly in all major clients even the old ones like lotus notes.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style media="all" type="text/css">
table td
{
border-collapse: collapse;
}
</style>
</head>
<body>
<table width="680" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20" align="left" valign="top" rowspan="2" bgcolor="#FFFFFF" style="font-size: 10px; font-family: arial; line-height:170px;"> </td>
<td width="300" height="170" rowspan="2" align="left" valign="top">
<img src="another image" alt="" width="300" height="170" border="0"></td>
<td width="33" align="left" valign="top" bgcolor="#FFFFFF" style="font-size: 10px; font-family: arial; line-height:140px;"> </td>
<td width="327" colspan="2" align="left" valign="top" bgcolor="#FFFFFF" style="font-size: 14px; font-family: arial; color:#5D5B5C; line-height: 16px;">some exemple text here</td>
</tr>
<tr>
<td width="33" bgcolor="#FFFFFF" style="font-size: 10px; font-family: arial; line-height:30px;"> </td>
<td width="138" height="30" align="left" valign="top"><img src="image here" alt="details" width="138" height="30" border="0"></td>
<td width="189" bgcolor="#FFFFFF" style="font-size: 10px; font-family: arial; line-height:30px;"> </td>
</tr>
</table>
</body>
</html>
Here is a link to another post where I explained how to use empty TD cells instead of spacers. HTML Emails - Empty Tables/TR/TD as spacers
Try to use style="line-height:your-image-size px;" in the <td>; also, inside the image tag use style="display:block;"