Do you know how to align the text after a line break with tcpdf?
Using tcpdf 6.2.13, and the writeHTML method.
I'm trying to have perfectly left aligned text, but every time the line is too long, the next line is offset to the left, see the picture and code below.
<table border="0" cellspacing="0" cellpadding="4">
<tr>
<td>
My Company Equipement<br>
France
</td>
<td bgcolor="green" cellpadding="0">
<b>Addresse de livraison</b>
<br>
<br>
Team Adamon FIGHTING ACADEMY
38 chemin de Tomasenea<br>
Zone de Berrouetta<br>
26000 URRUGNE<br>
France
</td>
<td align="left" style="margin:0;padding:0;text-indent: 0;">
<b>Addresse de livraison</b>
<br>
<br>
Team Adamon FIGHTING ACADEMY
38 chemin de Tomasenea<br>
Zone de Berrouetta<br>
26000 URRUGNE<br>
France
</td>
</tr>
</table>
<p>
Team Adamon FIGHTING ACADEMY
Team Adamon FIGHTING ACADEMY
Team Adamon FIGHTING ACADEMY
Team Adamon FIGHTING ACADEMY
<br>
Team Adamon FIGHTING ACADEMY<br>
Team Adamon FIGHTING ACADEMY<br>
</p>
I know I could count the number of words and put some <br> tags,
but do you know a more elegant solution?
Seems that TCPDF shows the whitespace.
<td>
Line
</td>
will have this undesired indentation, while
<td>Line
</td>
won't. Also remove whitespace after <br /> tags. Same goes to whitespace between the opening <p> and its contents.
EDIT: Removed previous suggestions about switching to writeHTMLCell(), using writeHTML() $cell parameter set to true and removing the cellpadding.
I ran in the same issue yesterday.
As #Matvey Andreyev said, TCPDF does make a difference between
<td>
foo
<td>
and
<td>foo</td>
a workaround would be to wrap your td value in a <div> this would force the lines to start with the same indentation
the following should work
<td><div>first line<br />second line<br /> third line</div></td>
Related
I am attempting to place HTML in an email template of an older vendor solution that doesn't support modern HTML5 techniques. In the code sample (JSFiddle url below) if I resize the template and make it smaller the text falls to the next line without an indent.
Is there a way to make the text indent without a hard line break and indenting?
<div>
<table style="background:#8B0000 ;color:#FFF;width:100%;font-size: 11pt;font-family: Arial;">
<tr>
<td width="10"></td>
<td height="30">Test Email</td>
<td align="right"></td>
<td width="30"></td>
</tr>
</table>
<table style="background:#D9D9D9;color:#17375E;width:100%;font-size: 11pt;font-family: Arial;">
<tr>
<td width="10"></td>
<td height="30"></td>
</tr>
</table>
<table style="background:#D9D9D9;width:100%;font-family: Arial;">
<tr style="background:#FFF">
<td style="background:#D9D9D9"></td>
<td height="30">
<p style="font-size: 10.5pt;font-weight: 700;color:#555"> Test.</p>
<div style="font-size: 10pt;color:#555">
<p> There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>
</div>
</td>
<td style="background:#D9D9D9"></td>
</tr>
</table>
<table style="background:#D9D9D9;color:#17375E;width:100%;font-size: 11pt;font-family: Arial;">
<tr>
<td></td>
<td height="30"> </td>
</tr>
</table>
</div>
Working code sample: https://jsfiddle.net/wa1z4nvr/4/
Remove the ensp entity and give your paragraph a margin you like.
<p style="text-indent: 0; margin: 1em;">There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>
It looks like right now you're using en-spaces as your indent
This would create a behavior where the first line appears to be indented and the rest does not.
If you want subsequent lines of text to be lined up with your first line, then you're probably not looking for an "indent".
You can remove the from both your paragraph and your "Test." text, and adding a padding-left:1em to those elements, or to the table row containing them.
The table containing your test text might look like this:
<table style="background:#D9D9D9;width:100%;font-family: Arial;">
<tr style="background:#FFF">
<td style="background:#D9D9D9"></td>
<td height="30" style="padding-left: 1em">
<p style="font-size: 10.5pt;font-weight: 700;color:#555">Test.</p>
<div style="font-size: 10pt;color:#555">
<p>There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>
</div>
</td>
<td style="background:#D9D9D9"></td>
</tr>
</table>
I'm having trouble getting a scroll bar to show for a school project. I've tried debugging, looking up different ways to fix this and trying all different types of codes. I, however, still can't get a scroll bar to show up.
Here's a preview of the code:
<html>
<title>Cloud 9 HyperX</title>
<body background="test.png" alt="" style="position: fixed;>
<center><img src="Cloud9.png" title="Power Rankings -- Cloud 9"><br></center>
<center>Cloud 9 LCS Page || Gamepedia
<hr width=75% size=5 color=00aced>
<h1>Pro E-Sports Players, LCS Team</h1>
<img src="C9team.png" title="Ultra Rapid Fire TSM vs C9"><br>
<p>Cloud 9 HyperX is a League of Legends Championship Series team consisting of<br>
<TABLE>
<TABLE BORDER="1">
<TR>
<TH COLSPAN="2">
</TH>
</TR>
<TH>Name</TH>
<TH>Role</TH>
<TR>
<TD>Hai "Hai" Lam</TD>
<TD>Mid Laner</TD>
</TR>
<TR>
<TD>An "Balls" Le</TD>
<TD>Top Laner</TD>
</TR>
<TR>
<TD>William "Meteos" Hartman</TD>
<TD>Jungler</TD>
</TR>
<TR>
<TD>Zachary "Sneaky" Scuderi</TD>
<TD>ADC (Attack Damage Carry)</TD>
</TR>
<TR>
<TD>Daerek "LemonNation" Hart</TD>
<TD>Support</TD>
</TR>
</TABLE>
<!--My favorite thing to do on the weekend is play video games with my friend Tim Fish and Jake McGraw and watch LCS-->
<p>Cloud 9, previously Quantic Gaming, first entered the LCS with the line-up of<br>
Nientonsoh(Team Fusion), Hai, LemonNation, WildTurtle(Team Solo Mid), <br>
and Yazuki. While Team Quantic they tried to enter the LCS qualifiers, <br>
but lost their first run. After their first lost in the LCS qualifiers,<br>
they took on a major roster change.<br></center>
<p align="left">
<ul>
<li>Yazuki left, Balls came in for top lane
<li>WildTurtle moved to TSM, Sneaky came in for ADC
<li>Neintonsoh left leaving mid open, Hai moved to mid from previously being jungle
<li>Meteos stepped into jungle to complete what was Quantic Gaming.<br>
</ul></p><center>
After the roster change Quantic went through LCS qualifiers again, only this time<br>
under the name of Cloud 9. After entering the LCS Cloud 9 won two LCS<br>
seasons and finished in the top eight for Season 3 World Championship.<br>
If you remove this declaration
style="position: fixed;
Your scrollbars will appear, when needed.
In general, and this is out of the scope of your question but, your markup has quite a few mistakes, just so you know. Maybe this can help you improve http://www.htmldog.com/guides/html/
I have been trying to get text after a table in HTML but for some reason I cannot get this to work. I have tried using div, padding and margin on the table but nothing seem to work. No matter what I do the text always end up behind the first row of the table unless I use </br>.
Here is my HTML:
<div>
<h2 align=left>1. Delivery schedule</h2>
<body> The table below list the various delivery cycles per store:</body>
<br>
<br/>
<p>
<table border="1" align="left" width="61%" height="100px" frame="border">
<tr>
<th height="30" bgcolor="#002387">Store name</th>
<th height="30" bgcolor="#002387">Order deadline</th>
<th height="30" bgcolor="#002387">Delivery lead time from approval date</th>
</tr>
<tr>
<td colspan="3" bgcolor="#002387" ><font color="#FFFFFF"> Cycle 1</font></td>
</tr>
<tr>
<td>Borehamwood</td>
<td>Friday 1st August 2014 by midday</td>
<td>2-4 working days</td>
</tr>
<tr>
<td>Hemel</td>
<td>Friday 1st August 2014 by midday</td>
<td>2-4 working days</td>
</tr>
</table>
</div>
<importantLink>Please note that the advertised 2-4 working days delivery lead time is conditional of the orders being approved by the regional operation managers by the end of order deadline day.</importantLink>
Your code is bleeding from many wounds. First of all, you should forget about the align attribute, and use a CSS class instead.
.align-left {
text-align: left;
}
<h2 class="align-left">1. Delivery schedule</h2>
Then, you have an unclosed <p> tag right before your table, which could be causing your problem. Having invalid markup can lead to unexpected results. And finally, importantLink - depending on your <!DOCTYPE> - is likely not valid (you have a doctype, right?). Use a standard element like an <a> tag, which actually means that it's a link, and if you want to be able to tell it apart from the rest, use a class or id tag to give it a reusable/unique name, respectively. In your case, the text you are presenting in that tag is nothing like a link, so I suppose a <p> tag is the most suited for your case.
<p class="importantLink">Please note that the advertised 2-4 working days delivery lead time is conditional of the orders being approved by the regional operation managers by the end of order deadline day.</p>
usually html elements go one after another unless you give an element a property such as float:left or float:right or in your case align:left so elements after the table won't be under that table, they will be positioned on it's right and from the top.
if you want that link to be after the table (under that table) remove the align:left from the table,
and when writing HTML make sure the opening and closing tags are the same and that your content is inside the body tag, here is the correction for that:
<html> <!--<div>-->
<body>
<h2 align=left>1. Delivery schedule</h2>
<p> The table below list the various delivery cycles per store:</p>
<br>
<br/>
<div><!--<p>-->
<table border="1" align="left" width="61%" height="100px" frame="border">
<tr>
<th height="30" bgcolor="#002387">Store name</th>
<th height="30" bgcolor="#002387">Order deadline</th>
<th height="30" bgcolor="#002387">Delivery lead time from approval date</th>
</tr>
<tr>
<td colspan="3" bgcolor="#002387" ><font color="#FFFFFF"> Cycle 1</font></td>
</tr>
<tr>
<td>Borehamwood</td>
<td>Friday 1st August 2014 by midday</td>
<td>2-4 working days</td>
</tr>
<tr>
<td>Hemel</td>
<td>Friday 1st August 2014 by midday</td>
<td>2-4 working days</td>
</tr>
</table>
</div>
<importantLink>Please note that the advertised 2-4 working days delivery lead time is conditional of the orders being approved by the regional operation managers by the end of order deadline day.</importantLink>
</body>
<html>
this line <table border="1" align="left" width="61%" height="100px" frame="border">
is causing your issue, either remove align:left or change <importantLink> to <importantLink style="clear:both">
If you want the text within the <importantLink> to be displayed below the table you insert text in a div tag as below:
<div style="clear:both">
<importantLink>Your text comes here....</importantLink>
</div>
Replace your importantLink with the three lines of code above.
I've got two TD's at the bottom left of my HTML email layout, but the first is not taking effect of the 140px width I've set, any obvious reason why?
http://jsfiddle.net/5xqvj/
<td class="blue-table" width="375px" valign="top">
<table class="blue-table" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="http://www.mangemails.co.uk/wyleshardy/3rd-June-2014/slice_03.jpg" />
</td>
</tr>
<tr>
<td class="blue-table" width="20px"></td>
</tr>
<tr>
<td>
<img src="http://www.mangemails.co.uk/wyleshardy/3rd-June-2014/slice_11.jpg" />
</td>
</tr>
<tr>
<td>
<p><strong>8X4 Concrete Mixers</strong><br />
<p>2006 (56) DAF FAD CF75.360 (Euro 4) 8x4 fitted with McPhee 8m3 Rapid Discharge Concrete Mixer, Serial No: 000962H, Build Date: 08/2006, Eaton 5433-080 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Controls, Rear Camera (not in use), 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat. etc. Odometer: c.180K Kms. Tested til: End of September 2014.</p><p>
2004 (04) SCANIA 4 SERIES P114CB-380 8x4 fitted with Hymix 8m3 Rapid Discharge Concrete Mixer, Serial No: H90067, Build Date: 09/12/2003, Sauer HPM51-2 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Electronic Controls, Brigade BE-255 Backeye Rear Camera and in Cab Monitor, 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat, etc. Odometer: c.266K Kms. Test Expired: End of March 2014.
</p>
</p>
</td>
</tr>
<tr>
<td width="140px">
<p><strong>Cars</strong><br />
2011 (61) TOYOTA Verso 2.0 D4-D TR Panoramic Roof 7-Seat 5dr Manual – c.39K miles.
</p>
</td>
<td width="186px"><img src="http://www.mangemails.co.uk/wyleshardy/3rd-June-2014/slice_30.jpg" /></td>
</tr>
</table>
</td>
Looks like you've got two cells in your final row - and only one cell in each row above that. This means your table is effectively two columns wide, with the picture of the car in a tacked-on column by itself. This will be messing up the width calculations.
One way to handle this is to make the one-cell rows span two columns each, and leave the two-cell row as is. colspan will do this, and it is applied something like this:
<tr>
<td colspan="2">
<p><strong>8X4 Concrete Mixers</strong><br />
<p>2006 (56) DAF FAD CF75.360 (Euro 4) 8x4 fitted with McPhee 8m3 Rapid Discharge Concrete Mixer, Serial No: 000962H, Build Date: 08/2006, Eaton 5433-080 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Controls, Rear Camera (not in use), 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat. etc. Odometer: c.180K Kms. Tested til: End of September 2014.</p><p>
2004 (04) SCANIA 4 SERIES P114CB-380 8x4 fitted with Hymix 8m3 Rapid Discharge Concrete Mixer, Serial No: H90067, Build Date: 09/12/2003, Sauer HPM51-2 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Electronic Controls, Brigade BE-255 Backeye Rear Camera and in Cab Monitor, 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat, etc. Odometer: c.266K Kms. Test Expired: End of March 2014.
</p>
</p>
</td>
</tr>
You need to do this to every row.
This should give your width settings more predictable results.
You can double-check your table layout by giving your table cells a temporary border with CSS like this:
td {
border: 1px solid red;
}
Edit
Potentially a better solution would be to use CSS, and float: right the picture of the car (add a margin or padding to put some space around it). Then you can treat everything inside <td class="blue-table" width="375px" valign="top"> like a normal set of paragraphs and images and avoid colspan altogether. There is a long post about the merits or otherwise of using tables for layout here if you're interested: Why not use tables for layout in HTML?
Try this:
<td width="140">
or
<td style="width: 140px">
Currently i am having issue the the word-wrap:break-all; in IE 11 ,IE 9 (tested) .
word-wrap:break-all is working fine if paragraph contains lengthy words as in example http://jsfiddle.net/Midhun52/Jb26N/ .
<table style="width:40px" class="t">
<tr>
<td> </td>
<td class="r">
<div style="width:100%">
<p>abcd abcd yyyyyyyyyyyyyyyyyyyyyyyyyy abcd
</p>
</div>
</td>
</tr>
</table>
But if the lengthy word is made up of characters such as ''' ,':' etc word-wrap:break-all is not working as in example http://jsfiddle.net/Midhun52/3Jyt4/ .
<table style="width:40px" class="t">
<tr>
<td> </td>
<td class="r">
<div style="width:100%">
<p>abcd abcd yyyyyyyyyyyyyyyyyyyyyyyyyy ''''''''''''''''''''''''''''''''''''''''''''''abcd
</p>
</div>
</td>
</tr>
</table>
Please let me know what's the reason behind this? Any solution to this problem?
I think it's because (according to the w3c) the break-all property should only break letters or numbers.
If you really want a string like '''''''''''''''''''''''''''''''''''''''''''''' to be breakable at any point, you need to insert (somehow, perhaps with JavaScript) a line break opportunity between any two characters there. This could be <wbr> or . Under normal conditions, a string of special characters may have some permissible break points.