Custom borders using HTML/CSS with basic HTML

Question

I am using TCPDF, which has issues with normal HTML/CSS. It accepts a basic set of HTML/CSS and unfortunately nothing really fancy.

I need a way to create custom dashed lines, as below:

enter image description here

Seeing how CSS only has border property of solid, dashed, or dotted, I am lacking the "other way" of dashed lines. I need to be able to control the length of the stroke, and the length of the in-between space. So for example stroke length of 17, and in-between space of 5.

How can I do this? Can I do this?

So far looking at other questions did not help me. I've read a few questions and none of the solutions so far helped. Either it's too fancy (tcpdf ignores it), or it resorts back to dashes and dotted properties and those are not sufficient for my purpose.

There are also double, groove, ridge, inset, and outset. There's no way that I know of to easily do this in a way that a PDF creator would also be able to understand. I'd be interested in this, as well. — ps2goat
you can create a draw line function yourself that will read 2 values both dash length and space length, and the function would then find the current content y value then draw small lines and then stop when it teaches x =0 or whatever page margin you set. Not sure if this helps.. — vico
I'd be interested in this solution too, if there is one. The best thing i could come up with is not even good enough to merit an answer, but you could style a table to appear as a dashed border, with custom widths. i used :nth-child, but you could just add classes to alternating cells. vertical borders would be harder than horizontal, too. jsfiddle.net/mntux9ec/1 — Dpeif
I can't really begin to describe what it would involve, but I wonder if you could manage some sort of smart-polyfill using an SVG element. Doing that actually managed to fix some of the border-rendering bugs we were getting in IE9. — Katana314

Mitko Delibaltov Mitko Delibaltov · Accepted Answer · 2016-09-15T15:03:10

There is a method in TCPDF/tcpdf.php (the main file) called getCSSBorderDashStyle . You can set there different styles.

It is looking 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(call them as you wish). Having $dash = 2 it is almost identical to the dots border. I am attaching examples below:

Dash 2 Dash 5 Dash 15 Dash 50

You can experiment with that and probably get results closer to what is expected. I am setting them in the css for the PDF (on top in head)

<html>
            <head>
            <style type="text/css">
            .dashed_div
            {
                border-bottom: 1px dotted #000; 
                width:100%; 
                text-align:right;
                font-size: 12px;
            }
...

Custom borders using HTML/CSS with basic HTML

3 Answers