Forum Feature requests

CSS Flexbox support

pepelsbey
Since new CSS Flexbox spec is Candidate Recommendation now and implemented in a few browsers (Chrome, IE10 and non-public Opera builds) it is time to add Flexbox support to Prince.

Haven't found it on roadmap and forum, so starting this feature request topic.

Pretty please?
mikeday
Maybe next year? :)

Just out of curiosity, what do you need it for?
pepelsbey
Just a few examples. Centering anything in the middle of parent:

.parent { display:flex }
.child { margin:auto }

Rearranging elements in a row or column using CSS order property:

.item-1 { order:3 }
.item-2 { order:1 }
.item-3 { order:2 }

And more.
mikeday
Right, reordering can be done with JavaScript, but vertical centering is still difficult to arrange with regular CSS.
msisto
Yes, this would be helpful. Many modern grid frameworks utilize the flex-box model. This, along with lack of HTML5 support, are two major blockers for me.
yunchi
Flexbox is now supported in all major browsers and the spec is in Last Call Working Draft state. We utilize flexbox pretty heavily in our site and would love it if we could use it in Prince as well. It doesn't just make vertical centering easier but obsoletes a lot of other layout techniques and hacks.
rbuels
+1 to this. Flexbox support would be so, so nice.
dino
+1
jonas
+1 Would definitely be a nice addition!
wgardner
Any update on this? Flexbox is now pretty well established. Why isn't this supported yet?
mikeday
Simply because we have not had time to implement it yet. But it is a very popular request, and we hope to get to it soon. :)
wgardner
OK Thanks! :D
flaviag
+1 on this one :)
mikeday
We are beginning our investigation of CSS flexbox layout and would welcome any relevant example documents you might have. In particular there are questions of how page-breaking will interact with flexbox.
John
Hello Mike,

as Flexbox support is a hot topic for us right now, please explain what example documents you need? Use cases, where Flexbox support would come in handy?

Greetings,
John
mikeday
Yes, cases where you would benefit from it, and any examples we might like to test with as we develop flexbox support. In particular, any long content that may need to be split across multiple pages.
John
Okay, I will browse through our previous work and collect some examples.
hallvord
John's samples will certainly be useful, I'll just note that there's also a nice set of demo pages available here:
https://philipwalton.github.io/solved-by-flexbox/

(Maybe it would be nice if the "holy grail" demo had more content in left and right columns..)

Announcement: repos for tests/utils

John
Hello,

back again with three examples concerning equal height of containers, vertical alignment and ordering. But I believe the page linked to by hallvord covers these already.

Greetings,
John
  1. Flexbox Equal Height Example.html0.8 kB
  2. Flexbox Order Example.html0.8 kB
  3. Flexbox Vertical Align Example.html1.2 kB
hallvord
Well, perhaps that page covered all of it but it's always nice to have small, isolated, stand-alone tests to work with. I've pushed those too into my miscellany repo (with small modifications - https://github.com/yeslogic/miscellaneous-testcases/commit/702a54013737bdc3da60074d77b97c8689dba5fe ), hope you don't mind. Thanks! :)

Announcement: repos for tests/utils

hallvord
(Now of course we need some longer texts using flexbox to make sure mikeday & co does the hard work thinking about how this should all work when paginated! ;))

Announcement: repos for tests/utils

svpersteve
I desperately need flex support, we automate adding 1-3 logos to certificates for hundreds of organisations, and those logos are all different shapes and sizes. With our digital certificates we just use flex to have them all aligned in a horizontal row but this is a nightmare with floats.
zachphillips
We too would love flexbox support. It's especially useful for print.
John
Any progress made here or anything we can support you with?
mikeday
Progress! It is an active topic of development and we are passing some of the flexbox tests now. It's not in Prince 11, but we should have builds you can test early next year. :)
John
Awesome! Don't hesitate to contact me directly if you need any help or we can test smthg :)
imranashrafcs
Any update on flex support. When we able to use this feature with PDF?
mikeday
Coming soon!
John
Exciting! I hope not "Half Life 3" soon though ;p
bthecss
What about getting support up for non-reflowing pages? I am using prince to create one page marketing items and that text doesn't need to reflow—which I am sure is one of the bigger problems you are trying to figure out with supporting flex—and having flex support for that kind of layout would be very helpful.
mikeday
Yes, we will deliver support for flexbox in stages, beginning without fragmentation / page breaking.
bthecss
Hello, just thought I would check in: Do you know anymore about the date for Flex support?
mikeday
Good news, we're getting closer to having a build ready for testing.
John
hello mike,

if needed, we are more than happy to do some testing :)

greetings,
John
nsnsolutions
We would be willing to do some testing as well. This is a much anticipated feature! Thanks for the update Mike.
markbrown
Hi everyone,

We're nearing completion of our testing for the first release of flexbox. To give you an idea of progress, at the present time we pass most of the relevant tests from the W3C public test suite with the remaining test failures falling under the following categories:
  • paint ordering,
  • multicol flex items,
  • absolutely positioned elements in flex items,
  • poor performance for nested flex containers.
Please also note that we're not planning to support the following in conjunction with flexbox, at least in the initial release:
  • page breaking/fragmentation,
  • break-before/-after,
  • visibility:collapse,
  • vertical writing.
We ought to be able to release the first version by next month, assuming no major issues come to light. Please let us know if any of the features mentioned above are ones you might need, and thanks for your patience and support!

Mark
markbrown
Flexbox is now available to try in the latest build.

We've now got multicol flex items and absolutely positioned elements in flex items working properly, and we've also improved the performance of nested flex containers. We're planning to work on fragmentation later this year.

Please give it a try, and let us know what you think.
bthecss
Is there somewhere where I can see the flex properties you are using?
markbrown
We support all the properties from the spec.
bthecss
Hello,

I've discovered an issue with margin:auto. When I have a single line item using flex with a margin-bottom:auto, flex works well for both the browser and export. However, when I increase the font size so that the line wraps to two lines, the margin-bottom: auto doesn't work any more on export even though the browser preview looks good.

Edited by bthecss

markbrown
Thanks, I will look into this.
adnanY
hi,
just installed atest build for debian (prince-11.3-debian8.0-amd64.tar.gz)

...and flex seems not to be supported. had a div with display:flex and flex-direction:column but the elements in this div are positioned like display:block.


im also asking me why there is still the "prince-20160929-debian7.4-amd64.tar.gz"-build in download/latest while in packages is the above mentioned one?

Edited by adnanY

mikeday
Support for flexbox is included in latest builds, but not Prince 11.
adnanY
oh, ok..that means i should install "prince-20160929-debian7.4-amd64.tar.gz"?
which is from 2016-09-29?
and not debian 8?

Edited by adnanY

John
Hi Adnan,

no, just check out this page: http://www.princexml.com/latest/

greetings,
John
adnanY
hi mike, hi john,
yes, but for debian there only the version i posted. no 20170731!?
adnanY
ah, ok...i see, you just updated. thanks in advance!!!!!!!!
so fast!!!!!!!!!!!
adnanY
sorry, me again but its not working.
could instantiate prince but whe calling convert_file_to_file() it returns false.
when i return to prince11.3 from the download pag (not latest) the pdf was generated.
also log was not created, with the 11.3 it does log.

maybe the php-wrapper also has to be updated?

thx...
mikeday
Can you check that it runs successfully from the command-line?
adnanY
thx, but i reinstalled it last evening and its running. :-)