[{"data":1,"prerenderedAt":621},["ShallowReactive",2],{"project-39778570":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":35,"aspects":36,"strip":46,"post_text":49,"what":50,"said":78,"maker_in_thread":186,"shape":196,"grid":201,"attempts":584,"same_week":585,"maker_shows":33,"maker_hidden":614,"reader_version":615,"card":616},"39778570","Dropflow","A CSS layout engine for node or \u003Ccanvas>","title","Show HN: Dropflow, a CSS layout engine for node or \u003Ccanvas>","https:\u002F\u002Fgithub.com\u002Fchearon\u002Fdropflow","github.com","chearon",1711029511,2024,404,137,110,3515,4,"legend","dev_tools","layout engine","library",[24,25,26,27],"css layout engine","html to canvas","server side pdf","node layout","mixed",0.27,{"positive":31,"neutral":32,"mixed":33,"critical":34},16,17,1,8,42,{"idea":37,"execution":40,"docs":42,"performance":43,"privacy":44,"design":45},{"positive":38,"critical":39},13,2,{"positive":33,"critical":41},0,{"positive":41,"critical":41},{"positive":41,"critical":41},{"positive":41,"critical":33},{"positive":41,"critical":39},[47,48,47,48,41,41,41,33,33,18,41,41,48,48,47,47,47,47,48,48,47,47,48,41,47,47,41,33,47,41,41,41,41,41,41,33,41,48,48,39],5,3,"For the last 5 years I've been working on a layout engine that targets CSS2 and some more modern properties.\n\nLive demo: https:\u002F\u002Fchearon.github.io\u002Fdropflow\u002F\n\nIt matches browsers in all cases I can find where they agree, and it's fast. It supports `position`, `inline-block`, `z-index`, and complex properties like `float` and `vertical-align`. It doesn't support high-level layout like flexbox or grid yet, but you can get intrinsics to easily divide space yourself and paint multiple layout trees. It has a great text layout implementation, and supporting non-Latin scripts is a top priority.\n\nI've ",{"problem":51,"audience":57,"pricing":57,"motivation":58,"time_to_build":62,"stack":66,"openness":75,"stage":76,"team_size":77},{"value":52,"source":53,"evidence":54},"Lays out CSS\u002Frich text for canvas, SVG, server-side rendering and PDFs without running a headless browser","maker",[55],{"id":56},"post",null,{"value":59,"source":53,"evidence":60},"Wanted detailed intrinsics and rich text layout for canvas, SVG and server-side rendering since 2013",[61],{"id":56},{"value":63,"source":53,"evidence":64},"5 years",[65],{"id":56},[67],{"value":68,"source":69,"evidence":70},"JavaScript","inferred",[71],{"id":72,"by":73,"text":74},"39780322","eob","This is incredible --- @chearon thank you for open sourcing this! I think most folks probably don't realize how difficult it is to go from HTML -> PNG programmatically. You get…","open_source","launched","unknown",{"praise":79,"objections":96,"requests":115,"questions":137,"alternatives":152},[80,88],{"value":81,"source":82,"evidence":83},"Useful for server-side PDF generation without browser overhead","commenter",[84],{"id":85,"by":86,"text":87},"39779862","lewisjoe","This is an amazing piece of work. Thanks for making this open-source. The default way of generating beautiful PDFs in the backend these days is, running a headless browser and…",{"value":89,"source":82,"evidence":90},"Impressive craftsmanship and useful for canvas text rendering",[91,95],{"id":92,"by":93,"text":94},"39781420","wg0","This is pure craftsmanship. A heavy undertaking TBH, kind of reinventing browser flow on top of browser primitives.",{"id":72,"by":73,"text":74},[97,108],{"value":98,"source":82,"evidence":99},"No flexbox or grid support limits usefulness",[100,104],{"id":101,"by":102,"text":103},"39781583","lloydatkinson","It doesn’t support flex box? I really can’t tell what the purpose of this library is then.",{"id":105,"by":106,"text":107},"39788573","atoav","Truly a service to the world. I think this is a classic example of \"somebody ought to do $X\" and nobody ever having done it. Thanks. As someone who loves working with CSS for…",{"value":109,"source":82,"evidence":110},"Accessibility for screen readers is unclear",[111],{"id":112,"by":113,"text":114},"39780056","joelanman","this wouldn't be accessible would it? For example to screen readers, so just wondering what the use case is over accessible tech",[116,123,130],{"value":117,"source":82,"evidence":118},"Support for img and table tags",[119],{"id":120,"by":121,"text":122},"39779635","jasonjmcghee","Are you planning to add support for the missing standard tags like img and table (both very useful for pdf rendering)?",{"value":124,"source":82,"evidence":125},"Pagination and @page support for PDFs",[126],{"id":127,"by":128,"text":129},"39781383","Vt71fcAqt7","This looks great. As you mention PDF, do you plan to support the various @page properties that add pagination? For example like pagedjs[0] but native? Major usecases are books…",{"value":131,"source":82,"evidence":132},"Integration with web-platform-tests",[133],{"id":134,"by":135,"text":136},"39785291","Sesse__","Opera switched from Presto to Blink, too. Very fun project! Did you ever consider integrating with web-platform-tests? It's shared between all the common browser vendors, and…",[138,145],{"value":139,"source":82,"evidence":140},"How suitable is it for a text editor and what is the latency",[141],{"id":142,"by":143,"text":144},"39792398","YorickPeterse","How suitable would this be for a text editor of sorts, and what latency would one expect? Using the demo it's difficult to gauge the latency by just eyeballing it.",{"value":146,"source":82,"evidence":147},"What is the API to produce SVG",[148],{"id":149,"by":150,"text":151},"39783769","foreigner","What is the API to produce SVG?",[153,157,168],{"value":154,"source":82,"evidence":155},"Headless browsers like Chrome",[156],{"id":85,"by":86,"text":87},{"value":158,"source":82,"evidence":159},"Weasyprint, wkhtmltopdf, DocRaptor\u002FPrince",[160,164],{"id":161,"by":162,"text":163},"39784621","phonon","Did you try Weasyprint?",{"id":165,"by":166,"text":167},"39789932","nojvek","We use docraptor based on princexml engine but haven’t tried a huge pdf. We generate 20-30 page pdfs sometime and it works great.",{"value":169,"source":82,"evidence":170},"Satori, Sciter, litehtml, Flying Saucer",[171,175,178,182],{"id":172,"by":173,"text":174},"39780458","shepherdjerred","I've used satori [0] on the backend with TypeScript\u002FDeno to render React JSX + tailwind CSS as an SVG (which is then rendered to a PNG). Of course you could use another flavor of…",{"id":176,"by":11,"text":177},"39779491","> wondering if css and svg could be used as abstraction over graphics and UI libraries There's another project called Sciter that uses CSS to target native graphics libraries:…",{"id":179,"by":180,"text":181},"39794526","niutech","There is also HTML\u002FCSS layout engine litehtml (https:\u002F\u002Fgithub.com\u002Flitehtml\u002Flitehtml) and even a full-blown web engine in JS: WebKit.js (https:\u002F\u002Fgithub.com\u002Ftrevorlinton\u002Fwebkit.js)",{"id":183,"by":184,"text":185},"39787417","fgutmann","Great achievement, congratulations! This reminds me of flying saucer, a CSS render written in pure Java. Successfully used it in multiple projects for rendering PDFs in the past.…",{"comments":187,"answered":47,"key":188},9,[189,192,195],{"id":190,"text":191},"39783531","I do think complexity could be part of why we don't have many options here, but I don't agree that a layout engine is too difficult to maintain. More of the issue is that CSS…",{"id":193,"text":194},"39785685","> Opera switched from Presto to Blink, too True. But I wonder if there are more special-purpose engines similar to Prince that have been abandoned. > Did you ever consider…",{"id":176,"text":177},{"commenters":197,"max_depth":198,"maker_replies":187,"first_comment_mins":199,"lifespan_hours":200},94,11,29,46,[202,204,208,211,214,216,220,222,224,226,228,231,233,236,239,240,242,243,245,248,251,254,257,260,263,266,269,273,277,280,283,285,288,291,294,297,300,303,306,309,312,315,317,319,322,323,326,328,331,335,337,339,342,344,346,348,350,352,355,358,361,365,367,370,374,376,378,381,384,386,389,391,393,398,400,403,405,407,409,413,416,418,421,423,426,429,433,436,440,444,446,449,451,453,455,460,464,466,470,473,476,478,481,485,488,491,493,495,497,500,502,505,507,509,514,517,520,522,525,528,531,534,537,540,543,546,549,552,556,559,563,566,570,573,577,579,581],[85,41,47,203,86,41],"project\u002Fpositive\u002Fidea",[205,41,41,206,207,41],"39779973","other\u002Fneutral\u002Fnone","bawolff",[209,41,41,206,210,41],"39781360","vanderZwan",[212,41,41,213,207,41],"39781575","commenter\u002Fneutral\u002Fnone",[215,41,41,213,210,41],"39783162",[217,41,48,218,219,41],"39782387","project\u002Fmixed\u002Fexecution","menacingly",[190,41,41,221,11,33],"maker\u002Fneutral\u002Fnone",[134,41,47,223,135,41],"project\u002Fpositive\u002Fnone",[193,41,41,225,11,33],"project\u002Fneutral\u002Fdocs",[227,41,41,213,135,41],"39785716",[229,41,48,225,230,41],"39787335","nicoburns",[232,41,41,206,135,41],"39788297",[234,41,41,206,235,41],"39790400","gsnedders",[237,41,41,206,238,41],"39783207","rajh",[161,41,41,206,162,41],[241,41,41,206,238,41],"39789102",[165,41,41,206,166,41],[244,41,41,206,238,41],"39790500",[246,41,41,206,247,41],"39784412","ManBeardPc",[249,41,41,206,250,41],"39784574","sciolistse",[252,41,41,206,253,41],"39781156","pmx",[255,41,41,206,256,41],"39789589","palmfacehn",[258,41,41,206,259,41],"39783266","Pelerin",[261,41,41,206,262,41],"39784782","Lukas_Skywalker",[264,41,41,206,265,41],"39785031","lukew3",[267,41,41,206,268,41],"39785346","ricardobeat",[270,41,33,271,272,41],"39783367","project\u002Fcritical\u002Fnone","thekingshorses",[274,41,48,275,276,41],"39783842","project\u002Fneutral\u002Fidea","aidos",[278,41,41,206,279,41],"39788497","dusanh",[281,41,33,271,282,41],"39793869","Sateeshm",[284,41,41,206,180,41],"39794505",[286,41,33,271,287,41],"39799241","xtrimsky1234",[289,33,47,203,290,41],"39783598","moron4hire",[292,39,47,203,293,41],"39780282","mattmar96",[295,39,41,213,296,41],"39786318","webprofusion",[298,39,41,206,299,41],"39786754","internetter",[301,48,41,206,302,41],"39778922","lovegrenoble",[304,48,41,206,305,41],"39781376","airstrike",[307,48,41,206,308,41],"39781784","undershirt",[310,48,41,206,311,41],"39784392","techscruggs",[313,48,41,206,314,41],"39787534","fareesh",[316,18,48,275,296,41],"39786270",[318,18,41,206,299,41],"39786702",[320,47,48,275,321,41],"39778996","bobajeff",[176,47,41,221,11,33],[324,47,48,275,325,41],"39780228","jsunderland323",[327,47,41,275,11,33],"39780748",[329,47,41,213,330,41],"39781487","c-smile",[332,47,47,333,334,41],"39782762","maker\u002Fpositive\u002Fnone","Traubenfuchs",[336,47,41,206,330,41],"39786417",[338,47,41,213,180,41],"39794779",[340,47,41,206,341,41],"39789462","rikroots",[343,47,41,213,11,33],"39791174",[105,345,47,203,106,41],6,[347,345,41,206,180,41],"39794613",[72,349,47,203,73,41],7,[351,349,41,206,180,41],"39794809",[353,34,47,203,354,41],"39778886","big_paps",[356,34,41,206,357,41],"39778931","troupo",[359,34,41,206,360,41],"39782806","Rohansi",[362,187,47,363,364,41],"39779323","maker\u002Fpositive\u002Fidea","awesomekling",[366,187,41,221,11,33],"39779562",[183,368,48,369,184,41],10,"project\u002Fneutral\u002Fnone",[371,198,48,372,373,41],"39779509","maker\u002Fneutral\u002Fidea","robbiejs",[375,198,41,225,11,33],"39780347",[179,377,48,369,180,41],12,[379,377,41,206,380,41],"39795131","andrewmcwatters",[382,377,41,206,383,41],"39795268","dormento",[385,377,41,206,380,41],"39797581",[387,38,47,203,388,41],"39780841","LinguaBrowse",[127,390,48,275,128,41],14,[392,390,41,221,11,33],"39781909",[394,395,41,396,397,41],"39779719",15,"other\u002Fneutral\u002Fidea","usrusr",[142,31,48,399,143,41],"project\u002Fneutral\u002Fperformance",[401,32,47,203,402,41],"39782766","justhw",[112,404,48,275,113,41],18,[120,406,48,369,121,41],19,[408,406,41,221,11,33],"39779931",[410,411,41,206,412,41],"39783613",20,"vthommeret",[414,411,41,206,415,41],"39783740","tills13",[417,411,41,206,412,41],"39784436",[419,411,41,206,420,41],"39784518","AaronFriel",[422,411,47,203,420,41],"39784502",[424,411,41,206,425,41],"39785821","pier25",[427,428,48,221,380,41],"39786472",21,[430,431,41,396,432,41],"39779703",22,"AndriyKunitsyn",[92,434,47,435,93,41],23,"project\u002Fpositive\u002Fexecution",[437,438,48,369,439,41],"39779602",24,"XCSme",[441,442,41,206,443,41],"39779902",25,"pietroppeter",[445,442,41,206,207,41],"39780034",[447,442,41,448,443,41],"39788724","other\u002Fpositive\u002Fnone",[450,442,41,206,230,41],"39785232",[452,442,41,206,443,41],"39788720",[149,454,48,225,150,41],26,[456,457,33,458,459,41],"39779477",27,"project\u002Fcritical\u002Fidea","1oooqooq",[461,457,41,462,463,41],"39779679","commenter\u002Fneutral\u002Fidea","Bjartr",[465,457,41,462,459,41],"39780133",[467,468,47,203,469,41],"39781284",28,"mwit2023",[471,199,41,396,472,41],"39781441","rrgok",[474,199,41,206,475,41],"39781668","eeiaeaa",[477,199,41,213,472,41],"39782763",[479,199,41,213,480,41],"39785880","spankalee",[482,199,41,483,484,41],"39781731","commenter\u002Fneutral\u002Fperformance","duckfruit",[486,199,41,213,487,41],"39781954","hwillis",[489,199,41,490,373,41],"39781738","other\u002Fneutral\u002Fperformance",[492,199,41,490,480,41],"39782909",[494,199,41,490,373,41],"39785221",[496,199,41,213,480,41],"39785872",[498,199,41,483,499,41],"39789154","exceptione",[501,199,41,483,373,41],"39790068",[503,199,41,206,504,41],"39782002","dtf",[506,199,41,206,180,41],"39794971",[172,508,41,448,173,41],30,[510,511,41,512,513,41],"39779801",31,"other\u002Fcritical\u002Fidea","eigenvalue",[515,511,41,206,516,41],"39779988","jdiff",[518,511,41,519,113,41],"39780037","other\u002Fcritical\u002Fnone",[521,511,41,206,516,41],"39781842",[523,511,41,206,524,41],"39780016","guhcampos",[526,511,41,519,527,41],"39780164","littlestymaar",[529,511,41,206,530,41],"39783666","wizzwizz4",[532,511,41,519,533,41],"39780716","ttepasse",[535,511,33,458,536,41],"39780210","danielvaughn",[538,511,41,206,539,41],"39780313","dspillett",[541,511,41,206,542,41],"39780359","abofh",[544,511,41,206,545,41],"39784158","nickpsecurity",[547,511,41,206,548,41],"39787055","zharknado",[550,511,41,206,551,41],"39785517","NegativeLatency",[553,554,47,203,555,41],"39779301",32,"ape4",[557,554,33,558,135,41],"39785269","project\u002Fcritical\u002Fprivacy",[560,554,41,561,562,41],"39787167","commenter\u002Fneutral\u002Fprivacy","adtac",[564,554,41,565,135,41],"39788329","commenter\u002Fcritical\u002Fprivacy",[567,568,47,203,569,41],"39782168",33,"peer2pay",[101,571,33,572,102,41],34,"project\u002Fcritical\u002Fdesign",[574,571,48,575,576,41],"39786303","project\u002Fneutral\u002Fdesign","recursive",[578,571,33,572,102,41],"39788567",[580,571,41,213,576,41],"39795504",[582,571,48,275,583,41],"39786399","benatkin",[],[586,591,596,601,605,609],{"id":587,"name":588,"points":589,"category":590},"39783223","Memories",797,"productivity",{"id":592,"name":593,"points":594,"category":595},"39836630","Explanations",391,"learning_science",{"id":597,"name":598,"points":599,"category":600},"39807912","Glossarie",363,"languages",{"id":602,"name":603,"points":604,"category":20},"39816836","Jampack",328,{"id":606,"name":607,"points":608,"category":20},"39793513","magick.css",305,{"id":610,"name":611,"points":612,"category":613},"39819458","Tracecat",264,"security_privacy",false,"v2",{"id":617,"name":5,"line":6,"ai":614,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":29,"top":18,"kw":618,"maker":11,"domain":10,"tier":19,"attempts":41,"strip":619,"url":9,"mix":620,"praise":81,"objection":98,"sub":21},39778570,[24,25,26,27],"5353000114003355553355305501500000010332",[31,32,33,34],1793991087128]