[{"data":1,"prerenderedAt":343},["ShallowReactive",2],{"project-48946738":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":29,"sentiment":30,"stance_mix":31,"scored_comments":36,"aspects":37,"strip":44,"post_text":47,"what":48,"said":72,"maker_in_thread":172,"shape":182,"grid":187,"attempts":300,"same_week":305,"maker_shows":34,"maker_hidden":335,"reader_version":336,"card":337},"48946738","Justif","Knuth-Plass justification and microtypography for the web","title","Show HN: Justif – Knuth-Plass justification and microtypography for the web","https:\u002F\u002Fjustif.lyall.co\u002F","justif.lyall.co","lyall",1784292440,2026,198,40,294,4366,7,"notable","languages","javascript text layout library","library",[24,25,26,27,28],"text justification","knuth-plass","microtypography","javascript typography","css justify","loved",0.451,{"positive":32,"neutral":33,"mixed":34,"critical":35},14,8,2,1,25,{"design":38,"execution":40,"privacy":41,"idea":42,"performance":43},{"positive":18,"critical":39},0,{"positive":35,"critical":35},{"positive":39,"critical":39},{"positive":34,"critical":39},{"positive":39,"critical":39},[45,46,39,45,45,46,39,39,46,45,39,46,45,46,39,35,39,39,39,39,45,39,46,39,45,46,39,46,39,45,45,45,45,45,45,45,46,39,46,39],5,3,"Justif is a drop-in JavaScript library that progressively enhances web pages to TeX-level text justification. Installation is a single \u003Cscript> line, standard text and accessibility affordances are unchanged, and users with JS disabled get native browser rendering.\n\nI made justif because I've long been a fan of justified text. I think it looks clean and elegant, and makes reading more enjoyable. But bad justification is the opposite, with gaping spaces that distract me to the point of making the text near unreadable.\n\nBrowsers have got better recently at handling justified text [0][1], but sti",{"problem":49,"audience":55,"pricing":55,"motivation":56,"time_to_build":55,"stack":60,"openness":69,"stage":70,"team_size":71},{"value":50,"source":51,"evidence":52},"Browsers use greedy line breaking, producing gaping spaces in justified text","maker",[53],{"id":54},"post",null,{"value":57,"source":51,"evidence":58},"Maker loves justified text and wants better justification than browsers provide",[59],{"id":54},[61,65],{"value":62,"source":51,"evidence":63},"JavaScript",[64],{"id":54},{"value":66,"source":51,"evidence":67},"Knuth-Plass line breaking algorithm",[68],{"id":54},"open_source","launched","unknown",{"praise":73,"objections":112,"requests":130,"questions":149,"alternatives":158},[74,94],{"value":75,"source":76,"evidence":77},"Demo looks beautiful and impressive; typography much improved","commenter",[78,82,86,90],{"id":79,"by":80,"text":81},"49001904","jstrieb","Wow, I'm seriously impressed! Questions for the author: I haven't had a chance to read the code yet, but how does this actually adjust the text? I get that it uses Knuth-Plass to…",{"id":83,"by":84,"text":85},"49009977","vhwalke","Implemented on https:\u002F\u002Ffederalistreader.org ... made a big difference! You can see the comparison here: https:\u002F\u002Ffederalistreader.org\u002Fnotes\u002Fjustif\u002F Nicely done! (and thanks for…",{"id":87,"by":88,"text":89},"48947083","svat","This is great! Loved the demo and controls (and nice touch to include The Frog Prince as one of the sample texts lol). I think by doing tracking and expansion you're going even…",{"id":91,"by":92,"text":93},"48998303","antics9","Side-by-side didn’t do it for me but flicker made all the difference! This is great, wish that browsers would implement a better algorithm. Also good execution with the demo page.",{"value":95,"source":76,"evidence":96},"Useful for print templates, blogs and historical typesetting",[97,101,105,108],{"id":98,"by":99,"text":100},"49004588","heroncoder","Good，this is very helpful for handling the layout in the print template.",{"id":102,"by":103,"text":104},"49008461","sebmellen","Will be switching my blog to this.",{"id":106,"by":84,"text":107},"48999048","Wow! I've spent the past few weeks setting 18th-century newspaper text on the web - justified, up to three narrow columns, period ligature, and the gap between CSS justification…",{"id":109,"by":110,"text":111},"49001361","savoyard","A most welcome addition to a webmaster’s toolkit. Congratulations!",[113,120],{"value":114,"source":76,"evidence":115},"Quadratic-time algorithm may be slow on long paragraphs",[116],{"id":117,"by":118,"text":119},"49002351","userbinator","Beware: the TeX justification algorithm is quadratic-time.",{"value":121,"source":76,"evidence":122},"Drop caps with floats overflow the gutter",[123,127],{"id":124,"by":125,"text":126},"49005690","asimpletune","Does this work with drop caps or could it be made to work with them? Cool work by the way.",{"id":128,"by":84,"text":129},"48999370","Follow-up, since I asked the questions above: I spent the evening running Justif against the hardest page I have: three 356px columns of 18th-century text set in IM Fell at…",[131,138,142],{"value":132,"source":76,"evidence":133},"Support for irregular shaped edges and per-line widths",[134],{"id":135,"by":136,"text":137},"48999660","torgoguys","I haven't looked at the API yet, but the demo is great on my phone. Instead of just justified blocks, can you have it do a \"justified\" (even amount of spacing) from an…",{"value":139,"source":76,"evidence":140},"Exclusion selector for paragraphs like drop caps",[141],{"id":128,"by":84,"text":129},{"value":143,"source":76,"evidence":144},"Thin or intersentence space distinction for abbreviations like No.",[145],{"id":146,"by":147,"text":148},"49004065","emil-lp","Great work. It looks as the space in \"No. 12\" is too large. Is it possible to distinguish between space and sentence-end-space?",[150,154],{"value":151,"source":76,"evidence":152},"Whether the maker used LLMs to write the code",[153],{"id":79,"by":80,"text":81},{"value":155,"source":76,"evidence":156},"How hyphenation and narrow column widths are handled",[157],{"id":106,"by":84,"text":107},[159,166],{"value":160,"source":76,"evidence":161},"Chromium text-wrap: balance",[162],{"id":163,"by":164,"text":165},"48998253","wrs","Chromium supposedly implemented Knuth-Plass for CSS's \"text-wrap: balance\", but reading the end of the tracking bug [0] it seems it stops at six lines? (Design doc: [1]) [0]…",{"value":167,"source":51,"evidence":168},"TeX microtype package",[169],{"id":170,"by":11,"text":171},"48947264","Thank you! And yes by default TeX doesn't do tracking or expansion, but the microtype [0] package does. And I did struggle a bit with deciding how best to do the comparison to…",{"comments":173,"answered":18,"key":174},10,[175,178,181],{"id":176,"text":177},"49002419","The layout is done entirely in DOM. The layout engine calculates the line breaks, tracking, expansion, etc. then applies the layout using HTML spans with the appropriate…",{"id":179,"text":180},"49000205","That's not something justif supports directly right now. It currently targets rectangular blocks, not arbitrary edge shapes. But the underlying line-breaking approach could…",{"id":170,"text":171},{"commenters":183,"max_depth":184,"maker_replies":173,"first_comment_mins":185,"lifespan_hours":186},28,4,34,148,[188,192,194,195,199,200,202,204,208,211,213,215,218,222,226,229,232,234,238,241,244,246,249,251,253,258,261,264,266,268,271,275,277,279,283,285,289,291,293,295,298],[189,39,45,190,191,39],"49001270","project\u002Fpositive\u002Fdesign","Rendello",[79,35,46,193,80,39],"maker\u002Fneutral\u002Fexecution",[176,35,39,193,11,35],[196,35,45,197,198,39],"49006750","maker\u002Fpositive\u002Fdesign","r3trohack3r",[83,34,45,190,84,39],[135,46,46,201,136,39],"project\u002Fneutral\u002Fdesign",[179,46,39,203,11,35],"maker\u002Fneutral\u002Fidea",[205,46,39,206,207,39],"49002353","other\u002Fneutral\u002Fnone","globular-toast",[209,184,46,193,210,39],"49024427","brian_meek",[87,45,45,212,88,39],"project\u002Fpositive\u002Fexecution",[170,45,39,214,11,35],"maker\u002Fneutral\u002Fnone",[91,216,46,217,92,39],6,"project\u002Fmixed\u002Fdesign",[219,18,45,220,221,39],"48999019","project\u002Fpositive\u002Fnone","airstrike",[223,33,46,224,225,39],"49005246","project\u002Fneutral\u002Fprivacy","amluto",[227,33,39,228,11,35],"49007057","maker\u002Fneutral\u002Fprivacy",[146,230,35,231,147,39],9,"project\u002Fcritical\u002Fexecution",[233,230,39,193,11,35],"49004305",[235,230,39,236,237,39],"49013855","commenter\u002Fneutral\u002Fnone","quuxplusone",[239,230,39,236,240,39],"49004308","rolandog",[242,230,39,236,243,39],"49005645","WillAdams",[245,173,45,190,88,39],"48998863",[247,173,39,248,11,35],"48999613","maker\u002Fneutral\u002Fdesign",[250,173,46,248,207,39],"49002412",[252,173,39,248,11,35],"49002551",[254,255,45,256,257,39],"49007903",11,"project\u002Fpositive\u002Fidea","ano-ther",[117,259,46,260,118,39],12,"project\u002Fneutral\u002Fperformance",[262,259,39,263,11,35],"49002509","maker\u002Fneutral\u002Fperformance",[124,265,46,201,125,39],13,[267,265,39,248,11,35],"49005802",[269,32,45,256,270,39],"49003477","arnoooooo",[272,273,45,190,274,39],"49003676",15,"dithernaut",[98,276,45,190,99,39],16,[109,278,45,220,110,39],17,[280,281,45,220,282,39],"49004992",18,"pwmglenn",[102,284,45,190,103,39],19,[286,287,45,220,288,39],"49001852",20,"taevirus",[106,290,46,193,84,39],21,[292,290,39,193,11,35],"48999585",[128,294,46,217,84,39],22,[296,294,39,206,297,39],"49003775","imurray",[163,299,39,206,164,39],23,[301,304],{"id":302,"t":303,"points":45,"comments":39},"48941987",1784247556,{"id":4,"t":12,"points":14,"comments":15},[306,311,316,320,325,330],{"id":307,"name":308,"points":309,"category":310},"48968606","I replaced a $120k bowling center system with $1,600 in ESP32s",2935,"hardware",{"id":312,"name":313,"points":314,"category":315},"49008211","Bento",1033,"creative",{"id":317,"name":318,"points":319,"category":315},"48984254","Grace Cathedral Gaussian Splat tour",263,{"id":321,"name":322,"points":323,"category":324},"49008406","HN Hall of Fame",219,"consumer_social",{"id":326,"name":327,"points":328,"category":329},"49010782","Cactus Hybrid",191,"ai",{"id":331,"name":332,"points":333,"category":334},"48947548","honeypotlive",181,"security_privacy",false,"v2",{"id":338,"name":5,"line":6,"ai":335,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":339,"top":18,"kw":340,"maker":11,"domain":10,"tier":19,"attempts":34,"strip":341,"url":9,"mix":342,"praise":75,"objection":114,"sub":21},48946738,0.45,[24,25,26,27,28],"5305530035035301000050305303055555553030",[32,33,34,35],1794036705318]