Border-radius rendering

[GoogleCodeExporter]

What would you like dompdf to do:

Render rounded borders using by translating border-radius CSS rules into 
rounded corners in PDF. Assuming such is supported of course.

With more and more web pages using such features these days it could be quite 
handy and useful.

Do you have an example:

http://www.css3.info/preview/rounded-border/

Original issue reported on code.google.com by sciguyr...@gmail.com on 19 Oct 2011 at 7:32

[GoogleCodeExporter]

Original comment by eclecticgeek on 20 Oct 2011 at 3:48

• Changed state: Accepted

[GoogleCodeExporter]

Please notify me when this is supported!

Original comment by gche...@gmail.com on 11 Jan 2012 at 6:27

[GoogleCodeExporter]

Is it ?

Original comment by pierro.l...@laposte.net on 16 Feb 2012 at 4:18

[GoogleCodeExporter]

No

Original comment by fabien.menager on 18 Feb 2012 at 11:46

[GoogleCodeExporter]

Is there an ETA on this? It would greatly simplify some code I'm writing.

Original comment by d...@sheepdan.net on 4 Apr 2012 at 3:39

[GoogleCodeExporter]

There is no ETA for this as we spend more time on highly demanded issues.
http://code.google.com/p/dompdf/issues/list?sort=-stars

But you are welcome if you want to help us for this ;)

Original comment by fabien.menager on 5 Apr 2012 at 11:51

[GoogleCodeExporter]

OK, I've got something working. It's not 100% complete, but it does what I 
need, and probably what most people need.

SUMMARY

It handles attributes such as:
  border-radius: 10px;
  border-radius: 10mm;
  border-radius: 10px 20px 30px 40px;
  border-top-left-radius: 10px; (etc)

It doens't handle neatly eliptical corners (e.g. border-top-left-radius: 10px 
5px;), or the scenario where the borders vary in colour or width.

I'd appreciate if you'd check the setters in style.cls.php when you've got 
time, I'm not sure they're correct.

CAVEATS

I'm not sure how to merge this in...! I've not used google code before, but it 
looks like it's running on SVN? I'm used to source control, but I've not 
actually used SVN before.
I've made my changes to 0.6.0.b3. Let me know how I should merge it. I'm happy 
to get SVN working and merge it into the tip, or I can zip and attach the code 
if you'd prefer.

I've implemented it by drawing quadrants using clipping_rectangle() and 
circle(). I'd really have liked an arc() function, so I could draw eights of 
circles, and preferably an elipse_arc() function.
I'm guessing that such functions do exist in the pdf libraries, but I'd need to 
dig into each of them and expose them to _canvas, which is a fair bit of work.

Therefore, it won't neatly handle rounded corners where the border colours 
differ on the different sides. The corner will be all one colour. This also 
affects inset, outset, ridge, and groove styles - the whole corner matches one 
side. This would be fixed if I could find an arc() function.

It also does not handle eliptical corners, as there's no elipse() function on 
_canvas:
  border-top-left-radius: 10px 20px;
  border-radius: 10px 20px 30px 40px / 15px 25px 35px 45px;

It won't elegantly handle rounded corners where the borders are different 
widths on different sides. That's actually quite a tricky one, I think.

If used with a radius = 0 on some corners, and radius > 0 on some corners, the 
bevel will be lost on the corners with no radius (this could probably be fixed 
fairly easily).

Rounded corners with style double are slightly malformed. I think this could be 
fixed with elipse().

I've refactored quite a bit of the _border_xxx code in 
abstract_renderer.cls.php in the process, reducing some redundancy, and 
hopefully making it easier to maintain and extend in the future. I hope that's 
ok.

I've tried to preserve your coding style in my work, though you'll doubtless 
find some differences.

I'm not sure if the setters for the border-radius are implemented correctly; I 
didn't 100% understand the mechanisms behind them. They seem to work, but I've 
not done anything about !important - I wasn't sure if that needs passing 
through or if that's taken care of automatically.

Dotted and dashed styles continue to be dotted/dashed on the corners (though 
the dots seem to stretch a bit), whereas firefox shows them solid on the 
corners. This is probably an improvement over firefox?

Original comment by d...@sheepdan.net on 11 Apr 2012 at 11:42

[GoogleCodeExporter]

Example Output

Original comment by d...@sheepdan.net on 11 Apr 2012 at 11:43

Attachments:

• dompdf_out-251.pdf

[GoogleCodeExporter]

Man, this is a very good start! 
I strongly recommend you to checkout the source code from the trunk : 
http://code.google.com/p/dompdf/source/checkout
and give us a patch with the code you changed.

As you said, we'll need to add "arc" methods to the canvas classes, I'll take 
care of it. Do you handle background clipping?

Keep up the good work, I can't wait to see your patch!

Original comment by fabien.menager on 11 Apr 2012 at 2:14

• Changed state: Started

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Here's the updated files if anyone wants them.

Original comment by d...@sheepdan.net on 30 Jul 2012 at 3:51

Attachments:

• include.zip
• class.pdf.php

[GoogleCodeExporter]

This works great except for two issues that i have seen. First, no background 
clipping. Not much of an issue where the background color of the element is the 
same as the background color of the page. You won't notice it then. Second is 
that when doing a colored border, in the upper left corner there is always one 
eighth segment that is black. Keep up the good work.

Original comment by jonathan...@gmail.com on 6 Aug 2012 at 9:09

[GoogleCodeExporter]

I'm currently integrating the changes Dan made, with a few optimizations and 
correction (like background clipping and the top left corner remaining black).
I thought this was a good way to get back into dompdf's code ;)

Original comment by fabien.menager on 7 Aug 2012 at 7:57

[GoogleCodeExporter]

This issue was updated by revision r496.

There are still issues with the PDFLib adapter, but background clipping and the 
top left border bug are fixed with Cpdf

Original comment by fabien.menager on 7 Aug 2012 at 12:59

[GoogleCodeExporter]

Sorry for those bugs, not sure what's up with the black segment, I've seen all 
segments the correct colour in my tests, so it might be a combination of css 
settings I didn't test. I didn't do much testing with different colours or 
widths on different parts of the border (though I did check different radii), 
and most of what I was doing was with circular borders, with no straight 
segments.

Background clipping should be working, at least on images; I've probably not 
tested it with background-color. If it's not working with images, I must have 
uploaded the wrong version. If background images are working but not 
background-color, then the background-color needs moving inside the clipping.

One thing I didn't do, but I think needs to be done, is to correct the draw 
order.
I think it should be:
Overflow visible: start clipping, background, stop clipping, border, content
Overflow hidden: start clipping, background, content, stop clipping, border
I can't remember what the current order is, but I don't think it's correct.

Original comment by d...@sheepdan.net on 7 Aug 2012 at 1:10

[GoogleCodeExporter]

Just do an SVN update and you'll see how I changed your code ;)
Background color and image clipping were not in your code, but it was easy to 
implement.

http://pxd.me/dompdf/www/examples.php > border_radius

Original comment by fabien.menager on 7 Aug 2012 at 1:14

[GoogleCodeExporter]

Just to let u know, border-radius doesnt work on images, atleast not on string 
images > <img src="data:image/png;base64,TEXTEXTEXTEXT"/>

Original comment by rfoge...@gmail.com on 8 Aug 2012 at 4:34

[GoogleCodeExporter]

Yes, in fact it works, but they overflow on the corners, I'll fix it.

Original comment by fabien.menager on 9 Aug 2012 at 11:56

[GoogleCodeExporter]

Original comment by eclecticgeek on 24 May 2013 at 3:00

• Added labels: Restrict-AddIssueComment-Commit