[{"data":1,"prerenderedAt":2350},["ShallowReactive",2],{"page-\u002Farticles\u002Fpretext":3,"related-\u002Farticles\u002Fpretext":1290,"content-query-AzkZN8s9J4":1313},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"category":11,"image":12,"tags":13,"series":17,"readingTime":18,"difficulty":19,"local":20,"platforms":21,"gpu":24,"body":25,"_type":1284,"_id":1285,"_source":1286,"_file":1287,"_stem":1288,"_extension":1289},"\u002Farticles\u002Fpretext","articles",false,"","Pretext 高效多行文字 Canvas 排版庫優化與防 DOM 重繪技術","想精準計算段落高度、做出更自由的文字排版，卻不想一直碰 getBoundingClientRect？Pretext 提供了一條很聰明的路。","2026-05-20","Web Dev","\u002Fimages\u002Fcode.png",[14,15,16],"Web Development","Frontend","JavaScript","github-tech","6 min read","Medium",true,[22,23],"Web","JS","None",{"type":26,"children":27,"toc":1267},"root",[28,37,49,71,86,107,111,117,129,134,139,151,163,168,193,196,202,209,214,247,253,265,498,517,536,539,545,550,573,592,932,937,940,946,952,970,976,981,987,999,1005,1024,1027,1032,1037,1115,1125,1128,1133,1143,1154,1159,1187,1208,1211,1219,1249,1252,1261],{"type":29,"tag":30,"props":31,"children":33},"element","h2",{"id":32},"為什麼選擇-pretext",[34],{"type":35,"value":36},"text","為什麼選擇 Pretext？",{"type":29,"tag":38,"props":39,"children":40},"p",{},[41,43],{"type":35,"value":42},"在前端處理文字排版時，最麻煩的事情之一就是：",{"type":29,"tag":44,"props":45,"children":46},"strong",{},[47],{"type":35,"value":48},"你明明只是想知道一段文字會佔多高，卻常常得把它真的丟進 DOM 裡量一次。",{"type":29,"tag":38,"props":50,"children":51},{},[52,54,61,63,69],{"type":35,"value":53},"像 ",{"type":29,"tag":55,"props":56,"children":58},"code",{"className":57},[],[59],{"type":35,"value":60},"getBoundingClientRect()",{"type":35,"value":62},"、",{"type":29,"tag":55,"props":64,"children":66},{"className":65},[],[67],{"type":35,"value":68},"offsetHeight",{"type":35,"value":70}," 這類做法雖然直覺，但很容易觸發 layout reflow。當畫面裡有大量動態文字、卡片瀑布流、虛擬列表，或是你想做更進階的自訂排版時，這個成本其實不小。",{"type":29,"tag":38,"props":72,"children":73},{},[74,79,81],{"type":29,"tag":44,"props":75,"children":76},{},[77],{"type":35,"value":78},"Pretext",{"type":35,"value":80}," 是 Cheng Lou 做的純 JavaScript \u002F TypeScript 文字量測與排版函式庫。它的核心思路很漂亮：",{"type":29,"tag":44,"props":82,"children":83},{},[84],{"type":35,"value":85},"不依賴 DOM 量測，而是自己做文字分析與快取，再用瀏覽器的字型引擎作為 ground truth。",{"type":29,"tag":38,"props":87,"children":88},{},[89,91,97,99,105],{"type":35,"value":90},"它支援多語系、支援 ",{"type":29,"tag":55,"props":92,"children":94},{"className":93},[],[95],{"type":35,"value":96},"white-space",{"type":35,"value":98}," 與 ",{"type":29,"tag":55,"props":100,"children":102},{"className":101},[],[103],{"type":35,"value":104},"word-break",{"type":35,"value":106}," 的常見情境，還可以把排好行的結果拿去渲染到 DOM、Canvas、SVG，甚至未來做 server-side。",{"type":29,"tag":108,"props":109,"children":110},"hr",{},[],{"type":29,"tag":30,"props":112,"children":114},{"id":113},"實作展示-official-demo",[115],{"type":35,"value":116},"實作展示 (Official Demo)",{"type":29,"tag":38,"props":118,"children":119},{},[120,122,127],{"type":35,"value":121},"這次我其實有先自己試做一下，但",{"type":29,"tag":44,"props":123,"children":124},{},[125],{"type":35,"value":126},"目前還沒做出我自己滿意的成品",{"type":35,"value":128},"，所以文章先放官方大神做的 demo，真的非常猛。",{"type":29,"tag":38,"props":130,"children":131},{},[132],{"type":35,"value":133},"下面這段影片是我放進部落格的展示：",{"type":29,"tag":135,"props":136,"children":138},"fullscreen-video",{"src":137},"\u002Fvideos\u002Fpretext.mp4",[],{"type":29,"tag":38,"props":140,"children":141},{},[142,144,149],{"type":35,"value":143},"這個 demo 對應的是 Somnai Dreams 做的 ",{"type":29,"tag":44,"props":145,"children":146},{},[147],{"type":35,"value":148},"The Editorial Engine",{"type":35,"value":150},"：",{"type":29,"tag":38,"props":152,"children":153},{},[154],{"type":29,"tag":155,"props":156,"children":160},"a",{"href":157,"rel":158},"https:\u002F\u002Fsomnai-dreams.github.io\u002Fpretext-demos\u002Fthe-editorial-engine.html",[159],"nofollow",[161],{"type":35,"value":162},"點這裡看官方 Demo",{"type":29,"tag":38,"props":164,"children":165},{},[166],{"type":35,"value":167},"如果你想看更多範例，也可以直接去作者提供的展示頁：",{"type":29,"tag":169,"props":170,"children":171},"ul",{},[172,183],{"type":29,"tag":173,"props":174,"children":175},"li",{},[176],{"type":29,"tag":155,"props":177,"children":180},{"href":178,"rel":179},"https:\u002F\u002Fchenglou.me\u002Fpretext",[159],[181],{"type":35,"value":182},"Pretext 官方展示頁",{"type":29,"tag":173,"props":184,"children":185},{},[186],{"type":29,"tag":155,"props":187,"children":190},{"href":188,"rel":189},"https:\u002F\u002Fsomnai-dreams.github.io\u002Fpretext-demos",[159],[191],{"type":35,"value":192},"Somnai Dreams 額外 Demo 集合",{"type":29,"tag":108,"props":194,"children":195},{},[],{"type":29,"tag":30,"props":197,"children":199},{"id":198},"如何在你的專案中使用",[200],{"type":35,"value":201},"如何在你的專案中使用？",{"type":29,"tag":203,"props":204,"children":206},"h3",{"id":205},"_1-安裝套件",[207],{"type":35,"value":208},"1. 安裝套件",{"type":29,"tag":38,"props":210,"children":211},{},[212],{"type":35,"value":213},"你可以直接安裝 npm 套件：",{"type":29,"tag":215,"props":216,"children":220},"pre",{"className":217,"code":218,"language":219,"meta":7,"style":7},"language-bash shiki shiki-themes one-dark-pro","npm install @chenglou\u002Fpretext\n","bash",[221],{"type":29,"tag":55,"props":222,"children":223},{"__ignoreMap":7},[224],{"type":29,"tag":225,"props":226,"children":229},"span",{"class":227,"line":228},"line",1,[230,236,242],{"type":29,"tag":225,"props":231,"children":233},{"style":232},"--shiki-default:#61AFEF",[234],{"type":35,"value":235},"npm",{"type":29,"tag":225,"props":237,"children":239},{"style":238},"--shiki-default:#98C379",[240],{"type":35,"value":241}," install",{"type":29,"tag":225,"props":243,"children":244},{"style":238},[245],{"type":35,"value":246}," @chenglou\u002Fpretext\n",{"type":29,"tag":203,"props":248,"children":250},{"id":249},"_2-核心代碼實作",[251],{"type":35,"value":252},"2. 核心代碼實作",{"type":29,"tag":38,"props":254,"children":255},{},[256,258,263],{"type":35,"value":257},"如果你的需求只是：",{"type":29,"tag":44,"props":259,"children":260},{},[261],{"type":35,"value":262},"在不碰 DOM 的情況下，預先算出一段文字在某個寬度下會佔幾行、多高",{"type":35,"value":264},"，那最基本的用法其實很簡單：",{"type":29,"tag":215,"props":266,"children":270},{"className":267,"code":268,"language":269,"meta":7,"style":7},"language-ts shiki shiki-themes one-dark-pro","import { prepare, layout } from '@chenglou\u002Fpretext'\n\nconst prepared = prepare('AGI 春天到了. بدأت الرحلة 🚀', '16px Inter')\nconst { height, lineCount } = layout(prepared, 320, 20)\n\nconsole.log(height, lineCount)\n","ts",[271],{"type":29,"tag":55,"props":272,"children":273},{"__ignoreMap":7},[274,320,329,379,451,459],{"type":29,"tag":225,"props":275,"children":276},{"class":227,"line":228},[277,283,289,295,300,305,310,315],{"type":29,"tag":225,"props":278,"children":280},{"style":279},"--shiki-default:#C678DD",[281],{"type":35,"value":282},"import",{"type":29,"tag":225,"props":284,"children":286},{"style":285},"--shiki-default:#ABB2BF",[287],{"type":35,"value":288}," { ",{"type":29,"tag":225,"props":290,"children":292},{"style":291},"--shiki-default:#E06C75",[293],{"type":35,"value":294},"prepare",{"type":29,"tag":225,"props":296,"children":297},{"style":285},[298],{"type":35,"value":299},", ",{"type":29,"tag":225,"props":301,"children":302},{"style":291},[303],{"type":35,"value":304},"layout",{"type":29,"tag":225,"props":306,"children":307},{"style":285},[308],{"type":35,"value":309}," } ",{"type":29,"tag":225,"props":311,"children":312},{"style":279},[313],{"type":35,"value":314},"from",{"type":29,"tag":225,"props":316,"children":317},{"style":238},[318],{"type":35,"value":319}," '@chenglou\u002Fpretext'\n",{"type":29,"tag":225,"props":321,"children":323},{"class":227,"line":322},2,[324],{"type":29,"tag":225,"props":325,"children":326},{"emptyLinePlaceholder":20},[327],{"type":35,"value":328},"\n",{"type":29,"tag":225,"props":330,"children":332},{"class":227,"line":331},3,[333,338,344,350,355,360,365,369,374],{"type":29,"tag":225,"props":334,"children":335},{"style":279},[336],{"type":35,"value":337},"const",{"type":29,"tag":225,"props":339,"children":341},{"style":340},"--shiki-default:#E5C07B",[342],{"type":35,"value":343}," prepared",{"type":29,"tag":225,"props":345,"children":347},{"style":346},"--shiki-default:#56B6C2",[348],{"type":35,"value":349}," =",{"type":29,"tag":225,"props":351,"children":352},{"style":232},[353],{"type":35,"value":354}," prepare",{"type":29,"tag":225,"props":356,"children":357},{"style":285},[358],{"type":35,"value":359},"(",{"type":29,"tag":225,"props":361,"children":362},{"style":238},[363],{"type":35,"value":364},"'AGI 春天到了. بدأت الرحلة 🚀'",{"type":29,"tag":225,"props":366,"children":367},{"style":285},[368],{"type":35,"value":299},{"type":29,"tag":225,"props":370,"children":371},{"style":238},[372],{"type":35,"value":373},"'16px Inter'",{"type":29,"tag":225,"props":375,"children":376},{"style":285},[377],{"type":35,"value":378},")\n",{"type":29,"tag":225,"props":380,"children":382},{"class":227,"line":381},4,[383,387,391,396,400,405,409,414,419,423,428,432,438,442,447],{"type":29,"tag":225,"props":384,"children":385},{"style":279},[386],{"type":35,"value":337},{"type":29,"tag":225,"props":388,"children":389},{"style":285},[390],{"type":35,"value":288},{"type":29,"tag":225,"props":392,"children":393},{"style":340},[394],{"type":35,"value":395},"height",{"type":29,"tag":225,"props":397,"children":398},{"style":285},[399],{"type":35,"value":299},{"type":29,"tag":225,"props":401,"children":402},{"style":340},[403],{"type":35,"value":404},"lineCount",{"type":29,"tag":225,"props":406,"children":407},{"style":285},[408],{"type":35,"value":309},{"type":29,"tag":225,"props":410,"children":411},{"style":346},[412],{"type":35,"value":413},"=",{"type":29,"tag":225,"props":415,"children":416},{"style":232},[417],{"type":35,"value":418}," layout",{"type":29,"tag":225,"props":420,"children":421},{"style":285},[422],{"type":35,"value":359},{"type":29,"tag":225,"props":424,"children":425},{"style":291},[426],{"type":35,"value":427},"prepared",{"type":29,"tag":225,"props":429,"children":430},{"style":285},[431],{"type":35,"value":299},{"type":29,"tag":225,"props":433,"children":435},{"style":434},"--shiki-default:#D19A66",[436],{"type":35,"value":437},"320",{"type":29,"tag":225,"props":439,"children":440},{"style":285},[441],{"type":35,"value":299},{"type":29,"tag":225,"props":443,"children":444},{"style":434},[445],{"type":35,"value":446},"20",{"type":29,"tag":225,"props":448,"children":449},{"style":285},[450],{"type":35,"value":378},{"type":29,"tag":225,"props":452,"children":454},{"class":227,"line":453},5,[455],{"type":29,"tag":225,"props":456,"children":457},{"emptyLinePlaceholder":20},[458],{"type":35,"value":328},{"type":29,"tag":225,"props":460,"children":462},{"class":227,"line":461},6,[463,468,473,478,482,486,490,494],{"type":29,"tag":225,"props":464,"children":465},{"style":340},[466],{"type":35,"value":467},"console",{"type":29,"tag":225,"props":469,"children":470},{"style":285},[471],{"type":35,"value":472},".",{"type":29,"tag":225,"props":474,"children":475},{"style":232},[476],{"type":35,"value":477},"log",{"type":29,"tag":225,"props":479,"children":480},{"style":285},[481],{"type":35,"value":359},{"type":29,"tag":225,"props":483,"children":484},{"style":291},[485],{"type":35,"value":395},{"type":29,"tag":225,"props":487,"children":488},{"style":285},[489],{"type":35,"value":299},{"type":29,"tag":225,"props":491,"children":492},{"style":291},[493],{"type":35,"value":404},{"type":29,"tag":225,"props":495,"children":496},{"style":285},[497],{"type":35,"value":378},{"type":29,"tag":38,"props":499,"children":500},{},[501,507,509,515],{"type":29,"tag":55,"props":502,"children":504},{"className":503},[],[505],{"type":35,"value":506},"prepare()",{"type":35,"value":508}," 會先做一次性的預處理，包括文字分段、空白正規化、量測 segment 寬度與快取；",{"type":29,"tag":55,"props":510,"children":512},{"className":511},[],[513],{"type":35,"value":514},"layout()",{"type":35,"value":516}," 則是後續的快速熱路徑，單純根據寬度與行高做算術計算。",{"type":29,"tag":38,"props":518,"children":519},{},[520,522,534],{"type":35,"value":521},"這代表當你的容器寬度改變時，不需要一直重新分析全文字，",{"type":29,"tag":44,"props":523,"children":524},{},[525,527,532],{"type":35,"value":526},"通常只要重跑 ",{"type":29,"tag":55,"props":528,"children":530},{"className":529},[],[531],{"type":35,"value":514},{"type":35,"value":533}," 就好",{"type":35,"value":535},"。",{"type":29,"tag":108,"props":537,"children":538},{},[],{"type":29,"tag":30,"props":540,"children":542},{"id":541},"進一步玩法自己掌控每一行",[543],{"type":35,"value":544},"進一步玩法：自己掌控每一行",{"type":29,"tag":38,"props":546,"children":547},{},[548],{"type":35,"value":549},"如果你不只想知道高度，而是想要自己控制每一行的內容，例如：",{"type":29,"tag":169,"props":551,"children":552},{},[553,558,563,568],{"type":29,"tag":173,"props":554,"children":555},{},[556],{"type":35,"value":557},"讓文字繞圖",{"type":29,"tag":173,"props":559,"children":560},{},[561],{"type":35,"value":562},"做 Canvas \u002F SVG 排版",{"type":29,"tag":173,"props":564,"children":565},{},[566],{"type":35,"value":567},"自己決定每一行的寬度",{"type":29,"tag":173,"props":569,"children":570},{},[571],{"type":35,"value":572},"做 multiline shrink-wrap",{"type":29,"tag":38,"props":574,"children":575},{},[576,578,584,585,591],{"type":35,"value":577},"那就可以改用 ",{"type":29,"tag":55,"props":579,"children":581},{"className":580},[],[582],{"type":35,"value":583},"prepareWithSegments()",{"type":35,"value":98},{"type":29,"tag":55,"props":586,"children":588},{"className":587},[],[589],{"type":35,"value":590},"layoutWithLines()",{"type":35,"value":150},{"type":29,"tag":215,"props":593,"children":595},{"className":267,"code":594,"language":269,"meta":7,"style":7},"import { prepareWithSegments, layoutWithLines } from '@chenglou\u002Fpretext'\n\nconst prepared = prepareWithSegments(\n  'AGI 春天到了. بدأت الرحلة 🚀',\n  '18px \"Helvetica Neue\"'\n)\n\nconst { lines } = layoutWithLines(prepared, 320, 26)\n\nfor (let i = 0; i \u003C lines.length; i++) {\n  console.log(lines[i].text, lines[i].width)\n}\n",[596],{"type":29,"tag":55,"props":597,"children":598},{"__ignoreMap":7},[599,636,643,668,681,689,696,704,763,771,851,923],{"type":29,"tag":225,"props":600,"children":601},{"class":227,"line":228},[602,606,610,615,619,624,628,632],{"type":29,"tag":225,"props":603,"children":604},{"style":279},[605],{"type":35,"value":282},{"type":29,"tag":225,"props":607,"children":608},{"style":285},[609],{"type":35,"value":288},{"type":29,"tag":225,"props":611,"children":612},{"style":291},[613],{"type":35,"value":614},"prepareWithSegments",{"type":29,"tag":225,"props":616,"children":617},{"style":285},[618],{"type":35,"value":299},{"type":29,"tag":225,"props":620,"children":621},{"style":291},[622],{"type":35,"value":623},"layoutWithLines",{"type":29,"tag":225,"props":625,"children":626},{"style":285},[627],{"type":35,"value":309},{"type":29,"tag":225,"props":629,"children":630},{"style":279},[631],{"type":35,"value":314},{"type":29,"tag":225,"props":633,"children":634},{"style":238},[635],{"type":35,"value":319},{"type":29,"tag":225,"props":637,"children":638},{"class":227,"line":322},[639],{"type":29,"tag":225,"props":640,"children":641},{"emptyLinePlaceholder":20},[642],{"type":35,"value":328},{"type":29,"tag":225,"props":644,"children":645},{"class":227,"line":331},[646,650,654,658,663],{"type":29,"tag":225,"props":647,"children":648},{"style":279},[649],{"type":35,"value":337},{"type":29,"tag":225,"props":651,"children":652},{"style":340},[653],{"type":35,"value":343},{"type":29,"tag":225,"props":655,"children":656},{"style":346},[657],{"type":35,"value":349},{"type":29,"tag":225,"props":659,"children":660},{"style":232},[661],{"type":35,"value":662}," prepareWithSegments",{"type":29,"tag":225,"props":664,"children":665},{"style":285},[666],{"type":35,"value":667},"(\n",{"type":29,"tag":225,"props":669,"children":670},{"class":227,"line":381},[671,676],{"type":29,"tag":225,"props":672,"children":673},{"style":238},[674],{"type":35,"value":675},"  'AGI 春天到了. بدأت الرحلة 🚀'",{"type":29,"tag":225,"props":677,"children":678},{"style":285},[679],{"type":35,"value":680},",\n",{"type":29,"tag":225,"props":682,"children":683},{"class":227,"line":453},[684],{"type":29,"tag":225,"props":685,"children":686},{"style":238},[687],{"type":35,"value":688},"  '18px \"Helvetica Neue\"'\n",{"type":29,"tag":225,"props":690,"children":691},{"class":227,"line":461},[692],{"type":29,"tag":225,"props":693,"children":694},{"style":285},[695],{"type":35,"value":378},{"type":29,"tag":225,"props":697,"children":699},{"class":227,"line":698},7,[700],{"type":29,"tag":225,"props":701,"children":702},{"emptyLinePlaceholder":20},[703],{"type":35,"value":328},{"type":29,"tag":225,"props":705,"children":707},{"class":227,"line":706},8,[708,712,716,721,725,729,734,738,742,746,750,754,759],{"type":29,"tag":225,"props":709,"children":710},{"style":279},[711],{"type":35,"value":337},{"type":29,"tag":225,"props":713,"children":714},{"style":285},[715],{"type":35,"value":288},{"type":29,"tag":225,"props":717,"children":718},{"style":340},[719],{"type":35,"value":720},"lines",{"type":29,"tag":225,"props":722,"children":723},{"style":285},[724],{"type":35,"value":309},{"type":29,"tag":225,"props":726,"children":727},{"style":346},[728],{"type":35,"value":413},{"type":29,"tag":225,"props":730,"children":731},{"style":232},[732],{"type":35,"value":733}," layoutWithLines",{"type":29,"tag":225,"props":735,"children":736},{"style":285},[737],{"type":35,"value":359},{"type":29,"tag":225,"props":739,"children":740},{"style":291},[741],{"type":35,"value":427},{"type":29,"tag":225,"props":743,"children":744},{"style":285},[745],{"type":35,"value":299},{"type":29,"tag":225,"props":747,"children":748},{"style":434},[749],{"type":35,"value":437},{"type":29,"tag":225,"props":751,"children":752},{"style":285},[753],{"type":35,"value":299},{"type":29,"tag":225,"props":755,"children":756},{"style":434},[757],{"type":35,"value":758},"26",{"type":29,"tag":225,"props":760,"children":761},{"style":285},[762],{"type":35,"value":378},{"type":29,"tag":225,"props":764,"children":766},{"class":227,"line":765},9,[767],{"type":29,"tag":225,"props":768,"children":769},{"emptyLinePlaceholder":20},[770],{"type":35,"value":328},{"type":29,"tag":225,"props":772,"children":774},{"class":227,"line":773},10,[775,780,785,790,795,799,804,809,814,819,824,828,833,837,841,846],{"type":29,"tag":225,"props":776,"children":777},{"style":279},[778],{"type":35,"value":779},"for",{"type":29,"tag":225,"props":781,"children":782},{"style":285},[783],{"type":35,"value":784}," (",{"type":29,"tag":225,"props":786,"children":787},{"style":279},[788],{"type":35,"value":789},"let",{"type":29,"tag":225,"props":791,"children":792},{"style":291},[793],{"type":35,"value":794}," i",{"type":29,"tag":225,"props":796,"children":797},{"style":346},[798],{"type":35,"value":349},{"type":29,"tag":225,"props":800,"children":801},{"style":434},[802],{"type":35,"value":803}," 0",{"type":29,"tag":225,"props":805,"children":806},{"style":285},[807],{"type":35,"value":808},"; ",{"type":29,"tag":225,"props":810,"children":811},{"style":291},[812],{"type":35,"value":813},"i",{"type":29,"tag":225,"props":815,"children":816},{"style":346},[817],{"type":35,"value":818}," \u003C",{"type":29,"tag":225,"props":820,"children":821},{"style":340},[822],{"type":35,"value":823}," lines",{"type":29,"tag":225,"props":825,"children":826},{"style":285},[827],{"type":35,"value":472},{"type":29,"tag":225,"props":829,"children":830},{"style":291},[831],{"type":35,"value":832},"length",{"type":29,"tag":225,"props":834,"children":835},{"style":285},[836],{"type":35,"value":808},{"type":29,"tag":225,"props":838,"children":839},{"style":291},[840],{"type":35,"value":813},{"type":29,"tag":225,"props":842,"children":843},{"style":346},[844],{"type":35,"value":845},"++",{"type":29,"tag":225,"props":847,"children":848},{"style":285},[849],{"type":35,"value":850},") {\n",{"type":29,"tag":225,"props":852,"children":854},{"class":227,"line":853},11,[855,860,864,868,872,876,881,885,890,894,898,902,906,910,914,919],{"type":29,"tag":225,"props":856,"children":857},{"style":340},[858],{"type":35,"value":859},"  console",{"type":29,"tag":225,"props":861,"children":862},{"style":285},[863],{"type":35,"value":472},{"type":29,"tag":225,"props":865,"children":866},{"style":232},[867],{"type":35,"value":477},{"type":29,"tag":225,"props":869,"children":870},{"style":285},[871],{"type":35,"value":359},{"type":29,"tag":225,"props":873,"children":874},{"style":291},[875],{"type":35,"value":720},{"type":29,"tag":225,"props":877,"children":878},{"style":285},[879],{"type":35,"value":880},"[",{"type":29,"tag":225,"props":882,"children":883},{"style":291},[884],{"type":35,"value":813},{"type":29,"tag":225,"props":886,"children":887},{"style":285},[888],{"type":35,"value":889},"].",{"type":29,"tag":225,"props":891,"children":892},{"style":291},[893],{"type":35,"value":35},{"type":29,"tag":225,"props":895,"children":896},{"style":285},[897],{"type":35,"value":299},{"type":29,"tag":225,"props":899,"children":900},{"style":291},[901],{"type":35,"value":720},{"type":29,"tag":225,"props":903,"children":904},{"style":285},[905],{"type":35,"value":880},{"type":29,"tag":225,"props":907,"children":908},{"style":291},[909],{"type":35,"value":813},{"type":29,"tag":225,"props":911,"children":912},{"style":285},[913],{"type":35,"value":889},{"type":29,"tag":225,"props":915,"children":916},{"style":291},[917],{"type":35,"value":918},"width",{"type":29,"tag":225,"props":920,"children":921},{"style":285},[922],{"type":35,"value":378},{"type":29,"tag":225,"props":924,"children":926},{"class":227,"line":925},12,[927],{"type":29,"tag":225,"props":928,"children":929},{"style":285},[930],{"type":35,"value":931},"}\n",{"type":29,"tag":38,"props":933,"children":934},{},[935],{"type":35,"value":936},"這種 API 很適合拿去做比較「設計導向」的文字編排，而不是只能接受瀏覽器幫你決定一切。",{"type":29,"tag":108,"props":938,"children":939},{},[],{"type":29,"tag":30,"props":941,"children":943},{"id":942},"我覺得-pretext-厲害的地方",[944],{"type":35,"value":945},"我覺得 Pretext 厲害的地方",{"type":29,"tag":203,"props":947,"children":949},{"id":948},"_1-先預處理之後只做便宜計算",[950],{"type":35,"value":951},"1. 先預處理，之後只做便宜計算",{"type":29,"tag":38,"props":953,"children":954},{},[955,957,962,964,969],{"type":35,"value":956},"這個設計很適合 responsive UI。文字內容沒變時，你可以把 ",{"type":29,"tag":55,"props":958,"children":960},{"className":959},[],[961],{"type":35,"value":506},{"type":35,"value":963}," 的結果保留起來，視窗縮放只更新 ",{"type":29,"tag":55,"props":965,"children":967},{"className":966},[],[968],{"type":35,"value":514},{"type":35,"value":535},{"type":29,"tag":203,"props":971,"children":973},{"id":972},"_2-對多語系文字更友善",[974],{"type":35,"value":975},"2. 對多語系文字更友善",{"type":29,"tag":38,"props":977,"children":978},{},[979],{"type":35,"value":980},"官方範例直接拿中英阿拉伯文和 emoji 混排，這點很有說服力。很多看似簡單的文字排版工具，一碰到多語混排就開始露出破綻。",{"type":29,"tag":203,"props":982,"children":984},{"id":983},"_3-很適合做-ai-時代的快速-ui-驗證",[985],{"type":35,"value":986},"3. 很適合做 AI 時代的快速 UI 驗證",{"type":29,"tag":38,"props":988,"children":989},{},[990,992,997],{"type":35,"value":991},"README 裡有一個觀點我很認同：現在很多 UI 是快速迭代、甚至直接讓 AI 幫你生畫面，這時候如果能在",{"type":29,"tag":44,"props":993,"children":994},{},[995],{"type":35,"value":996},"不開瀏覽器、不碰 DOM",{"type":35,"value":998},"的前提下預先驗證文字會不會爆行，真的很實用。",{"type":29,"tag":203,"props":1000,"children":1002},{"id":1001},"_4-不只量高度還能拿來做自訂排版引擎",[1003],{"type":35,"value":1004},"4. 不只量高度，還能拿來做自訂排版引擎",{"type":29,"tag":38,"props":1006,"children":1007},{},[1008,1009,1015,1016,1022],{"type":35,"value":53},{"type":29,"tag":55,"props":1010,"children":1012},{"className":1011},[],[1013],{"type":35,"value":1014},"layoutNextLineRange()",{"type":35,"value":62},{"type":29,"tag":55,"props":1017,"children":1019},{"className":1018},[],[1020],{"type":35,"value":1021},"materializeLineRange()",{"type":35,"value":1023}," 這些 API，其實已經不是單純量測工具而已，幾乎是在提供你一套低階但很實用的文字流排版能力。",{"type":29,"tag":108,"props":1025,"children":1026},{},[],{"type":29,"tag":30,"props":1028,"children":1030},{"id":1029},"幾個值得注意的限制",[1031],{"type":35,"value":1029},{"type":29,"tag":38,"props":1033,"children":1034},{},[1035],{"type":35,"value":1036},"Pretext 很強，但它也沒有假裝自己是完整的瀏覽器排版引擎。",{"type":29,"tag":169,"props":1038,"children":1039},{},[1040,1059,1077,1082,1095],{"type":29,"tag":173,"props":1041,"children":1042},{},[1043,1045,1051,1053],{"type":35,"value":1044},"目前主要鎖定 ",{"type":29,"tag":55,"props":1046,"children":1048},{"className":1047},[],[1049],{"type":35,"value":1050},"white-space: normal",{"type":35,"value":1052}," \u002F ",{"type":29,"tag":55,"props":1054,"children":1056},{"className":1055},[],[1057],{"type":35,"value":1058},"pre-wrap",{"type":29,"tag":173,"props":1060,"children":1061},{},[1062,1064,1070,1071],{"type":35,"value":1063},"支援 ",{"type":29,"tag":55,"props":1065,"children":1067},{"className":1066},[],[1068],{"type":35,"value":1069},"word-break: normal",{"type":35,"value":98},{"type":29,"tag":55,"props":1072,"children":1074},{"className":1073},[],[1075],{"type":35,"value":1076},"keep-all",{"type":29,"tag":173,"props":1078,"children":1079},{},[1080],{"type":35,"value":1081},"非常窄的寬度下，仍可能在 grapheme 邊界做 break-word 式換行",{"type":29,"tag":173,"props":1083,"children":1084},{},[1085,1087,1093],{"type":35,"value":1086},"依賴 ",{"type":29,"tag":55,"props":1088,"children":1090},{"className":1089},[],[1091],{"type":35,"value":1092},"Intl.Segmenter",{"type":35,"value":1094}," 與 Canvas 2D text measurement",{"type":29,"tag":173,"props":1096,"children":1097},{},[1098,1100,1106,1108,1113],{"type":35,"value":1099},"在 macOS 上，",{"type":29,"tag":55,"props":1101,"children":1103},{"className":1102},[],[1104],{"type":35,"value":1105},"system-ui",{"type":35,"value":1107}," 對 ",{"type":29,"tag":55,"props":1109,"children":1111},{"className":1110},[],[1112],{"type":35,"value":514},{"type":35,"value":1114}," 精準度不安全，官方建議用具名字型",{"type":29,"tag":38,"props":1116,"children":1117},{},[1118,1120],{"type":35,"value":1119},"所以它最適合的場景不是「完整取代瀏覽器排版」，而是：",{"type":29,"tag":44,"props":1121,"children":1122},{},[1123],{"type":35,"value":1124},"你想提前知道排版結果，或者你就是要自己接管文字流布局。",{"type":29,"tag":108,"props":1126,"children":1127},{},[],{"type":29,"tag":30,"props":1129,"children":1131},{"id":1130},"個人心得",[1132],{"type":35,"value":1130},{"type":29,"tag":38,"props":1134,"children":1135},{},[1136,1138],{"type":35,"value":1137},"我很喜歡 Pretext 這種工具的出發點：",{"type":29,"tag":44,"props":1139,"children":1140},{},[1141],{"type":35,"value":1142},"不是把整個世界重做一遍，而是專注解掉前端裡一個很痛、但大家常常默默忍受的問題。",{"type":29,"tag":38,"props":1144,"children":1145},{},[1146,1148,1152],{"type":35,"value":1147},"這次我原本也想自己做一個更完整、比較有作品感的示範，不過老實說目前還沒有做到我滿意，所以先把官方大神的 demo 放上來。Somnai Dreams 那個 ",{"type":29,"tag":44,"props":1149,"children":1150},{},[1151],{"type":35,"value":148},{"type":35,"value":1153}," 真的把 Pretext 的潛力拉得很高，已經不是「技術展示」而已，而是很接近一種新的文字互動介面。",{"type":29,"tag":38,"props":1155,"children":1156},{},[1157],{"type":35,"value":1158},"如果你現在剛好在做以下東西，我會很建議研究一下 Pretext：",{"type":29,"tag":169,"props":1160,"children":1161},{},[1162,1167,1172,1177,1182],{"type":29,"tag":173,"props":1163,"children":1164},{},[1165],{"type":35,"value":1166},"需要預估文字高度的虛擬列表",{"type":29,"tag":173,"props":1168,"children":1169},{},[1170],{"type":35,"value":1171},"瀑布流或卡片式排版",{"type":29,"tag":173,"props":1173,"children":1174},{},[1175],{"type":35,"value":1176},"Canvas \u002F SVG 文字排版",{"type":29,"tag":173,"props":1178,"children":1179},{},[1180],{"type":35,"value":1181},"圖文混排或繞圖排版",{"type":29,"tag":173,"props":1183,"children":1184},{},[1185],{"type":35,"value":1186},"想避免 layout shift 的內容載入介面",{"type":29,"tag":1188,"props":1189,"children":1190},"blockquote",{},[1191],{"type":29,"tag":38,"props":1192,"children":1193},{},[1194,1199,1201,1206],{"type":29,"tag":44,"props":1195,"children":1196},{},[1197],{"type":35,"value":1198},"小建議",{"type":35,"value":1200},"：如果你只是 resize 後重新計算高度，記得不要每次都重跑 ",{"type":29,"tag":55,"props":1202,"children":1204},{"className":1203},[],[1205],{"type":35,"value":506},{"type":35,"value":1207},"，不然就浪費掉 Pretext 最核心的快取優勢了。",{"type":29,"tag":108,"props":1209,"children":1210},{},[],{"type":29,"tag":38,"props":1212,"children":1213},{},[1214],{"type":29,"tag":44,"props":1215,"children":1216},{},[1217],{"type":35,"value":1218},"相關連結：",{"type":29,"tag":169,"props":1220,"children":1221},{},[1222,1232,1240],{"type":29,"tag":173,"props":1223,"children":1224},{},[1225],{"type":29,"tag":155,"props":1226,"children":1229},{"href":1227,"rel":1228},"https:\u002F\u002Fgithub.com\u002Fchenglou\u002Fpretext\u002Ftree\u002Fmain",[159],[1230],{"type":35,"value":1231},"Pretext GitHub 倉庫",{"type":29,"tag":173,"props":1233,"children":1234},{},[1235],{"type":29,"tag":155,"props":1236,"children":1238},{"href":178,"rel":1237},[159],[1239],{"type":35,"value":182},{"type":29,"tag":173,"props":1241,"children":1242},{},[1243],{"type":29,"tag":155,"props":1244,"children":1246},{"href":157,"rel":1245},[159],[1247],{"type":35,"value":1248},"The Editorial Engine Demo",{"type":29,"tag":108,"props":1250,"children":1251},{},[],{"type":29,"tag":38,"props":1253,"children":1254},{},[1255],{"type":29,"tag":1256,"props":1257,"children":1258},"em",{},[1259],{"type":35,"value":1260},"本文展示影片採用 Somnai Dreams 製作的 Pretext 官方社群 demo；文中 API 說明整理自 Pretext README 與公開範例。",{"type":29,"tag":1262,"props":1263,"children":1264},"style",{},[1265],{"type":35,"value":1266},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":7,"searchDepth":322,"depth":322,"links":1268},[1269,1270,1271,1275,1276,1282,1283],{"id":32,"depth":322,"text":36},{"id":113,"depth":322,"text":116},{"id":198,"depth":322,"text":201,"children":1272},[1273,1274],{"id":205,"depth":331,"text":208},{"id":249,"depth":331,"text":252},{"id":541,"depth":322,"text":544},{"id":942,"depth":322,"text":945,"children":1277},[1278,1279,1280,1281],{"id":948,"depth":331,"text":951},{"id":972,"depth":331,"text":975},{"id":983,"depth":331,"text":986},{"id":1001,"depth":331,"text":1004},{"id":1029,"depth":322,"text":1029},{"id":1130,"depth":322,"text":1130},"markdown","content:articles:pretext.md","content","articles\u002Fpretext.md","articles\u002Fpretext","md",[1291,1298,1305],{"_path":1292,"title":1293,"description":1294,"date":1295,"category":11,"image":12,"tags":1296,"score":331},"\u002Farticles\u002Frough.js","Rough.js 手繪草稿風 Canvas 繪圖庫配置與網頁整合開發教學","如果你想在網站裡做出像白板草圖、設計稿、塗鴉感插圖，Rough.js 是一個簡單又很有辨識度的選擇。","2026-05-22",[14,16,1297,15],"Data Visualization",{"_path":1299,"title":1300,"description":1301,"date":1302,"category":1303,"image":12,"tags":1304,"score":331},"\u002Farticles\u002Fbarkod","Barkod Studio 個性化條碼與發票載具圖樣生成器安裝與設計指南","全網頁版免安裝，高質感自訂樣式。結帳時拿出鯊魚或大便造型載具，絕對是全場焦點。","2026-05-07","Tools",[14,15,16],{"_path":1306,"title":1307,"description":1308,"date":1309,"category":11,"image":1310,"tags":1311,"score":331},"\u002Farticles\u002Fcobe","Cobe 輕量 WebGL 地球儀配置教學與 Vue 專案整合指南","想要在網頁上放一個酷炫的 3D 地球，但又不想載入沉重的 Three.js？COBE 是你的最佳選擇。","2026-05-04","\u002Fimages\u002Fcobe-hero.png",[1312,14,15,16],"WebGL",{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"category":11,"image":12,"tags":1314,"series":17,"readingTime":18,"difficulty":19,"local":20,"platforms":1315,"gpu":24,"body":1316,"_type":1284,"_id":1285,"_source":1286,"_file":1287,"_stem":1288,"_extension":1289},[14,15,16],[22,23],{"type":26,"children":1317,"toc":2333},[1318,1322,1330,1346,1358,1374,1377,1381,1390,1394,1397,1406,1414,1418,1437,1440,1444,1448,1452,1473,1477,1486,1678,1693,1708,1711,1715,1719,1738,1754,2060,2064,2067,2071,2075,2091,2095,2099,2103,2112,2116,2132,2135,2139,2143,2206,2214,2217,2221,2229,2238,2242,2265,2282,2285,2292,2319,2322,2329],{"type":29,"tag":30,"props":1319,"children":1320},{"id":32},[1321],{"type":35,"value":36},{"type":29,"tag":38,"props":1323,"children":1324},{},[1325,1326],{"type":35,"value":42},{"type":29,"tag":44,"props":1327,"children":1328},{},[1329],{"type":35,"value":48},{"type":29,"tag":38,"props":1331,"children":1332},{},[1333,1334,1339,1340,1345],{"type":35,"value":53},{"type":29,"tag":55,"props":1335,"children":1337},{"className":1336},[],[1338],{"type":35,"value":60},{"type":35,"value":62},{"type":29,"tag":55,"props":1341,"children":1343},{"className":1342},[],[1344],{"type":35,"value":68},{"type":35,"value":70},{"type":29,"tag":38,"props":1347,"children":1348},{},[1349,1353,1354],{"type":29,"tag":44,"props":1350,"children":1351},{},[1352],{"type":35,"value":78},{"type":35,"value":80},{"type":29,"tag":44,"props":1355,"children":1356},{},[1357],{"type":35,"value":85},{"type":29,"tag":38,"props":1359,"children":1360},{},[1361,1362,1367,1368,1373],{"type":35,"value":90},{"type":29,"tag":55,"props":1363,"children":1365},{"className":1364},[],[1366],{"type":35,"value":96},{"type":35,"value":98},{"type":29,"tag":55,"props":1369,"children":1371},{"className":1370},[],[1372],{"type":35,"value":104},{"type":35,"value":106},{"type":29,"tag":108,"props":1375,"children":1376},{},[],{"type":29,"tag":30,"props":1378,"children":1379},{"id":113},[1380],{"type":35,"value":116},{"type":29,"tag":38,"props":1382,"children":1383},{},[1384,1385,1389],{"type":35,"value":121},{"type":29,"tag":44,"props":1386,"children":1387},{},[1388],{"type":35,"value":126},{"type":35,"value":128},{"type":29,"tag":38,"props":1391,"children":1392},{},[1393],{"type":35,"value":133},{"type":29,"tag":135,"props":1395,"children":1396},{"src":137},[],{"type":29,"tag":38,"props":1398,"children":1399},{},[1400,1401,1405],{"type":35,"value":143},{"type":29,"tag":44,"props":1402,"children":1403},{},[1404],{"type":35,"value":148},{"type":35,"value":150},{"type":29,"tag":38,"props":1407,"children":1408},{},[1409],{"type":29,"tag":155,"props":1410,"children":1412},{"href":157,"rel":1411},[159],[1413],{"type":35,"value":162},{"type":29,"tag":38,"props":1415,"children":1416},{},[1417],{"type":35,"value":167},{"type":29,"tag":169,"props":1419,"children":1420},{},[1421,1429],{"type":29,"tag":173,"props":1422,"children":1423},{},[1424],{"type":29,"tag":155,"props":1425,"children":1427},{"href":178,"rel":1426},[159],[1428],{"type":35,"value":182},{"type":29,"tag":173,"props":1430,"children":1431},{},[1432],{"type":29,"tag":155,"props":1433,"children":1435},{"href":188,"rel":1434},[159],[1436],{"type":35,"value":192},{"type":29,"tag":108,"props":1438,"children":1439},{},[],{"type":29,"tag":30,"props":1441,"children":1442},{"id":198},[1443],{"type":35,"value":201},{"type":29,"tag":203,"props":1445,"children":1446},{"id":205},[1447],{"type":35,"value":208},{"type":29,"tag":38,"props":1449,"children":1450},{},[1451],{"type":35,"value":213},{"type":29,"tag":215,"props":1453,"children":1454},{"className":217,"code":218,"language":219,"meta":7,"style":7},[1455],{"type":29,"tag":55,"props":1456,"children":1457},{"__ignoreMap":7},[1458],{"type":29,"tag":225,"props":1459,"children":1460},{"class":227,"line":228},[1461,1465,1469],{"type":29,"tag":225,"props":1462,"children":1463},{"style":232},[1464],{"type":35,"value":235},{"type":29,"tag":225,"props":1466,"children":1467},{"style":238},[1468],{"type":35,"value":241},{"type":29,"tag":225,"props":1470,"children":1471},{"style":238},[1472],{"type":35,"value":246},{"type":29,"tag":203,"props":1474,"children":1475},{"id":249},[1476],{"type":35,"value":252},{"type":29,"tag":38,"props":1478,"children":1479},{},[1480,1481,1485],{"type":35,"value":257},{"type":29,"tag":44,"props":1482,"children":1483},{},[1484],{"type":35,"value":262},{"type":35,"value":264},{"type":29,"tag":215,"props":1487,"children":1488},{"className":267,"code":268,"language":269,"meta":7,"style":7},[1489],{"type":29,"tag":55,"props":1490,"children":1491},{"__ignoreMap":7},[1492,1527,1534,1573,1636,1643],{"type":29,"tag":225,"props":1493,"children":1494},{"class":227,"line":228},[1495,1499,1503,1507,1511,1515,1519,1523],{"type":29,"tag":225,"props":1496,"children":1497},{"style":279},[1498],{"type":35,"value":282},{"type":29,"tag":225,"props":1500,"children":1501},{"style":285},[1502],{"type":35,"value":288},{"type":29,"tag":225,"props":1504,"children":1505},{"style":291},[1506],{"type":35,"value":294},{"type":29,"tag":225,"props":1508,"children":1509},{"style":285},[1510],{"type":35,"value":299},{"type":29,"tag":225,"props":1512,"children":1513},{"style":291},[1514],{"type":35,"value":304},{"type":29,"tag":225,"props":1516,"children":1517},{"style":285},[1518],{"type":35,"value":309},{"type":29,"tag":225,"props":1520,"children":1521},{"style":279},[1522],{"type":35,"value":314},{"type":29,"tag":225,"props":1524,"children":1525},{"style":238},[1526],{"type":35,"value":319},{"type":29,"tag":225,"props":1528,"children":1529},{"class":227,"line":322},[1530],{"type":29,"tag":225,"props":1531,"children":1532},{"emptyLinePlaceholder":20},[1533],{"type":35,"value":328},{"type":29,"tag":225,"props":1535,"children":1536},{"class":227,"line":331},[1537,1541,1545,1549,1553,1557,1561,1565,1569],{"type":29,"tag":225,"props":1538,"children":1539},{"style":279},[1540],{"type":35,"value":337},{"type":29,"tag":225,"props":1542,"children":1543},{"style":340},[1544],{"type":35,"value":343},{"type":29,"tag":225,"props":1546,"children":1547},{"style":346},[1548],{"type":35,"value":349},{"type":29,"tag":225,"props":1550,"children":1551},{"style":232},[1552],{"type":35,"value":354},{"type":29,"tag":225,"props":1554,"children":1555},{"style":285},[1556],{"type":35,"value":359},{"type":29,"tag":225,"props":1558,"children":1559},{"style":238},[1560],{"type":35,"value":364},{"type":29,"tag":225,"props":1562,"children":1563},{"style":285},[1564],{"type":35,"value":299},{"type":29,"tag":225,"props":1566,"children":1567},{"style":238},[1568],{"type":35,"value":373},{"type":29,"tag":225,"props":1570,"children":1571},{"style":285},[1572],{"type":35,"value":378},{"type":29,"tag":225,"props":1574,"children":1575},{"class":227,"line":381},[1576,1580,1584,1588,1592,1596,1600,1604,1608,1612,1616,1620,1624,1628,1632],{"type":29,"tag":225,"props":1577,"children":1578},{"style":279},[1579],{"type":35,"value":337},{"type":29,"tag":225,"props":1581,"children":1582},{"style":285},[1583],{"type":35,"value":288},{"type":29,"tag":225,"props":1585,"children":1586},{"style":340},[1587],{"type":35,"value":395},{"type":29,"tag":225,"props":1589,"children":1590},{"style":285},[1591],{"type":35,"value":299},{"type":29,"tag":225,"props":1593,"children":1594},{"style":340},[1595],{"type":35,"value":404},{"type":29,"tag":225,"props":1597,"children":1598},{"style":285},[1599],{"type":35,"value":309},{"type":29,"tag":225,"props":1601,"children":1602},{"style":346},[1603],{"type":35,"value":413},{"type":29,"tag":225,"props":1605,"children":1606},{"style":232},[1607],{"type":35,"value":418},{"type":29,"tag":225,"props":1609,"children":1610},{"style":285},[1611],{"type":35,"value":359},{"type":29,"tag":225,"props":1613,"children":1614},{"style":291},[1615],{"type":35,"value":427},{"type":29,"tag":225,"props":1617,"children":1618},{"style":285},[1619],{"type":35,"value":299},{"type":29,"tag":225,"props":1621,"children":1622},{"style":434},[1623],{"type":35,"value":437},{"type":29,"tag":225,"props":1625,"children":1626},{"style":285},[1627],{"type":35,"value":299},{"type":29,"tag":225,"props":1629,"children":1630},{"style":434},[1631],{"type":35,"value":446},{"type":29,"tag":225,"props":1633,"children":1634},{"style":285},[1635],{"type":35,"value":378},{"type":29,"tag":225,"props":1637,"children":1638},{"class":227,"line":453},[1639],{"type":29,"tag":225,"props":1640,"children":1641},{"emptyLinePlaceholder":20},[1642],{"type":35,"value":328},{"type":29,"tag":225,"props":1644,"children":1645},{"class":227,"line":461},[1646,1650,1654,1658,1662,1666,1670,1674],{"type":29,"tag":225,"props":1647,"children":1648},{"style":340},[1649],{"type":35,"value":467},{"type":29,"tag":225,"props":1651,"children":1652},{"style":285},[1653],{"type":35,"value":472},{"type":29,"tag":225,"props":1655,"children":1656},{"style":232},[1657],{"type":35,"value":477},{"type":29,"tag":225,"props":1659,"children":1660},{"style":285},[1661],{"type":35,"value":359},{"type":29,"tag":225,"props":1663,"children":1664},{"style":291},[1665],{"type":35,"value":395},{"type":29,"tag":225,"props":1667,"children":1668},{"style":285},[1669],{"type":35,"value":299},{"type":29,"tag":225,"props":1671,"children":1672},{"style":291},[1673],{"type":35,"value":404},{"type":29,"tag":225,"props":1675,"children":1676},{"style":285},[1677],{"type":35,"value":378},{"type":29,"tag":38,"props":1679,"children":1680},{},[1681,1686,1687,1692],{"type":29,"tag":55,"props":1682,"children":1684},{"className":1683},[],[1685],{"type":35,"value":506},{"type":35,"value":508},{"type":29,"tag":55,"props":1688,"children":1690},{"className":1689},[],[1691],{"type":35,"value":514},{"type":35,"value":516},{"type":29,"tag":38,"props":1694,"children":1695},{},[1696,1697,1707],{"type":35,"value":521},{"type":29,"tag":44,"props":1698,"children":1699},{},[1700,1701,1706],{"type":35,"value":526},{"type":29,"tag":55,"props":1702,"children":1704},{"className":1703},[],[1705],{"type":35,"value":514},{"type":35,"value":533},{"type":35,"value":535},{"type":29,"tag":108,"props":1709,"children":1710},{},[],{"type":29,"tag":30,"props":1712,"children":1713},{"id":541},[1714],{"type":35,"value":544},{"type":29,"tag":38,"props":1716,"children":1717},{},[1718],{"type":35,"value":549},{"type":29,"tag":169,"props":1720,"children":1721},{},[1722,1726,1730,1734],{"type":29,"tag":173,"props":1723,"children":1724},{},[1725],{"type":35,"value":557},{"type":29,"tag":173,"props":1727,"children":1728},{},[1729],{"type":35,"value":562},{"type":29,"tag":173,"props":1731,"children":1732},{},[1733],{"type":35,"value":567},{"type":29,"tag":173,"props":1735,"children":1736},{},[1737],{"type":35,"value":572},{"type":29,"tag":38,"props":1739,"children":1740},{},[1741,1742,1747,1748,1753],{"type":35,"value":577},{"type":29,"tag":55,"props":1743,"children":1745},{"className":1744},[],[1746],{"type":35,"value":583},{"type":35,"value":98},{"type":29,"tag":55,"props":1749,"children":1751},{"className":1750},[],[1752],{"type":35,"value":590},{"type":35,"value":150},{"type":29,"tag":215,"props":1755,"children":1756},{"className":267,"code":594,"language":269,"meta":7,"style":7},[1757],{"type":29,"tag":55,"props":1758,"children":1759},{"__ignoreMap":7},[1760,1795,1802,1825,1836,1843,1850,1857,1912,1919,1986,2053],{"type":29,"tag":225,"props":1761,"children":1762},{"class":227,"line":228},[1763,1767,1771,1775,1779,1783,1787,1791],{"type":29,"tag":225,"props":1764,"children":1765},{"style":279},[1766],{"type":35,"value":282},{"type":29,"tag":225,"props":1768,"children":1769},{"style":285},[1770],{"type":35,"value":288},{"type":29,"tag":225,"props":1772,"children":1773},{"style":291},[1774],{"type":35,"value":614},{"type":29,"tag":225,"props":1776,"children":1777},{"style":285},[1778],{"type":35,"value":299},{"type":29,"tag":225,"props":1780,"children":1781},{"style":291},[1782],{"type":35,"value":623},{"type":29,"tag":225,"props":1784,"children":1785},{"style":285},[1786],{"type":35,"value":309},{"type":29,"tag":225,"props":1788,"children":1789},{"style":279},[1790],{"type":35,"value":314},{"type":29,"tag":225,"props":1792,"children":1793},{"style":238},[1794],{"type":35,"value":319},{"type":29,"tag":225,"props":1796,"children":1797},{"class":227,"line":322},[1798],{"type":29,"tag":225,"props":1799,"children":1800},{"emptyLinePlaceholder":20},[1801],{"type":35,"value":328},{"type":29,"tag":225,"props":1803,"children":1804},{"class":227,"line":331},[1805,1809,1813,1817,1821],{"type":29,"tag":225,"props":1806,"children":1807},{"style":279},[1808],{"type":35,"value":337},{"type":29,"tag":225,"props":1810,"children":1811},{"style":340},[1812],{"type":35,"value":343},{"type":29,"tag":225,"props":1814,"children":1815},{"style":346},[1816],{"type":35,"value":349},{"type":29,"tag":225,"props":1818,"children":1819},{"style":232},[1820],{"type":35,"value":662},{"type":29,"tag":225,"props":1822,"children":1823},{"style":285},[1824],{"type":35,"value":667},{"type":29,"tag":225,"props":1826,"children":1827},{"class":227,"line":381},[1828,1832],{"type":29,"tag":225,"props":1829,"children":1830},{"style":238},[1831],{"type":35,"value":675},{"type":29,"tag":225,"props":1833,"children":1834},{"style":285},[1835],{"type":35,"value":680},{"type":29,"tag":225,"props":1837,"children":1838},{"class":227,"line":453},[1839],{"type":29,"tag":225,"props":1840,"children":1841},{"style":238},[1842],{"type":35,"value":688},{"type":29,"tag":225,"props":1844,"children":1845},{"class":227,"line":461},[1846],{"type":29,"tag":225,"props":1847,"children":1848},{"style":285},[1849],{"type":35,"value":378},{"type":29,"tag":225,"props":1851,"children":1852},{"class":227,"line":698},[1853],{"type":29,"tag":225,"props":1854,"children":1855},{"emptyLinePlaceholder":20},[1856],{"type":35,"value":328},{"type":29,"tag":225,"props":1858,"children":1859},{"class":227,"line":706},[1860,1864,1868,1872,1876,1880,1884,1888,1892,1896,1900,1904,1908],{"type":29,"tag":225,"props":1861,"children":1862},{"style":279},[1863],{"type":35,"value":337},{"type":29,"tag":225,"props":1865,"children":1866},{"style":285},[1867],{"type":35,"value":288},{"type":29,"tag":225,"props":1869,"children":1870},{"style":340},[1871],{"type":35,"value":720},{"type":29,"tag":225,"props":1873,"children":1874},{"style":285},[1875],{"type":35,"value":309},{"type":29,"tag":225,"props":1877,"children":1878},{"style":346},[1879],{"type":35,"value":413},{"type":29,"tag":225,"props":1881,"children":1882},{"style":232},[1883],{"type":35,"value":733},{"type":29,"tag":225,"props":1885,"children":1886},{"style":285},[1887],{"type":35,"value":359},{"type":29,"tag":225,"props":1889,"children":1890},{"style":291},[1891],{"type":35,"value":427},{"type":29,"tag":225,"props":1893,"children":1894},{"style":285},[1895],{"type":35,"value":299},{"type":29,"tag":225,"props":1897,"children":1898},{"style":434},[1899],{"type":35,"value":437},{"type":29,"tag":225,"props":1901,"children":1902},{"style":285},[1903],{"type":35,"value":299},{"type":29,"tag":225,"props":1905,"children":1906},{"style":434},[1907],{"type":35,"value":758},{"type":29,"tag":225,"props":1909,"children":1910},{"style":285},[1911],{"type":35,"value":378},{"type":29,"tag":225,"props":1913,"children":1914},{"class":227,"line":765},[1915],{"type":29,"tag":225,"props":1916,"children":1917},{"emptyLinePlaceholder":20},[1918],{"type":35,"value":328},{"type":29,"tag":225,"props":1920,"children":1921},{"class":227,"line":773},[1922,1926,1930,1934,1938,1942,1946,1950,1954,1958,1962,1966,1970,1974,1978,1982],{"type":29,"tag":225,"props":1923,"children":1924},{"style":279},[1925],{"type":35,"value":779},{"type":29,"tag":225,"props":1927,"children":1928},{"style":285},[1929],{"type":35,"value":784},{"type":29,"tag":225,"props":1931,"children":1932},{"style":279},[1933],{"type":35,"value":789},{"type":29,"tag":225,"props":1935,"children":1936},{"style":291},[1937],{"type":35,"value":794},{"type":29,"tag":225,"props":1939,"children":1940},{"style":346},[1941],{"type":35,"value":349},{"type":29,"tag":225,"props":1943,"children":1944},{"style":434},[1945],{"type":35,"value":803},{"type":29,"tag":225,"props":1947,"children":1948},{"style":285},[1949],{"type":35,"value":808},{"type":29,"tag":225,"props":1951,"children":1952},{"style":291},[1953],{"type":35,"value":813},{"type":29,"tag":225,"props":1955,"children":1956},{"style":346},[1957],{"type":35,"value":818},{"type":29,"tag":225,"props":1959,"children":1960},{"style":340},[1961],{"type":35,"value":823},{"type":29,"tag":225,"props":1963,"children":1964},{"style":285},[1965],{"type":35,"value":472},{"type":29,"tag":225,"props":1967,"children":1968},{"style":291},[1969],{"type":35,"value":832},{"type":29,"tag":225,"props":1971,"children":1972},{"style":285},[1973],{"type":35,"value":808},{"type":29,"tag":225,"props":1975,"children":1976},{"style":291},[1977],{"type":35,"value":813},{"type":29,"tag":225,"props":1979,"children":1980},{"style":346},[1981],{"type":35,"value":845},{"type":29,"tag":225,"props":1983,"children":1984},{"style":285},[1985],{"type":35,"value":850},{"type":29,"tag":225,"props":1987,"children":1988},{"class":227,"line":853},[1989,1993,1997,2001,2005,2009,2013,2017,2021,2025,2029,2033,2037,2041,2045,2049],{"type":29,"tag":225,"props":1990,"children":1991},{"style":340},[1992],{"type":35,"value":859},{"type":29,"tag":225,"props":1994,"children":1995},{"style":285},[1996],{"type":35,"value":472},{"type":29,"tag":225,"props":1998,"children":1999},{"style":232},[2000],{"type":35,"value":477},{"type":29,"tag":225,"props":2002,"children":2003},{"style":285},[2004],{"type":35,"value":359},{"type":29,"tag":225,"props":2006,"children":2007},{"style":291},[2008],{"type":35,"value":720},{"type":29,"tag":225,"props":2010,"children":2011},{"style":285},[2012],{"type":35,"value":880},{"type":29,"tag":225,"props":2014,"children":2015},{"style":291},[2016],{"type":35,"value":813},{"type":29,"tag":225,"props":2018,"children":2019},{"style":285},[2020],{"type":35,"value":889},{"type":29,"tag":225,"props":2022,"children":2023},{"style":291},[2024],{"type":35,"value":35},{"type":29,"tag":225,"props":2026,"children":2027},{"style":285},[2028],{"type":35,"value":299},{"type":29,"tag":225,"props":2030,"children":2031},{"style":291},[2032],{"type":35,"value":720},{"type":29,"tag":225,"props":2034,"children":2035},{"style":285},[2036],{"type":35,"value":880},{"type":29,"tag":225,"props":2038,"children":2039},{"style":291},[2040],{"type":35,"value":813},{"type":29,"tag":225,"props":2042,"children":2043},{"style":285},[2044],{"type":35,"value":889},{"type":29,"tag":225,"props":2046,"children":2047},{"style":291},[2048],{"type":35,"value":918},{"type":29,"tag":225,"props":2050,"children":2051},{"style":285},[2052],{"type":35,"value":378},{"type":29,"tag":225,"props":2054,"children":2055},{"class":227,"line":925},[2056],{"type":29,"tag":225,"props":2057,"children":2058},{"style":285},[2059],{"type":35,"value":931},{"type":29,"tag":38,"props":2061,"children":2062},{},[2063],{"type":35,"value":936},{"type":29,"tag":108,"props":2065,"children":2066},{},[],{"type":29,"tag":30,"props":2068,"children":2069},{"id":942},[2070],{"type":35,"value":945},{"type":29,"tag":203,"props":2072,"children":2073},{"id":948},[2074],{"type":35,"value":951},{"type":29,"tag":38,"props":2076,"children":2077},{},[2078,2079,2084,2085,2090],{"type":35,"value":956},{"type":29,"tag":55,"props":2080,"children":2082},{"className":2081},[],[2083],{"type":35,"value":506},{"type":35,"value":963},{"type":29,"tag":55,"props":2086,"children":2088},{"className":2087},[],[2089],{"type":35,"value":514},{"type":35,"value":535},{"type":29,"tag":203,"props":2092,"children":2093},{"id":972},[2094],{"type":35,"value":975},{"type":29,"tag":38,"props":2096,"children":2097},{},[2098],{"type":35,"value":980},{"type":29,"tag":203,"props":2100,"children":2101},{"id":983},[2102],{"type":35,"value":986},{"type":29,"tag":38,"props":2104,"children":2105},{},[2106,2107,2111],{"type":35,"value":991},{"type":29,"tag":44,"props":2108,"children":2109},{},[2110],{"type":35,"value":996},{"type":35,"value":998},{"type":29,"tag":203,"props":2113,"children":2114},{"id":1001},[2115],{"type":35,"value":1004},{"type":29,"tag":38,"props":2117,"children":2118},{},[2119,2120,2125,2126,2131],{"type":35,"value":53},{"type":29,"tag":55,"props":2121,"children":2123},{"className":2122},[],[2124],{"type":35,"value":1014},{"type":35,"value":62},{"type":29,"tag":55,"props":2127,"children":2129},{"className":2128},[],[2130],{"type":35,"value":1021},{"type":35,"value":1023},{"type":29,"tag":108,"props":2133,"children":2134},{},[],{"type":29,"tag":30,"props":2136,"children":2137},{"id":1029},[2138],{"type":35,"value":1029},{"type":29,"tag":38,"props":2140,"children":2141},{},[2142],{"type":35,"value":1036},{"type":29,"tag":169,"props":2144,"children":2145},{},[2146,2161,2176,2180,2190],{"type":29,"tag":173,"props":2147,"children":2148},{},[2149,2150,2155,2156],{"type":35,"value":1044},{"type":29,"tag":55,"props":2151,"children":2153},{"className":2152},[],[2154],{"type":35,"value":1050},{"type":35,"value":1052},{"type":29,"tag":55,"props":2157,"children":2159},{"className":2158},[],[2160],{"type":35,"value":1058},{"type":29,"tag":173,"props":2162,"children":2163},{},[2164,2165,2170,2171],{"type":35,"value":1063},{"type":29,"tag":55,"props":2166,"children":2168},{"className":2167},[],[2169],{"type":35,"value":1069},{"type":35,"value":98},{"type":29,"tag":55,"props":2172,"children":2174},{"className":2173},[],[2175],{"type":35,"value":1076},{"type":29,"tag":173,"props":2177,"children":2178},{},[2179],{"type":35,"value":1081},{"type":29,"tag":173,"props":2181,"children":2182},{},[2183,2184,2189],{"type":35,"value":1086},{"type":29,"tag":55,"props":2185,"children":2187},{"className":2186},[],[2188],{"type":35,"value":1092},{"type":35,"value":1094},{"type":29,"tag":173,"props":2191,"children":2192},{},[2193,2194,2199,2200,2205],{"type":35,"value":1099},{"type":29,"tag":55,"props":2195,"children":2197},{"className":2196},[],[2198],{"type":35,"value":1105},{"type":35,"value":1107},{"type":29,"tag":55,"props":2201,"children":2203},{"className":2202},[],[2204],{"type":35,"value":514},{"type":35,"value":1114},{"type":29,"tag":38,"props":2207,"children":2208},{},[2209,2210],{"type":35,"value":1119},{"type":29,"tag":44,"props":2211,"children":2212},{},[2213],{"type":35,"value":1124},{"type":29,"tag":108,"props":2215,"children":2216},{},[],{"type":29,"tag":30,"props":2218,"children":2219},{"id":1130},[2220],{"type":35,"value":1130},{"type":29,"tag":38,"props":2222,"children":2223},{},[2224,2225],{"type":35,"value":1137},{"type":29,"tag":44,"props":2226,"children":2227},{},[2228],{"type":35,"value":1142},{"type":29,"tag":38,"props":2230,"children":2231},{},[2232,2233,2237],{"type":35,"value":1147},{"type":29,"tag":44,"props":2234,"children":2235},{},[2236],{"type":35,"value":148},{"type":35,"value":1153},{"type":29,"tag":38,"props":2239,"children":2240},{},[2241],{"type":35,"value":1158},{"type":29,"tag":169,"props":2243,"children":2244},{},[2245,2249,2253,2257,2261],{"type":29,"tag":173,"props":2246,"children":2247},{},[2248],{"type":35,"value":1166},{"type":29,"tag":173,"props":2250,"children":2251},{},[2252],{"type":35,"value":1171},{"type":29,"tag":173,"props":2254,"children":2255},{},[2256],{"type":35,"value":1176},{"type":29,"tag":173,"props":2258,"children":2259},{},[2260],{"type":35,"value":1181},{"type":29,"tag":173,"props":2262,"children":2263},{},[2264],{"type":35,"value":1186},{"type":29,"tag":1188,"props":2266,"children":2267},{},[2268],{"type":29,"tag":38,"props":2269,"children":2270},{},[2271,2275,2276,2281],{"type":29,"tag":44,"props":2272,"children":2273},{},[2274],{"type":35,"value":1198},{"type":35,"value":1200},{"type":29,"tag":55,"props":2277,"children":2279},{"className":2278},[],[2280],{"type":35,"value":506},{"type":35,"value":1207},{"type":29,"tag":108,"props":2283,"children":2284},{},[],{"type":29,"tag":38,"props":2286,"children":2287},{},[2288],{"type":29,"tag":44,"props":2289,"children":2290},{},[2291],{"type":35,"value":1218},{"type":29,"tag":169,"props":2293,"children":2294},{},[2295,2303,2311],{"type":29,"tag":173,"props":2296,"children":2297},{},[2298],{"type":29,"tag":155,"props":2299,"children":2301},{"href":1227,"rel":2300},[159],[2302],{"type":35,"value":1231},{"type":29,"tag":173,"props":2304,"children":2305},{},[2306],{"type":29,"tag":155,"props":2307,"children":2309},{"href":178,"rel":2308},[159],[2310],{"type":35,"value":182},{"type":29,"tag":173,"props":2312,"children":2313},{},[2314],{"type":29,"tag":155,"props":2315,"children":2317},{"href":157,"rel":2316},[159],[2318],{"type":35,"value":1248},{"type":29,"tag":108,"props":2320,"children":2321},{},[],{"type":29,"tag":38,"props":2323,"children":2324},{},[2325],{"type":29,"tag":1256,"props":2326,"children":2327},{},[2328],{"type":35,"value":1260},{"type":29,"tag":1262,"props":2330,"children":2331},{},[2332],{"type":35,"value":1266},{"title":7,"searchDepth":322,"depth":322,"links":2334},[2335,2336,2337,2341,2342,2348,2349],{"id":32,"depth":322,"text":36},{"id":113,"depth":322,"text":116},{"id":198,"depth":322,"text":201,"children":2338},[2339,2340],{"id":205,"depth":331,"text":208},{"id":249,"depth":331,"text":252},{"id":541,"depth":322,"text":544},{"id":942,"depth":322,"text":945,"children":2343},[2344,2345,2346,2347],{"id":948,"depth":331,"text":951},{"id":972,"depth":331,"text":975},{"id":983,"depth":331,"text":986},{"id":1001,"depth":331,"text":1004},{"id":1029,"depth":322,"text":1029},{"id":1130,"depth":322,"text":1130},1779779149618]