Custom borders using HTML / CSS with basic HTML
I am using TCPDF which has problems with normal HTML / CSS. It accepts a basic set of HTML / CSS and, unfortunately, nothing fancy.
I need a way to create custom dashed lines like below:
Seeing that CSS only has the border property of solid, dotted, or dotted, I am missing the "other way" of dashed lines. I need to be able to control the stroke length and the length of the intermediate space. So, for example, stroke length 17 and intermediate space 5.
How can i do this? Can I do it?
So far, exploring other questions hasn't helped me. I have read several questions and none of the solutions have helped yet. Either it is too fancy (tcpdf is ignoring it) or it falls back to dash and dotted properties and it is not enough for my purpose.
source to share
Since you are using a library that does not implement CSS, more useful features (such as custom dashed borders, image borders, or CSS gradients), and because you are writing HTML + CSS solely to generate a PDF document, then I see no problem writing non- semantic HTML using old school techniques like <table>
-abuse to create an image border.
I suggest using a 9-grid:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="topLeftCorner.gif" alt="" /></td>
<td background="horizontalDottedBorder.gif"> </td>
<td><img src="topRightCorner.gif" alt="" /></td>
</tr>
<tr>
<td background="verticalDottedBorder.gif"> </td>
<td>content!</td>
<td background="verticalDottedBorder.gif"> </td>
</tr>
<tr>
<td><img src="botLeftCorner.gif" alt="" /></td>
<td background="horizontalDottedBorder.gif"> </td>
<td><img src="botRightCorner.gif" alt="" /></td>
</tr>
</table>
BIG GENERAL WARNING: Never use this markup in an HTML document viewed in a real web browser.
... with the possible exception of HTML email targeting for Office Outlook 2007-2013, which is still terrible: http://fixoutlook.org/ and https://www.campaignmonitor.com/blog/post/3769/a -designers-guide-to-outlook-2013
(disclaimer: I work for Microsoft, but not on the Office team, and this opinion belongs to me, not the company, etc.)
source to share
TCPDF / tcpdf.php (main file) has a method called getCSSBorderDashStyle. You can set different styles there.
It looks like
switch (strtolower($style)) {
case 'none':
case 'hidden': {
$dash = -1;
break;
}
case 'dotted': {
$dash = 1;
break;
}
case 'dashed': {
$dash = 3;
break;
}
case 'double':
case 'groove':
case 'ridge':
case 'inset':
case 'outset':
case 'solid':
default: {
$dash = 0;
break;
}
}
return $dash;
By updating the $ dash variable, you can set the width and space between dots / lines (name them whatever you like). With $ dash = 2, it is almost identical to the dot boundary. I am attaching examples below:
Dash 2
Dash 5
Dash 15
Dash 50
You can experiment with this and you will probably get results closer to what you expected. I am setting them to css for PDF (top)
<html>
<head>
<style type="text/css">
.dashed_div
{
border-bottom: 1px dotted #000;
width:100%;
text-align:right;
font-size: 12px;
}
...
source to share