2c:T2acf,// .blob() not .url(): a cross-origin image taints the canvas and blocks tracing. const LZ_BLOB = await FileAttachment("lao_statue.png").blob(); const LZ_URL = URL.createObjectURL(LZ_BLOB); const LZ = { stackAt: 520, imgMax: 400, txtMax: 350, boxOverlap: 90, // The text is wrapped against the picture sitting imgGap further LEFT than it // is drawn, with no shape-margin at all, and the picture is then put back by // the same imgGap. Every row therefore clears the ink by exactly imgGap, and // the silhouette is never altered — shape-margin would dilate it and round // the profile off, which is a different shape, not a wider gap. imgGap: 60, shapeMargin: 0, // inert while the group is left-justified: there is no inset to pull from txtPull: 0.5, fogFrom: 50, fogEase: 1, fogStrength: 0.30, fogTint: "255,255,255", fogFreqX: 0.005, fogFreqY: 0.020, fogOctaves: 3, fogSlow: 52, fogFast: 17, fogRelaxWrap: false, alphaMin: 0.15, lumMax: 0.90, alt: "Lao Tzu riding a water buffalo, seated backwards, fading into fog" }; const LZ_W = LZ.txtMax + LZ.imgMax + LZ.imgGap - LZ.boxOverlap; const LZ_SHARE = (LZ.imgMax / LZ_W * 100).toFixed(2); const LZ_TEXT = `As Lao Tzu was leaving for the wilderness, the gate guard would not let him pass until he wrote down his wisdom, which became the Daodejing. When finished, Lao Tzu rode away, sitting backwards on a water buffalo, trusting the animal\u2019s instinct to walk downhill to find a fertile river valley to settle in. He was never seen again.`; // 1 - t^e, not (1-t)^e: holds at the top of the band and drops at the base. const lzFade = y => { if (y <= LZ.fogFrom) return 1; const t = (y - LZ.fogFrom) / (100 - LZ.fogFrom); return 1 - Math.pow(t, LZ.fogEase); }; function lzFadeMask(steps = 12) { const st = ["#000 0%", `#000 ${LZ.fogFrom}%`]; for (let i = 1; i <= steps; i++) { const y = LZ.fogFrom + (100 - LZ.fogFrom) * (i / steps); st.push(`rgba(0,0,0,${lzFade(y).toFixed(3)}) ${y.toFixed(1)}%`); } return `linear-gradient(to bottom, ${st.join(", ")})`; } // The filter region must equal the tile or stitchTiles has nothing to align to. const lzFogTile = (seed, w, h, fx, fy, oct, gain, bias, tint) => { const [tr, tg, tb] = String(tint || "255,255,255").split(",").map(v => (+v) / 255); const svg = ``; return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`; }; // Tile derived from frequency so a whole number of periods spans it. const lzTile = (fx, fy, px, py) => ({ w: Math.round(px / fx), h: Math.round(py / fy) }); const LZ_A_DIM = lzTile(LZ.fogFreqX, LZ.fogFreqY, 4, 5); const LZ_FOG_A = { w: LZ_A_DIM.w, url: lzFogTile(3, LZ_A_DIM.w, LZ_A_DIM.h, LZ.fogFreqX, LZ.fogFreqY, LZ.fogOctaves, 1.70, -0.58, LZ.fogTint) }; const LZ_B_DIM = lzTile(LZ.fogFreqX * 1.7, LZ.fogFreqY * 1.7, 6, 6); const LZ_FOG_B = { w: LZ_B_DIM.w, url: lzFogTile(7, LZ_B_DIM.w, LZ_B_DIM.h, LZ.fogFreqX * 1.7, LZ.fogFreqY * 1.7, Math.max(1, LZ.fogOctaves - 1), 1.55, -0.60, LZ.fogTint) }; async function lzTraceShape(url, opt) { try { const img = new Image(); img.src = url; if (img.decode) await img.decode(); else await new Promise(r => { img.onload = r; img.onerror = r; }); const natW = img.naturalWidth || 0, natH = img.naturalHeight || 0; if (!natW || !natH) return null; const W = Math.min(240, natW); const H = Math.max(1, Math.round(natH * W / natW)); const cv = document.createElement("canvas"); cv.width = W; cv.height = H; const g = cv.getContext("2d", { willReadFrequently: true }); if (!g) return null; g.drawImage(img, 0, 0, W, H); let d; try { d = g.getImageData(0, 0, W, H).data; } catch (_) { return null; } const bands = Math.max(4, Math.min(opt.rows || 64, H)); const xs = []; for (let b = 0; b < bands; b++) { const y0 = Math.floor(b * H / bands); const y1 = Math.max(y0 + 1, Math.floor((b + 1) * H / bands)); let minX = W; for (let y = y0; y < y1; y++) { for (let x = 0; x < minX; x++) { const i = (y * W + x) * 4; if (d[i + 3] / 255 < opt.alphaMin) continue; const lum = (0.299 * d[i] + 0.587 * d[i + 1] + 0.114 * d[i + 2]) / 255; if (lum > opt.lumMax) continue; minX = x; break; } } let x = minX >= W ? 100 : (minX / W) * 100; if (opt.fogRelaxWrap) { const a = lzFade(b * 100 / bands); x = x + (100 - x) * (1 - a); } xs.push(x); } if (!xs.some(x => x < 99.5)) return null; // Two points per slice: one would cut corners on steep edges. const pts = ["100% 0%"]; for (let b = 0; b < bands; b++) { const x = xs[b].toFixed(2); pts.push(`${x}% ${(b * 100 / bands).toFixed(2)}%`); pts.push(`${x}% ${((b + 1) * 100 / bands).toFixed(2)}%`); } pts.push("100% 100%"); return `polygon(${pts.join(", ")})`; } catch (_) { return null; } } const LZ_SHAPE = await lzTraceShape(LZ_URL, LZ); const LZ_MASK = lzFadeMask(); const lz = document.createElement("div"); lz.className = "lz-wrap"; if (LZ_SHAPE) lz.style.setProperty("--lz-shape", LZ_SHAPE); lz.innerHTML = `

${LZ_TEXT}

`; const lzFig = lz.querySelector(".lz-fig"); const lzImg = lz.querySelector(".lz-img"); const lzTxt = lz.querySelector(".lz-txt"); function lzLayout() { if (!lzFig || !lzTxt) return; const cs = getComputedStyle(lzFig); lzTxt.style.marginTop = "0px"; lzTxt.style.transform = "none"; if ((cs.cssFloat || cs.float) !== "right") return; // transform, not margin: margin re-wraps the text against the contour and // changes the measure; this slides the block with its shaped edge intact. const parent = lz.parentElement; if (parent && LZ.txtPull > 0) { const inset = lz.getBoundingClientRect().left - parent.getBoundingClientRect().left; if (inset > 1) lzTxt.style.transform = `translateX(${(-inset * LZ.txtPull).toFixed(1)}px)`; } const figH = lzFig.offsetHeight; let h = lzTxt.offsetHeight; lzTxt.style.marginTop = Math.max(0, (figH - h) / 2).toFixed(1) + "px"; for (let i = 0; i < 4; i++) { const h2 = lzTxt.offsetHeight; if (Math.abs(h2 - h) <= 1) break; h = h2; lzTxt.style.marginTop = Math.max(0, (figH - h2) / 2).toFixed(1) + "px"; } } // Width only: observing height would loop, since laying out changes height. let lzLastW = -1; const lzRO = new ResizeObserver(entries => { const w = entries[0].contentRect.width; if (Math.abs(w - lzLastW) < 1) return; lzLastW = w; clearTimeout(lzRO._t); lzRO._t = setTimeout(lzLayout, 60); }); lzRO.observe(lz); if (lzImg) lzImg.addEventListener("load", lzLayout); try { document.fonts?.ready.then(lzLayout); } catch (_) {} requestAnimationFrame(lzLayout); // CSS animations keep accruing time in a hidden tab; pausing avoids the jump back. const lzVis = () => lz.classList.toggle("lz-still", document.hidden); document.addEventListener("visibilitychange", lzVis); lzVis(); try { invalidation.then(() => { lzRO.disconnect(); clearTimeout(lzRO._t); document.removeEventListener("visibilitychange", lzVis); URL.revokeObjectURL(LZ_URL); }); } catch (_) {} display(lz);2d:Tdb8a,// Daodejing reader: seal-script bamboo slips fanned across a jade field. // Needs: daodejing-reading (1).json, ddjStyle (fonts + stylesheet), player, slatSync. const DDJ = await FileAttachment("daodejing-reading (1).json").json(); const CHAPTERS = DDJ.chapters || DDJ; const BREAK = DDJ.character_breakdowns || {}; const TITLE_DX=0.035; const TITLE_ROWS=9; // Rows off the BOTTOM of each title slip. Bottom only: the shared glyph column must stay in register. const TITLE_TRIM=[2.6, 0, -1.5, 3]; const TIP_DELAY=150; const TIP_GAP=14; const TIP_MARGIN=10; const TIP_MIN=170, TIP_MAX=310; const { serif:SERIF_STACK, glossSize:GLOSS_SIZE, seal:SEAL_STACK, tipRadius:TIP_RADIUS, tipCaret:TIP_CARET, tipCaretLen:TIP_CARET_LEN } = ddjStyle; const TIP_GLYPH=40; const TIP_ACROSS=false; const TIP_SOUND='sound'; // To swap the motif: draw the new corner as the TOP-LEFT one, tails running to the tile's bottom and right edges. const RING_MOTIF={ vb:36.5, rail:0.5, deep:18.5, d:'M.5,36.5 L.5,18.5 L9.5,18.5 L9.5,.5 L.5,.5 L.5,9.5 L18.5,9.5 L18.5,.5 L36.5,.5' }; const RING_SIZE=16; const RING_STROKE=0.075; const RING_TRACK=true; const RING_REF_W=54; const RING_MIN=13, RING_MAX=34; const RING_GAP=6.25; const RING_KEEP_CLEAR=false; const RING_CLEAR=2; const SHADOW_SCALE=1.25; const SHADOW_TILTS=true; const PARTNER_MARK=true; const TAG_FADE_SLATS=2; const PLAY_HIT_MAX=56; const PLAY_HIT_BLEED=14; const PLAY_HIT_ESCAPES=true; const clamp = (v,a,b)=> vb?b : v; const lerp = (a,b,t)=> a+(b-a)*t; const smooth= t=> t*t*(3-2*t); const prand = x=>{ const s=Math.sin(x*127.1+311.7)*43758.5453; return s-Math.floor(s); }; const CNUM='零一二三四五六七八九'; function cnNum(n){ if(n<=0) return '零'; if(n<10) return CNUM[n]; if(n===10) return '十'; if(n<20) return '十'+CNUM[n-10]; const t=Math.floor(n/10), o=n%10; return CNUM[t]+'十'+(o?CNUM[o]:''); } const reduced = matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false; const jitY=i=>(prand(i+3.1)-.5)*10; const isFullscreen = ()=> (document.fullscreenElement||document.webkitFullscreenElement)===root; // plank index == slat index — the audio map and the scrubber both count in these. let planks=[], N=0, chapStarts=[]; function buildPlankList(){ planks=[]; for(const chap of CHAPTERS){ (chap.sentences||[]).forEach((s,si)=>{ const chars=(s.characters||[]).map(c=>({ c:c.char, py:c.pinyin||'', g:(c.contextual_definition&&c.contextual_definition.trim())||c.gloss||'', base:c.gloss||'' })); let units=null; if(Array.isArray(s.reading_units)&&s.reading_units.length){ units=[]; let off=0; for(const ru of s.reading_units){ const n=ru.n||1; units.push({from:off, to:off+n-1, en:ru.en||'', note:ru.note||''}); off+=n; } } planks.push({ chapter:chap.chapter, lineNo:si+1, text:s.text||'', lr:s.literal_reading||'', cm:s.commentary||'', enriched:!!s.enriched, chapStart:si===0, chars, units, group:null, groupIdx:null, diffs:null }); }); } mergeToSlats(); N=planks.length; chapStarts=planks.map((p,i)=>p.chapStart?i:-1).filter(i=>i>=0); inferGroups(); } // Folds joined rows into one slat; bails unchanged if the map and the JSON have drifted apart. function mergeToSlats(){ const g=slatSync&&slatSync.slats; if(!g||g.length===planks.length) return; const out=[]; for(const s of g){ const base=planks[s.rows[0]]; if(!base) return; const m=Object.assign({},base); m.chars=base.chars.slice(); m.units=base.units?base.units.map(u=>Object.assign({},u)):null; for(let k=1;k({from:u.from+off,to:u.to+off,en:u.en,note:u.note}))); else m.units=null; } m.group=null; m.groupIdx=null; m.diffs=null; m._geomSize=-1; out.push(m); } planks=out; } function inferGroups(){ let gid=0; const pair=(a,b)=>{ if(a.chapter!==b.chapter) return false; if(a.chars.length!==b.chars.length||a.chars.length<4) return false; let same=0,diff=0; for(let i=0;i=1&&diff>=2; }; for(let i=0;ii){ const g='g'+(gid++); for(let k=i;k<=j;k++) planks[k].group=g; } } const members={}; planks.forEach((p,i)=>{ if(p.group)(members[p.group]??=[]).push(i); }); for(const g in members){ const idxs=members[g], L=planks[idxs[0]].chars.length, diffs=[]; for(let s=0;splanks[ix].chars[s].c!==first)) diffs.push(s); } idxs.forEach(ix=>{ planks[ix].diffs=diffs; planks[ix].groupIdx=idxs; }); } } buildPlankList(); const root=document.createElement('div'); root.className='ddj-root'; root.style.cssText=`position:relative;width:100%;height:640px;max-height:1500px; overflow:${PLAY_HIT_ESCAPES?'visible':'hidden'};border-radius:12px;isolation:isolate; background:#dfe9dc; color:#4a5245;`; root.tabIndex=0; root.style.setProperty('--tip-glyph',TIP_GLYPH+'px'); const HALO_R=3, HALO_N=16; root.style.setProperty('--count-halo', Array.from({length:HALO_N},(_,i)=>{ const a=2*Math.PI*i/HALO_N; return `${(Math.cos(a)*HALO_R).toFixed(2)}px ${(Math.sin(a)*HALO_R).toFixed(2)}px 0 var(--jade,#dfe9dc)`; }).join(',')); root.style.setProperty('--shadow-scale',SHADOW_SCALE); root.classList.toggle('shadow-flat',!SHADOW_TILTS); const deck=document.createElement('div'); deck.className='ddj-deck'; root.appendChild(deck); const scrub=document.createElement('div'); scrub.className='ddj-scrub'; const sRead=document.createElement('div'); sRead.className='ddj-sread'; const sLeft=document.createElement('div'); sLeft.className='ddj-sleft'; const sHandle=document.createElement('div'); sHandle.className='ddj-shandle'; const sLbl=document.createElement('div'); sLbl.className='ddj-slbl'; scrub.append(sRead,sLeft,sHandle,sLbl); root.appendChild(scrub); const YT_PLAYING=1; const ytCall=(fn,...a)=>{ try{ return player?.[fn]?.(...a); }catch(_){ return undefined; } }; const syncOK=()=>slatSync.n===planks.length; if(!syncOK()) console.warn(`[ddj] slat map has ${slatSync.n} slats but the reader built ${N} planks — audio follow disabled. Regenerate the map.`); const ICON_PLAY=``; const ICON_PAUSE=``; const playBtn=document.createElement('button'); playBtn.className='ddj-strip ddj-play'; playBtn.type='button'; const playIco=document.createElement('span'); playIco.className='ddj-ico'; const playLbl=document.createElement('span'); playLbl.className='ddj-lbl'; playLbl.textContent='Audio'; playBtn.append(playIco,playLbl); function setTransportIcon(on){ playIco.innerHTML=on?ICON_PAUSE:ICON_PLAY; playBtn.setAttribute('aria-label',on?'Pause':'Play'); } const FOLLOW_MS=150; let following=false, followTimer=null; let seekFloor=-1, seekFloorUntil=0; function sizePlayHit(){ const ico=playBtn.querySelector('.ddj-ico')||playBtn; const rr=root.getBoundingClientRect(), br=ico.getBoundingClientRect(), pr=playBtn.getBoundingClientRect(); if(!rr.height||!br.height) return; const cx=(br.left+br.right)/2, cy=(br.top+br.bottom)/2; const bleed=PLAY_HIT_ESCAPES?PLAY_HIT_BLEED:0; let L=cx-rr.left+bleed, B=rr.bottom-cy+bleed, R=PLAY_HIT_MAX, T=cy-pr.top; for(const el of [scrub,...root.querySelectorAll('.ddj-strip')]){ if(el===playBtn) continue; const r=el.getBoundingClientRect(); if(!r.width||!r.height) continue; if(r.left>cx && r.bottom>cy-T && r.topcy && r.right>cx-L && r.leftMath.max(v,11).toFixed(1)+'px'; S.setProperty('--hit-l',px(L)); S.setProperty('--hit-r',px(R)); S.setProperty('--hit-t',px(T)); S.setProperty('--hit-b',px(B)); } const centredSlat=()=> clamp(Math.round(target),0,N-1); function nextTimed(i){ for(let k=clamp(i,0,N-1);k=0;k--) if(slatSync.isRead(k)) return k; return clamp(i,0,N-1); } function playFromCentred(){ if(!syncOK()){ ytCall('playVideo'); return; } const want=centredSlat(), i=nextTimed(want); if(i!==want) go(i); // a seek can land early; do not let follow jerk the deck back seekFloor=i; seekFloorUntil=performance.now()+1200; ytCall('seekTo',slatSync.timeOf(i)+0.08,true); ytCall('playVideo'); } function followTick(){ if(!following||!syncOK()) return; const t=ytCall('getCurrentTime'); if(typeof t!=='number') return; let i=slatSync.slatAt(t); if(performance.now(){ if(owns) reclaimKeys(); },KEY_TICK); } } const onDownAnywhere=e=>ownKeys(root.contains(e.target)); document.addEventListener('pointerdown',onDownAnywhere,true); const typing=t=> !!t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName||'')); const SPACE_MIN_VIS=40; function readerOnScreen(){ if(isFullscreen()) return true; const r=root.getBoundingClientRect(); const vh=window.innerHeight||document.documentElement.clientHeight||0; return Math.min(r.bottom,vh)-Math.max(r.top,0) >= Math.min(SPACE_MIN_VIS,r.height); } function spaceHandler(e){ if(e.key!==' '&&e.code!=='Space') return; if(e.repeat||e.metaKey||e.ctrlKey||e.altKey) return; if(typing(e.target)&&!root.contains(e.target)) return; if(!owns&&!readerOnScreen()) return; const now=performance.now(); if(now-lastSpace<90) return; lastSpace=now; e.preventDefault(); ownKeys(true); toggleTransport(); deferReclaim(); } // capture on window first: the key must be seen before anything on the page can stop it const keyTargets=[window,document,root]; try{ if(window.parent&&window.parent!==window) keyTargets.push(window.parent); }catch(_){ } for(const w of keyTargets){ try{ w.addEventListener('keydown',spaceHandler,true); }catch(_){ } } function toggleTransport(){ holdCancel(); const st=ytCall('getPlayerState'); const on=(st===YT_PLAYING)||(typeof st!=='number'&&wantPlay); if(on){ wantPlay=false; ytCall('pauseVideo'); setTransportIcon(false); } else{ wantPlay=true; playFromCentred(); setTransportIcon(true); } ownKeys(true); } playBtn.addEventListener('click',()=>{ ownKeys(true); toggleTransport(); }); setTransportIcon(false); root.appendChild(playBtn); try{ player?.addEventListener?.('onStateChange',syncTransport); }catch(_){} syncTransport(); const ICON_EXPAND=``; const ICON_CONTRACT=``; const fsBtn=document.createElement('button'); fsBtn.className='ddj-strip ddj-fs'; fsBtn.type='button'; const fsLbl=document.createElement('span'); fsLbl.className='ddj-lbl'; const fsIco=document.createElement('span'); fsIco.className='ddj-ico'; fsBtn.append(fsLbl,fsIco); function setFsIcon(on){ fsIco.innerHTML=on?ICON_CONTRACT:ICON_EXPAND; const t=on?'Exit full screen':'Full screen'; fsLbl.textContent=t; fsBtn.setAttribute('aria-label',t); fsBtn.title=t; } setFsIcon(false); fsBtn.addEventListener('click',()=>{ if(document.fullscreenElement===root) document.exitFullscreen?.(); else (root.requestFullscreen?.()||root.webkitRequestFullscreen?.()); }); root.appendChild(fsBtn); const onFsChange=()=>{ const on=(document.fullscreenElement||document.webkitFullscreenElement)===root; setFsIcon(on); setTimeout(rebuildAll,60); }; document.addEventListener('fullscreenchange',onFsChange); document.addEventListener('webkitfullscreenchange',onFsChange); const countL=document.createElement('div'); countL.className='ddj-count'; countL.style.left='24px'; const countR=document.createElement('div'); countR.className='ddj-count'; countR.style.right='24px'; countR.style.textAlign='right'; root.append(countL,countR); const ctagEls=new Map(); function makeCTag(slat){ const t=document.createElement('div'); t.className='ddj-chap ddj-ctag'; const ch=planks[slat].chapter; t.innerHTML=`第${cnNum(ch)}章CH ${ch}`; t.addEventListener('click',e=>{ e.stopPropagation(); userNav(); go(slat); }); t.style.opacity='0'; root.appendChild(t); return t; } const gloss=document.createElement('div'); gloss.className='ddj-gloss'; root.appendChild(gloss); const tip=document.createElement('div'); tip.className='ddj-tip'; tip.style.display='none'; root.appendChild(tip); let tipReg=null, tipTimer=null, tipRaf=null, tipHideT=null; const TIP_NS='http://www.w3.org/2000/svg'; const tipEdge=document.createElementNS(TIP_NS,'svg'); tipEdge.setAttribute('class','ddj-tip-edge'); const tipEdgePath=document.createElementNS(TIP_NS,'path'); tipEdge.appendChild(tipEdgePath); // Panel and caret as ONE path: it is both the clip and the stroke, so the two cannot disagree. function tipShape(w,h,side,cy){ const len=TIP_CARET>0?TIP_CARET_LEN:0; const r=Math.min(TIP_RADIUS,Math.min(w-len,h)/2); const half=Math.min(TIP_CARET,Math.max(0,(h-2*r)/2)); const x0=side==='l'?len:0, x1=side==='r'?w-len:w; const n=v=>v.toFixed(2); const d=[`M${n(x0+r)},0`,`H${n(x1-r)}`,`A${n(r)},${n(r)} 0 0 1 ${n(x1)},${n(r)}`]; if(side==='r'&&half>0){ d.push(`V${n(cy-half)}`,`L${n(x1+len)},${n(cy)}`,`L${n(x1)},${n(cy+half)}`); } d.push(`V${n(h-r)}`,`A${n(r)},${n(r)} 0 0 1 ${n(x1-r)},${n(h)}`, `H${n(x0+r)}`,`A${n(r)},${n(r)} 0 0 1 ${n(x0)},${n(h-r)}`); if(side==='l'&&half>0){ d.push(`V${n(cy+half)}`,`L${n(x0-len)},${n(cy)}`,`L${n(x0)},${n(cy-half)}`); } d.push(`V${n(r)}`,`A${n(r)},${n(r)} 0 0 1 ${n(x0+r)},0`,'Z'); return d.join(' '); } const tipEsc=s=>String(s??'').replace(/[&<>]/g,m=>({'&':'&','<':'<','>':'>'}[m])); const TIP_HAN=/\p{Script=Han}+/gu; const tipTxt=s=>tipEsc(s).replace(TIP_HAN,m=>''+m+''); const TIP_TONE='āáǎàēéěèīíǐìōóǒòūúǔùǖǘǚǜüńňǹ'; const TIP_LAT='A-Za-zü'+TIP_TONE; const TIP_NOTE=/\s*$\s*(sound|meaning|sense)([^)]*)$\s*$/i; const TIP_PY=new RegExp('^(['+TIP_LAT+']+(?:\\s*/\\s*['+TIP_LAT+']+)*)(?=[,:;]|$)'); const TIP_PY2=new RegExp('['+TIP_LAT+']*['+TIP_TONE+']['+TIP_LAT+']*(?:\\s*[→/]\\s*['+TIP_LAT+']+)*'); const tipTone=s=>[...s].some(ch=>TIP_TONE.includes(ch)); function tipPart(c){ let body=String(c.m||''), role=c.role||'', extra=''; const m=body.match(TIP_NOTE); if(m){ body=body.slice(0,m.index); extra=m[2]||''; role=(m[1].toLowerCase()==='sound') ? (/\band\s+(sense|meaning)\b/i.test(extra)?'both':'phonetic') : 'semantic'; } body=body.trim(); if(role==='phonetic'){ const g=body.match(TIP_PY); if(g&&tipTone(g[1])) return {c:c.c,role,text:g[1],py:true}; const e=extra.match(TIP_PY2); if(e) return {c:c.c,role,text:e[0].trim(),py:true}; } return {c:c.c,role,text:body,py:false}; } function tipHTML(ch,py){ const b=BREAK[ch]; let h='

'+tipEsc(py||'')+'

' +'

'; if(b&&b.meaning) h+='

'+tipTxt(b.meaning)+'

'; h+='

'; if(!b) return h; h+='

' +'

'+tipEsc(ch)+'

'; if(b.formation) h+='

'+tipTxt(b.formation)+'

'; h+='

'; const comps=(b.components||[]).filter(c=>c&&c.c).map(tipPart); if(comps.length){ h+='

'; for(const p of comps){ h+='

'+tipEsc(p.c)+'

' +'

' +tipTxt(p.text)+'

'; if(p.role==='phonetic') h+='

'+tipEsc(TIP_SOUND)+'

'; h+='

'; } h+='

'; } return h; } function placeTip(reg){ if(!reg.isConnected){ hideTip(); return; } const rr=root.getBoundingClientRect(), r=reg.getBoundingClientRect(); const availL=(r.left-rr.left)-TIP_GAP-TIP_MARGIN; const ap=planks[activeIdx]; const xR=Math.max(r.right-rr.left, (ap&&ap._x!=null)?ap._x+plankW+14+(ap._glossW||0):0)+TIP_GAP; const availR=rr.width-TIP_MARGIN-xR; const onLeft=availL>=TIP_MIN||availL>=availR; tip.classList.toggle('tip-caret-r',onLeft&&TIP_CARET>0); tip.classList.toggle('tip-caret-l',!onLeft&&TIP_CARET>0); tip.style.maxWidth=Math.min(Math.max(onLeft?availL:availR,TIP_MIN),TIP_MAX)+'px'; tip.style.maxHeight=Math.max(rr.height-TIP_MARGIN*2,90)+'px'; const tw=tip.offsetWidth, th=tip.offsetHeight; let x=onLeft ? (r.left-rr.left)-TIP_GAP-tw : xR; x=clamp(x,TIP_MARGIN,Math.max(TIP_MARGIN,rr.width-TIP_MARGIN-tw)); let y=(r.top+r.bottom)/2-rr.top-th/2; y=clamp(y,TIP_MARGIN,Math.max(TIP_MARGIN,rr.height-TIP_MARGIN-th)); x=Math.round(x); y=Math.round(y); tip.style.transform=`translate3d(${x}px,${y}px,0)`; const gy=(r.top+r.bottom)/2-rr.top-y; const lo=TIP_RADIUS+TIP_CARET, hi=Math.max(lo,th-TIP_RADIUS-TIP_CARET); const d=tipShape(tw,th,onLeft?'r':'l',clamp(gy,lo,hi)); tip.style.clipPath=`path("${d}")`; tip.style.webkitClipPath=`path("${d}")`; tipEdge.setAttribute('width',tw); tipEdge.setAttribute('height',th); tipEdgePath.setAttribute('d',d); } function showTip(reg,ch,py){ tipReg=reg; clearTimeout(tipTimer); clearTimeout(tipHideT); tipTimer=setTimeout(()=>{ if(tipReg!==reg) return; tip.innerHTML=tipHTML(ch,py); tip.appendChild(tipEdge); tip.style.display='block'; placeTip(reg); if(tipRaf) cancelAnimationFrame(tipRaf); tipRaf=requestAnimationFrame(()=>{ tipRaf=null; if(tipReg===reg) tip.classList.add('show'); }); },TIP_DELAY); } function hideTip(){ tipReg=null; clearTimeout(tipTimer); if(tipRaf){ cancelAnimationFrame(tipRaf); tipRaf=null; } if(tip.classList.contains('show')){ tip.classList.remove('show'); clearTimeout(tipHideT); tipHideT=setTimeout(()=>{ if(!tipReg) tip.style.display='none'; },200); }else{ tip.style.display='none'; } } const toast=document.createElement('div'); toast.className='ddj-toast'; root.appendChild(toast); let W=0,H=0, plankW=54, charSize=46, S=76, ACT_X=.46, BULGE=12, TOP_Y=64, LOOKL=7, LOOKR=4, PILE_LX=0, PILE_RX=0; const PILE_ACTIVE=22, PILE_BLEND=1.7; const cssPx=(name,fallback)=>{ const v=parseFloat(getComputedStyle(root).getPropertyValue(name)); return isFinite(v)?v:fallback; }; const TAG_H=46; const JIT=5; const TOP_FS_PAD=10; const FS_GAP=2; const FS_EXTRA=20; const CS_MAX=200; const TITLE_SLATS=4; const titlePadY=()=> Math.round(charSize*.55); const titleH=()=> Math.round(charSize*TITLE_ROWS*1.05+titlePadY()*2); const titleRowsAt=k=> Math.max(3,TITLE_ROWS-(TITLE_TRIM[k]||0)); const titleHAt=k=> Math.round(charSize*titleRowsAt(k)*1.05+titlePadY()*2); const titleHMax=()=>{ let m=0; for(let k=0;km) m=d; } for(let k=0;km) m=d; } return m; } function fitCharSize(avail,lo,hi){ const all=planks.map((p,i)=>i); let cs=clamp(Math.round((lo+hi)/2),lo,hi); charSize=cs; measureSetup(); let maxD=deepestAt(all); const cand=all.filter(i=>planks[i]._geom&&planks[i]._geom.h>maxD*0.85); for(let i=0;i<8&&maxD>0;i++){ const next=clamp(Math.floor(cs*avail/maxD),lo,hi); if(next===cs) break; cs=next; charSize=cs; measureSetup(); maxD=deepestAt(cand); } for(let i=0;i<12&&cs>lo&&maxD>avail;i++){ cs--; charSize=cs; measureSetup(); maxD=deepestAt(cand); } for(let i=0;i<12&&csavail) break; cs++; } let a=cs, b=Math.min(cs+1,hi); for(let i=0;i<7;i++){ const mid=(a+b)/2; charSize=mid; measureSetup(); if(deepestAt(cand)<=avail) a=mid; else b=mid; } charSize=a; measureSetup(); return a; } function rowTopPx(){ const rr=root.getBoundingClientRect(), sr=scrub.getBoundingClientRect(); if(!rr.height||!sr.height) return null; return sr.top-rr.top; } function tagTopPx(){ for(const el of ctagEls.values()){ const h=el.offsetHeight; if(h) return h+8; } return TAG_H; } function computeSizes(){ const fs=isFullscreen(); W=root.clientWidth; let maxLen=4; for(const p of planks) maxLen=Math.max(maxLen,p.chars.length); const padY=cssPx('--pad-y',8); const rowH=cssPx('--row-h',30); TOP_Y = fs ? tagTopPx()+JIT+TOP_FS_PAD : 160; if(fs){ H=root.clientHeight||640; const floor=rowTopPx() ?? (H-padY-rowH); const avail=Math.max(floor-FS_GAP+FS_EXTRA-TOP_Y,120); charSize=fitCharSize(avail,22,CS_MAX); }else{ const refH=clamp((window.innerHeight||800)-40,360,1500); const cs0=Math.floor(clamp((refH-TOP_Y-56)/(maxLen*1.22+1.1),22,46)); charSize=Math.round(Math.round(clamp(cs0*1.16,34,56))*.97); } plankW=Math.round(charSize*0.95); S=plankW+Math.round(charSize*.38); const EDGE=36; PILE_LX=EDGE+plankW/2; PILE_RX=W-EDGE-plankW/2; const MINCOL=88, MAXCOL=Math.min(260,Math.round(W*.34)), OFF=20; const GROUP_CAP=clamp(Math.round(W*0.20),130,190); const nomGloss=clamp(MAXCOL,120,200); const nomGap=nomGloss+plankW*1.2+OFF; ACT_X=clamp((W+plankW*0.5-nomGap+S)/(2*Math.max(W,1)),0.30,0.46); mCtx.font=GLOSS_SIZE+'px '+SERIF_STACK; for(let i=0;i({en:u.en, grp:u.to>u.from})) : p.chars.map(c=>({en:c.g, grp:false})); let singleW=0, groupW=0; for(const u of us){ const w=mCtx.measureText(u.en||'').width; if(u.grp) groupW=Math.max(groupW,w); else singleW=Math.max(singleW,w); } const base=Math.max(singleW, Math.min(groupW, GROUP_CAP)); p._glossW=clamp(Math.round(base)+10,MINCOL,MAXCOL); p._gap=Math.round(p._glossW+plankW*1.2+OFF); } BULGE=12; measureSetup(); if(!fs){ let maxH=0; for(const p of planks){ p._geomSize=-1; const g=plankGeom(p); if(g.h>maxH) maxH=g.h; } maxH=Math.max(maxH,titleHMax()); const cellH=Math.min(Math.ceil(TOP_Y+maxH+40),1500); if(root.style.height!==cellH+'px') root.style.height=cellH+'px'; H=cellH; } } const mCanvas=document.createElement('canvas'); const mCtx=mCanvas.getContext('2d',{willReadFrequently:true}); let metricCache=new Map(), baselineInBox=charSize*.88; function measureSetup(){ metricCache.clear(); mCanvas.width=Math.ceil(charSize*2); mCanvas.height=Math.ceil(charSize*2.2); mCtx.font=charSize+'px '+SEAL_STACK; mCtx.textBaseline='alphabetic'; const ref=mCtx.measureText('道'); const fa=ref.fontBoundingBoxAscent??charSize*.88, fd=ref.fontBoundingBoxDescent??charSize*.12; baselineInBox=(charSize-(fa+fd))/2+fa; } function glyphInk(ch){ let m=metricCache.get(ch); if(m) return m; const y0=Math.round(charSize*1.3), x0=Math.round(charSize*.4); mCtx.clearRect(0,0,mCanvas.width,mCanvas.height); mCtx.fillText(ch,x0,y0); const img=mCtx.getImageData(0,0,mCanvas.width,mCanvas.height).data; const Wc=mCanvas.width,Hc=mCanvas.height,rows=new Float32Array(Hc); let total=0; for(let y=0;y=th){topE=y;break;} } acc=0; for(let y=Hc-1;y>=0;y--){ acc+=rows[y]; if(acc>=th){botE=y;break;} } a=y0-topE; d=botE-y0; } m={t:baselineInBox-a, b:baselineInBox+d}; metricCache.set(ch,m); return m; } function plankGeom(p){ if(p._geomSize===charSize) return p._geom; const padY=Math.round(charSize*.55), items=[]; let h; if(p.group){ const pitch=charSize*1.18; p.chars.forEach((c,i)=>{ const ink=glyphInk(c.c), ih=ink.b-ink.t, slotTop=padY+i*pitch; items.push({top:slotTop+(pitch-ih)/2-ink.t, cy:slotTop+pitch/2}); }); h=padY*2+p.chars.length*pitch; }else{ const gap=charSize*.24; let y=padY; p.chars.forEach(c=>{ const ink=glyphInk(c.c), ih=Math.max(ink.b-ink.t,charSize*.28); items.push({top:y-ink.t, cy:y+ih/2}); y+=ih+gap; }); h=y-gap+padY; } p._geom={items,h}; p._geomSize=charSize; return p._geom; } const GRAIN=[]; for(let s=0;s<9;s++){ const svg=``; GRAIN.push(`url("data:image/svg+xml,${encodeURIComponent(svg)}")`); } function bambooStyle(i,el){ const r=k=>prand(i*7.31+k*13.7); const hu=33+(r(1)-.5)*9, sa=34+(r(2)-.5)*12, L=63+(r(3)-.5)*17; const base=`linear-gradient(90deg, hsl(${hu} ${sa}% ${L-7}%) 0%, hsl(${hu} ${sa}% ${L-2}%) 8%, hsl(${hu} ${sa+4}% ${L+5}%) 32%, hsl(${hu} ${sa+2}% ${L+2}%) 52%, hsl(${hu} ${sa+4}% ${L+4}%) 70%, hsl(${hu} ${sa}% ${L-3}%) 92%, hsl(${hu} ${sa}% ${L-7}%) 100%)`; const grain=GRAIN[Math.floor(r(4)*GRAIN.length)%GRAIN.length]; const stain=(w,h,x,y,a)=>`radial-gradient(${w}% ${h}% at ${x}% ${y}%, hsl(${hu} 30% ${L-16}% / ${a}), transparent 72%)`; const mottle=[ stain(70,14,r(7)*100,10+r(8)*80,.09+r(9)*.06), stain(55,10,r(10)*100,10+r(11)*80,.07+r(12)*.05), stain(80,7,r(13)*100,10+r(14)*80,.06) ].join(','); el.style.background=[grain,mottle,base].join(','); el.style.backgroundSize='100% 100%'; el.style.backgroundRepeat='no-repeat'; } const SVGNS='http://www.w3.org/2000/svg'; function ringGeom(w){ const m=RING_MOTIF; const size=RING_TRACK ? clamp(RING_SIZE*w/RING_REF_W,RING_MIN,RING_MAX) : RING_SIZE; const f=size/RING_SIZE; const k=size/m.vb; const sw=size*RING_STROKE; const rail=m.rail*k; const deep=m.deep*k+sw/2; const inset=RING_KEEP_CLEAR ? Math.max(RING_GAP*f, deep-rail+RING_CLEAR*f) : RING_GAP*f; return {size,k,sw,rail,inset,pad:inset+rail}; } function makeRing(w,h){ const g=ringGeom(w), M=g.sw+1; const CW=w+2*g.pad+2*M, CH=h+2*g.pad+2*M; const svg=document.createElementNS(SVGNS,'svg'); svg.setAttribute('class','ddj-ring'); svg.setAttribute('width',CW.toFixed(2)); svg.setAttribute('height',CH.toFixed(2)); svg.setAttribute('viewBox',`0 0 ${CW.toFixed(2)} ${CH.toFixed(2)}`); svg.setAttribute('aria-hidden','true'); svg.style.left=svg.style.top=(-(g.pad+M)).toFixed(2)+'px'; const box=document.createElementNS(SVGNS,'g'); box.setAttribute('fill','none'); box.setAttribute('stroke','var(--ring-ink)'); box.setAttribute('stroke-linecap','butt'); box.setAttribute('stroke-linejoin','miter'); box.setAttribute('stroke-miterlimit','10'); svg.appendChild(box); const x0=M, y0=M, x1=CW-M, y1=CH-M, s=g.size, r=g.rail; const rail=(ax,ay,bx,by)=>{ if((bx-ax)+(by-ay)<0.5) return; const l=document.createElementNS(SVGNS,'line'); l.setAttribute('x1',ax.toFixed(2)); l.setAttribute('y1',ay.toFixed(2)); l.setAttribute('x2',bx.toFixed(2)); l.setAttribute('y2',by.toFixed(2)); l.setAttribute('stroke-width',g.sw.toFixed(2)); box.appendChild(l); }; rail(x0+s, y0+r, x1-s, y0+r); rail(x0+s, y1-r, x1-s, y1-r); rail(x0+r, y0+s, x0+r, y1-s); rail(x1-r, y0+s, x1-r, y1-s); const c=(s/2).toFixed(2); [[x0,y0,0],[x1-s,y0,90],[x1-s,y1-s,180],[x0,y1-s,270]].forEach(([X,Y,rot])=>{ const p=document.createElementNS(SVGNS,'path'); p.setAttribute('d',RING_MOTIF.d); p.setAttribute('stroke-width',(g.sw/g.k).toFixed(3)); p.setAttribute('transform', `translate(${X.toFixed(2)},${Y.toFixed(2)}) rotate(${rot},${c},${c}) scale(${g.k.toFixed(5)})`); box.appendChild(p); }); return svg; } function makeRingFill(w,h){ const g=ringGeom(w), d=document.createElement('div'); d.className='ddj-rfill'; d.style.left=d.style.top=(-g.inset).toFixed(2)+'px'; d.style.width=(w+2*g.inset).toFixed(2)+'px'; d.style.height=(h+2*g.inset).toFixed(2)+'px'; return d; } const live=new Map(); function makePlank(i){ const p=planks[i], g=plankGeom(p); const el=document.createElement('div'); el.className='ddj-plank'; el.dataset.i=i; el.style.width=plankW+'px'; el.style.height=g.h+'px'; const body=document.createElement('div'); body.className='ddj-body'; body.style.width=plankW+'px'; body.style.height=g.h+'px'; const hc=s=>(3.5+prand(i*5.31+s)*4.5).toFixed(1); const radius=`${hc(1)}px ${hc(2)}px ${hc(3)}px ${hc(4)}px / ${hc(5)*1.5}px ${hc(6)*1.5}px ${hc(7)*1.5}px ${hc(8)*1.5}px`; body.style.borderRadius=radius; el.style.borderRadius=radius; bambooStyle(i,body); const uOf=ci=>{ if(!p.units) return ci; for(let k=0;k=p.units[k].from&&ci<=p.units[k].to) return k; return 0; }; p.chars.forEach((c,ci)=>{ const sp=document.createElement('span'); sp.className='ddj-ch'; sp.textContent=c.c; sp.dataset.ci=ci; sp.dataset.ui=uOf(ci); sp.style.fontSize=charSize+'px'; sp.style.top=g.items[ci].top+'px'; body.appendChild(sp); }); { const cys=g.items.map(it=>it.cy), n=cys.length; const bound=k=>{ if(k<=0) return cys[0]-((n>1?cys[1]-cys[0]:charSize))/2; if(k>=n) return cys[n-1]+((n>1?cys[n-1]-cys[n-2]:charSize))/2; return (cys[k-1]+cys[k])/2; }; p.chars.forEach((c,ci)=>{ const top=bound(ci), reg=document.createElement('div'); reg.className='ddj-region'; reg.dataset.ci=ci; reg.dataset.ui=uOf(ci); reg.dataset.char=c.c; reg.style.top=top+'px'; reg.style.height=(bound(ci+1)-top)+'px'; reg.addEventListener('pointerenter',e=>{ if(i!==activeIdx) return; pairHL(i,+reg.dataset.ui,true,+reg.dataset.ci); if(e.pointerType==='mouse'&&!dragging) showTip(reg,c.c,c.py); }); reg.addEventListener('pointerleave',()=>{ if(i===activeIdx) pairHL(i,+reg.dataset.ui,false,+reg.dataset.ci); hideTip(); }); body.appendChild(reg); }); } const fog=document.createElement('div'); fog.className='ddj-fog'; body.appendChild(fog); const sheen=document.createElement('div'); sheen.className='ddj-sheen'; body.appendChild(sheen); body.appendChild(makeRing(plankW,g.h)); el.appendChild(makeRingFill(plankW,g.h)); el.appendChild(body); attachPlankEvents(el,body); deck.appendChild(el); return el; } const TITLE_CHARS=['道','德','經']; let titleEls=[]; function buildTitle(){ titleEls.forEach(e=>e.remove()); titleEls=[]; const padY=titlePadY(), hFull=titleH(); const blockW=plankW*TITLE_SLATS; const pitch=(hFull-padY*2)/TITLE_CHARS.length; const big=Math.round(Math.min(blockW*0.92, pitch*0.96)); for(let k=0;k(3.5+prand(i*5.31+s)*4.5).toFixed(1); const radius=`${hc(1)}px ${hc(2)}px ${hc(3)}px ${hc(4)}px / ${hc(5)*1.5}px ${hc(6)*1.5}px ${hc(7)*1.5}px ${hc(8)*1.5}px`; body.style.borderRadius=radius; el.style.borderRadius=radius; bambooStyle(i,body); const clip=document.createElement('div'); clip.className='ddj-tclip'; const strip=document.createElement('div'); strip.className='ddj-tstrip'; strip.style.width=blockW+'px'; strip.style.left=(-k*plankW)+'px'; TITLE_CHARS.forEach((c,ci)=>{ const sp=document.createElement('span'); sp.className='ddj-tch'; sp.textContent=c; sp.style.fontSize=big+'px'; sp.style.left=`calc(50% + ${(big*TITLE_DX).toFixed(1)}px)`; sp.style.top=Math.round(padY+ci*pitch+(pitch-big)/2)+'px'; strip.appendChild(sp); }); clip.appendChild(strip); body.appendChild(clip); const fog=document.createElement('div'); fog.className='ddj-fog'; body.appendChild(fog); const sheen=document.createElement('div'); sheen.className='ddj-sheen'; body.appendChild(sheen); body.appendChild(makeRing(plankW,h)); el.appendChild(makeRingFill(plankW,h)); el.appendChild(body); attachPlankEvents(el,body); deck.appendChild(el); titleEls.push(el); } } let pos=0, target=0, raf=null, activeIdx=-1, dragging=false; let Eoff=null, lastPosE=0, EtargetLast=0; const MIN_ADV=20; function pileXY(i,depth,leftSide){ const dd=Math.min(depth,PILE_ACTIVE); return { x:(leftSide?PILE_LX+dd*.9:PILE_RX-dd*.9)+(prand(i*1.71)-.5)*6, y:TOP_Y+(prand(i*2.13)-.5)*9+dd*.5, rot:(prand(i*3.77)-.5)*4, z:Math.max(3,200-Math.round(dd*9)) }; } const shadowFor=depth=> (1-smooth(clamp(depth/13,0,1))); const FOG0=6, FOGTAU=4.5, FOGMAX=20, FOGNORM=1-Math.exp(-(FOGMAX-FOG0)/FOGTAU); function fogFor(depth){ if(depth<=FOG0) return 0; if(depth>=FOGMAX) return 1; return Math.min(1,(1-Math.exp(-(depth-FOG0)/FOGTAU))/FOGNORM); } let prevLo=0, prevHi=-1; function layout(){ const a=clamp(Math.round(pos),0,N-1); if(a!==activeIdx) setActive(a); const center=W*ACT_X; const A=clamp(Math.floor(pos),0,N-1); const gHead=lerp(planks[A]._gap||S, (planks[A+1]?planks[A+1]._gap:planks[A]._gap)||S, clamp(pos-A,0,1)); const Etarget=Math.max(gHead-S,0); EtargetLast=Etarget; if(Eoff===null) Eoff=Etarget; else if(Etarget>=Eoff){ Eoff+=(Etarget-Eoff)*(reduced?1:0.32); }else{ // rate-limited so the read pile can never slide backwards const dp=pos-lastPosE; const lim=Math.max(S-MIN_ADV,0)*Math.abs(dp); Eoff+=clamp(Etarget-Eoff,-lim,0); } lastPosE=pos; const E=Eoff, curGap=S+E; LOOKL=clamp(Math.floor((center-PILE_LX-plankW*0.5)/S),0,40); LOOKR=clamp(Math.floor((PILE_RX-center-curGap)/S)+1,0,30); const lo=Math.max(0,Math.floor(pos)-(LOOKR+PILE_ACTIVE+2)); const hi=Math.min(N-1,Math.ceil(pos)+(LOOKL+PILE_ACTIVE+2)); for(let i=prevLo;i=0&&!live.has(hoverIdx)){ hoverIdx=-1; holdSync(); } for(let i=lo;i<=hi;i++){ const p=planks[i], d=i-pos; let el=live.get(i); if(!el){ el=makePlank(i); live.set(i,el); } let x = center - d*S + E*smooth(clamp(-d,0,1)); x-=BULGE*1.5*d*Math.exp(-(d*d)/2.4); const rowX=x; let y=TOP_Y+jitY(i); let rot=(prand(i+7.7)-.5)*4*clamp(Math.abs(d),0,1); let z=320-Math.round(Math.abs(d)*8); const rDepth=(rowX-PILE_RX)/S, lDepth=(PILE_LX-rowX)/S; const depth=Math.max(lDepth,rDepth); let sh=1, fog=0; if(depth>0){ const tt=smooth(clamp(depth/PILE_BLEND,0,1)); const leftSide=lDepth>rDepth; const s=pileXY(i,depth,leftSide); const rowXc=leftSide?Math.max(rowX,PILE_LX):Math.min(rowX,PILE_RX); x=lerp(rowXc,s.x,tt); y=lerp(y,s.y,tt); rot=lerp(rot,s.rot,tt); z=Math.round(lerp(z,s.z,tt)); sh=shadowFor(depth); fog=fogFor(depth); } const van=fog<=.72?0:smooth(clamp((fog-.72)/.28,0,1)); const jx=(prand(i+13.9)-.5)*5; el.style.setProperty('--fog',fog.toFixed(2)); el.style.setProperty('--vanish',van.toFixed(2)); el.style.setProperty('--sh',sh.toFixed(2)); el.style.zIndex=String(z); el.style.transform=`translate3d(${(x+jx-plankW/2).toFixed(1)}px,${y.toFixed(1)}px,0) rotate(${rot.toFixed(2)}deg)`; el.classList.toggle('is-active',i===a); p._x=x+jx-plankW/2; p._y=y; p._fog=fog; } for(const el of titleEls){ const i=+el.dataset.i, d=i-pos; let x = center - d*S + E*smooth(clamp(-d,0,1)); x-=BULGE*1.5*d*Math.exp(-(d*d)/2.4); const rowX=x; let y=TOP_Y+jitY(i); let rot=(prand(i+7.7)-.5)*4*clamp(Math.abs(d),0,1); let z=320-Math.round(Math.abs(d)*8); const rDepth=(rowX-PILE_RX)/S, lDepth=(PILE_LX-rowX)/S; const depth=Math.max(lDepth,rDepth); let sh=1, fog=0; if(depth>0){ const tt=smooth(clamp(depth/PILE_BLEND,0,1)); const leftSide=lDepth>rDepth; const s=pileXY(i,depth,leftSide); const rowXc=leftSide?Math.max(rowX,PILE_LX):Math.min(rowX,PILE_RX); x=lerp(rowXc,s.x,tt); y=lerp(y,s.y,tt); rot=lerp(rot,s.rot,tt); z=Math.round(lerp(z,s.z,tt)); sh=shadowFor(depth); fog=fogFor(depth); } const van=fog<=.72?0:smooth(clamp((fog-.72)/.28,0,1)); const jx=(prand(i+13.9)-.5)*5; el.style.setProperty('--fog',fog.toFixed(2)); el.style.setProperty('--vanish',van.toFixed(2)); el.style.setProperty('--sh',sh.toFixed(2)); el.style.zIndex=String(z); el.style.transform=`translate3d(${(x+jx-plankW/2).toFixed(1)}px,${y.toFixed(1)}px,0) rotate(${rot.toFixed(2)}deg)`; } updateChapterTags(); updateScrubber(); positionGloss(a); if(tipReg&&tip.classList.contains('show')) placeTip(tipReg); } function slatAnchor(i){ const center=W*ACT_X, E=Eoff||0, d=i-pos; let x=center - d*S + E*smooth(clamp(-d,0,1)); x-=BULGE*1.5*d*Math.exp(-(d*d)/2.4); const rowX=x; let y=TOP_Y+jitY(i); const rDepth=(rowX-PILE_RX)/S, lDepth=(PILE_LX-rowX)/S; const depth=Math.max(lDepth,rDepth), leftSide=lDepth>rDepth; if(depth>0){ const tt=smooth(clamp(depth/PILE_BLEND,0,1)); const s=pileXY(i,depth,leftSide); const rowXc=leftSide?Math.max(rowX,PILE_LX):Math.min(rowX,PILE_RX); x=lerp(rowXc,s.x,tt); y=lerp(y,s.y,tt); } const jx=(prand(i+13.9)-.5)*5; return {cx:x+jx, top:y, depth, leftSide}; } function updateChapterTags(){ const cand=[], L=[], R=[]; let dL=Infinity, dR=Infinity; for(const slat of chapStarts){ const a=slatAnchor(slat); a.slat=slat; cand.push(a); if(a.depth>0) (a.leftSide?L:R).push(a); else if(a.leftSide) dL=Math.min(dL,-a.depth); else dR=Math.min(dR,-a.depth); } const visible=new Set(); for(const a of cand) if(a.depth<=0) visible.add(a); for(const arr of [L,R]){ if(!arr.length) continue; let front=arr[0]; for(const a of arr) if(a.deptha.depth-b.depth); const kept=[], finalVis=new Set(); for(const a of order){ // a tag on a pile is exempt from the cull so it can fade rather than vanish if(a.depth<=0 && kept.some(k=>Math.abs(k.cx-a.cx)0 ? clamp((a.leftSide?dL:dR)/TAG_FADE_SLATS,0,1) : 1; el.style.transform=`translate(${a.cx.toFixed(1)}px,${(a.top-8).toFixed(1)}px) translate(-50%,-100%)`; el.style.opacity=fade.toFixed(3); el.style.pointerEvents=fade>0.05?'auto':'none'; el.style.zIndex=String(56-Math.round(clamp(a.depth,0,18))); } } const hlSet=new Set(); function setActive(a){ activeIdx=a; hideTip(); updateCounts(a); if(hlSet.size){ for(const e of hlSet) e.classList.remove('hl'); hlSet.clear(); } live.forEach(el=>el.classList.remove('pp-partner')); const gp=planks[a].groupIdx; if(gp&&PARTNER_MARK) gp.forEach(ix=>{ if(ix!==a) live.get(ix)?.classList.add('pp-partner'); }); buildGloss(a); positionGloss(a); holdSync(); } function buildGloss(a){ const p=planks[a], g=plankGeom(p), gw=p._glossW||160; gloss.innerHTML=''; const items=[]; const units=p.units||p.chars.map((c,ci)=>({from:ci,to:ci,en:c.g,note:''})); units.forEach((u,ui)=>{ const it=document.createElement('div'); it.className='ddj-gitem'; it.dataset.ui=ui; if(u.to>u.from) it.classList.add('ddj-multi'); it.style.width=gw+'px'; const en=document.createElement('div'); en.className='ddj-gen'; en.textContent=u.en; it.appendChild(en); if(u.note){ const nt=document.createElement('div'); nt.className='ddj-gnote'; nt.textContent=u.note; it.appendChild(nt); } const cy=(g.items[u.from].cy+g.items[u.to].cy)/2; it.style.top=cy+'px'; it.dataset.cy=cy; it.addEventListener('mouseenter',()=>pairHL(a,ui,true)); it.addEventListener('mouseleave',()=>pairHL(a,ui,false)); gloss.appendChild(it); items.push(it); }); requestAnimationFrame(()=>{ const Hh=items.map(it=>it.offsetHeight); const Cc=items.map(it=>parseFloat(it.dataset.cy)); const tops=[]; let prevBot=-1e9; for(let k=0;k{ it.style.top=(tops[k]+Hh[k]/2+shift)+'px'; }); }); } function positionGloss(a){ const p=planks[a]; if(!p||p._x==null) return; gloss.style.transform=`translate3d(${p._x+plankW+14}px,${p._y}px,0)`; gloss.style.opacity=clamp(1-Math.abs(pos-a)*1.7,0,1).toFixed(2); } function pairHL(a,ui,on,ci){ const el=live.get(a); if(!el) return; const sel=(ci==null)?`.ddj-ch[data-ui="${ui}"]`:`.ddj-ch[data-ci="${ci}"]`; el.querySelectorAll(sel).forEach(ch=>{ ch.classList.toggle('hl',on); on?hlSet.add(ch):hlSet.delete(ch); }); gloss.querySelector(`.ddj-gitem[data-ui="${ui}"]`)?.classList.toggle('hl',on); } function updateCounts(a){ const ahead=N-1-a, read=a; countL.textContent=ahead>0?ahead+' ahead':''; countR.textContent=read>0?read+' read':''; } let scrubSegs=[]; function buildScrubber(){ scrub.querySelectorAll('.ddj-seg').forEach(e=>e.remove()); scrubSegs=[]; for(let k=0;k Math.max(scrub.clientWidth-HANDLE_D,0); const handleX=f=> HANDLE_R+f*handleTravel(); function updateScrubber(){ const f=clamp(pos/Math.max(N-1,1),0,1), pct=f*100; sHandle.style.left=handleX(f).toFixed(1)+'px'; sRead.style.width=pct+'%'; sLeft.style.width=Math.max(100-pct-.4,0)+'%'; for(const s of scrubSegs){ const f=clamp((pos-s.from+.5)/(s.to-s.from+1),0,1), fq=Math.round(f*50)/50; if(s.last!==fq){ s.fill.style.width=(fq*100)+'%'; s.last=fq; } } } (function scrubEvents(){ let down=false; scrub.addEventListener('pointerenter',()=>scrub.classList.add('hov')); scrub.addEventListener('pointerleave',()=>scrub.classList.remove('hov')); const frac=e=>{ const r=scrub.getBoundingClientRect(); return clamp((e.clientX-r.left-HANDLE_R)/Math.max(r.width-HANDLE_D,1),0,1); }; const label=f=>{ const idx=Math.round(f*(N-1)); let ch=1; for(let k=chapStarts.length-1;k>=0;k--) if(idx>=chapStarts[k]){ ch=planks[chapStarts[k]].chapter; break; } sLbl.textContent='CH '+ch; const half=sLbl.offsetWidth/2, x0=scrub.offsetLeft, cw=root.clientWidth; const lo=half+LBL_EDGE-x0, hi=Math.max(cw-half-LBL_EDGE-x0,lo); sLbl.style.left=clamp(handleX(f),lo,hi).toFixed(1)+'px'; }; scrub.addEventListener('pointerdown',e=>{ e.stopPropagation(); e.preventDefault(); userNav(); down=true; scrub.classList.add('scrubbing'); deck.classList.add('dragging'); dragging=true; gliding=false; if(raf){ cancelAnimationFrame(raf); raf=null; } try{ scrub.setPointerCapture(e.pointerId); }catch(_){} const f=frac(e); pos=target=f*(N-1); label(f); layout(); }); scrub.addEventListener('pointermove',e=>{ if(!down){ label(frac(e)); return; } const f=frac(e); pos=target=f*(N-1); label(f); if(!dragRaf) dragRaf=requestAnimationFrame(()=>{ dragRaf=null; if(dragging) layout(); }); }); const end=()=>{ if(!down) return; down=false; scrub.classList.remove('scrubbing'); deck.classList.remove('dragging'); dragging=false; go(Math.round(pos)); }; scrub.addEventListener('pointerup',end); scrub.addEventListener('pointercancel',end); })(); let gliding=false, glideRate=0; function go(t){ gliding=false; target=clamp(Math.round(t),0,N-1); if(Math.abs(target-pos)>60) pos=target-Math.sign(target-pos)*12; kick(); } function glide(vpf){ const dist=vpf/0.045; target=clamp(Math.round(pos+clamp(dist,-70,70)),0,N-1); const d=target-pos; if(Math.abs(d)<0.5){ gliding=false; kick(); return; } glideRate=clamp(Math.abs(vpf/d),0.048,0.2); gliding=true; kick(); } function kick(){ if(!raf&&!dragging) raf=requestAnimationFrame(tick); } function tick(){ raf=null; const d=target-pos; const posDone=Math.abs(d)<0.002; if(posDone) pos=target; else pos+=d*(gliding?glideRate:(reduced?.5:.17)); layout(); const eOpening=(EtargetLast-Eoff)>0.5; if(posDone&&!eOpening){ gliding=false; return; } raf=requestAnimationFrame(tick); } let wheelTimer=null; root.addEventListener('wheel',e=>{ if(!isFullscreen()) return; e.preventDefault(); userNav(); const dv=(Math.abs(e.deltaY)>=Math.abs(e.deltaX)?e.deltaY:e.deltaX); if(gliding){ gliding=false; target=Math.round(pos); } target=clamp(target+dv/130,0,N-1); kick(); clearTimeout(wheelTimer); wheelTimer=setTimeout(()=>{ const dir=Math.sign(target-pos); let land=Math.round(target); if(dir>0) land=Math.max(land,Math.ceil(pos-.02)); else if(dir<0) land=Math.min(land,Math.floor(pos+.02)); go(land); },120); },{passive:false}); const inControlBand=y=>[scrub,playBtn,fsBtn].some(el=>{ const r=el.getBoundingClientRect(); return y>=r.top&&y<=r.bottom; }); let pDown=null, dragRaf=null; deck.addEventListener('pointerdown',e=>{ if(e.button===2) return; if(inControlBand(e.clientY)) return; userNav(); const onPlank=e.target.closest('.ddj-plank'); if(raf){ cancelAnimationFrame(raf); raf=null; } gliding=false; target=pos; pDown={x:e.clientX,y:e.clientY,plank:onPlank,startPos:pos,moved:false,scrub:false, lastX:e.clientX,lastT:performance.now(),pid:e.pointerId, samples:[{t:performance.now(),x:e.clientX}]}; }); deck.addEventListener('pointermove',e=>{ if(!pDown) return; const dx=e.clientX-pDown.x, dy=e.clientY-pDown.y; if(!pDown.moved&&Math.abs(dx)+Math.abs(dy)>5) pDown.moved=true; if(!pDown.scrub&&Math.abs(dx)>4&&Math.abs(dx)>=Math.abs(dy)*.6){ pDown.scrub=true; dragging=true; gliding=false; deck.classList.add('dragging'); root.classList.add('ddj-noselect'); getSelection()?.removeAllRanges(); try{ deck.setPointerCapture(pDown.pid); }catch(_){} if(raf){ cancelAnimationFrame(raf); raf=null; } } if(pDown.scrub){ e.preventDefault(); const now=performance.now(); pDown.lastX=e.clientX; pDown.lastT=now; pDown.samples.push({t:now,x:e.clientX}); while(pDown.samples.length>2 && now-pDown.samples[0].t>200) pDown.samples.shift(); pos=clamp(pDown.startPos+dx/S,-.4,N-.6); target=pos; if(!dragRaf) dragRaf=requestAnimationFrame(()=>{ dragRaf=null; if(dragging) layout(); }); } },{passive:false}); deck.addEventListener('pointerup',e=>{ if(!pDown) return; const d=pDown; pDown=null; if(d.scrub){ dragging=false; deck.classList.remove('dragging'); root.classList.remove('ddj-noselect'); try{ deck.releasePointerCapture(d.pid); }catch(_){} const S0=d.samples, last=S0[S0.length-1]; let ref=S0[0]; for(let k=S0.length-1;k>=0;k--){ ref=S0[k]; if(last.t-S0[k].t>=100) break; } const dt=last.t-ref.t, vAvg=dt>0?(last.x-ref.x)/dt:0; const idle=performance.now()-d.lastT, vEff=idle>80?0:vAvg; if(Math.abs(vEff)>0.4) glide(clamp(vEff,-6,6)*16.7/S); else go(Math.round(pos)); }else if(d.plank&&!d.moved){ const i=+d.plank.dataset.i; const reg=e.target.closest?.('.ddj-region'); const ch=e.target.closest?.('.ddj-ch'); const glyph=reg?reg.dataset.char:(ch?ch.textContent:null); if(glyph&&i===activeIdx){ copyChar(glyph,e.clientX,e.clientY); go(i); } else go(i); }else if(!d.moved){ go(Math.round(pos)); } }); deck.addEventListener('pointercancel',()=>{ if(pDown&&pDown.scrub){ dragging=false; deck.classList.remove('dragging'); root.classList.remove('ddj-noselect'); go(pos); } pDown=null; }); root.addEventListener('keydown',e=>{ if(!root.contains(e.target)||typing(e.target)) return; if(['ArrowLeft','ArrowDown','ArrowRight','ArrowUp','PageDown','PageUp','Home','End'].includes(e.key)) userNav(); if(['ArrowLeft','ArrowDown'].includes(e.key)){ e.preventDefault(); go(target+1); } else if(['ArrowRight','ArrowUp'].includes(e.key)){ e.preventDefault(); go(target-1); } else if(e.key==='PageDown'){ e.preventDefault(); go(target+8); } else if(e.key==='PageUp'){ e.preventDefault(); go(target-8); } else if(e.key==='Home') go(0); else if(e.key==='End') go(N-1); }); let toastT=null; function copyChar(ch,x,y){ const r=root.getBoundingClientRect(); const done=()=>{ toast.textContent=ch+' copied'; toast.style.left=(x-r.left)+'px'; toast.style.top=(y-r.top)+'px'; toast.classList.add('show'); clearTimeout(toastT); toastT=setTimeout(()=>toast.classList.remove('show'),950); }; navigator.clipboard?.writeText(ch).then(done).catch(done) ?? done(); } const HOLD_RESUME_MS=400; const HOLD_TICK=50; const HOLD_LEAD=0.02; let hoverIdx=-1, hoverGloss=false, holdSlat=-1, holdPaused=false, holdTimer=null, holdResumeT=null; const onCentre=()=> activeIdx>=0 && (hoverGloss || hoverIdx===activeIdx); const holdEnd=k=>{ const r=slatSync.rangeOf(k); return r?r[1]:null; }; function holdStop(){ if(holdTimer){ clearInterval(holdTimer); holdTimer=null; } } function holdWatch(){ holdStop(); holdTimer=setInterval(()=>{ if(holdPaused||!onCentre()){ holdStop(); return; } // wait out BUFFERING rather than giving up, or the next slip never arms if(ytCall('getPlayerState')!==YT_PLAYING) return; const t=ytCall('getCurrentTime'), end=holdEnd(holdSlat); if(typeof t!=='number'||end==null) return; if(t>=end-HOLD_LEAD){ holdStop(); holdPaused=true; ytCall('pauseVideo'); } },HOLD_TICK); } function holdResume(){ holdResumeT=null; if(!holdPaused||onCentre()) return; const end=holdEnd(holdSlat); holdPaused=false; if(end==null) return; // do not resume over a navigation made during the cooldown const next=slatSync.slatAt(end); if(activeIdx!==holdSlat&&activeIdx!==next) return; wantPlay=true; seekFloor=next; seekFloorUntil=performance.now()+1200; ytCall('seekTo',end+0.02,true); ytCall('playVideo'); setTransportIcon(true); } function holdSync(){ if(onCentre()){ if(holdResumeT){ clearTimeout(holdResumeT); holdResumeT=null; } holdSlat=activeIdx; if(!holdPaused&&!holdTimer) holdWatch(); }else{ holdStop(); if(holdPaused&&!holdResumeT) holdResumeT=setTimeout(holdResume,HOLD_RESUME_MS); } } function onSlatHover(i,on){ if(on) hoverIdx=i; else if(hoverIdx===i) hoverIdx=-1; holdSync(); } gloss.addEventListener('pointerenter',()=>{ if(!dragging){ hoverGloss=true; holdSync(); } }); gloss.addEventListener('pointerleave',()=>{ hoverGloss=false; holdSync(); }); function holdCancel(){ holdStop(); if(holdResumeT){ clearTimeout(holdResumeT); holdResumeT=null; } holdPaused=false; } function attachPlankEvents(el,body){ const amp=reduced?0.45:1; el.addEventListener('pointermove',e=>{ if(dragging||e.pointerType!=='mouse') return; const r=el.getBoundingClientRect(); const nx=clamp((e.clientX-r.left)/r.width,0,1), ny=clamp((e.clientY-r.top)/r.height,0,1); el.style.setProperty('--rx',((.5-ny)*17*amp).toFixed(2)+'deg'); el.style.setProperty('--ry',((nx-.5)*44*amp).toFixed(2)+'deg'); body.style.setProperty('--sx',(nx*100).toFixed(1)+'%'); body.style.setProperty('--sy',(ny*100).toFixed(1)+'%'); }); el.addEventListener('pointerenter',()=>{ if(dragging) return; el.classList.add('hovering'); onSlatHover(+el.dataset.i,true); }); el.addEventListener('pointerleave',()=>{ el.classList.remove('hovering'); el.style.setProperty('--rx','0deg'); el.style.setProperty('--ry','0deg'); onSlatHover(+el.dataset.i,false); }); } function rebuildAll(){ hideTip(); for(const el of live.values()) el.remove(); live.clear(); prevLo=0; prevHi=-1; activeIdx=-1; Eoff=null; lastPosE=pos; for(const p of planks){ p._geomSize=-1; } computeSizes(); buildTitle(); buildScrubber(); layout(); sizePlayHit(); } const compChars=Object.values(BREAK).flatMap(b=>(b.components||[]).map(c=>c&&c.c).filter(Boolean)); const sample=[...new Set(planks.flatMap(p=>p.chars.map(c=>c.c)).concat(TITLE_CHARS,compChars))].join('').slice(0,900); Promise.race([ Promise.all([ document.fonts?.load(`48px SealScript`,sample)??Promise.resolve(), document.fonts?.load(`14px Lora`)??Promise.resolve(), document.fonts?.load(`600 10px Nunito`)??Promise.resolve() ]).then(()=>document.fonts?.ready), new Promise(r=>setTimeout(r,3000)) ]).then(rebuildAll); computeSizes(); buildTitle(); buildScrubber(); layout(); sizePlayHit(); requestAnimationFrame(sizePlayHit); const ro=new ResizeObserver(()=>{ clearTimeout(ro._t); ro._t=setTimeout(rebuildAll,120); }); ro.observe(root); try{ invalidation.then(()=>{ ro.disconnect(); if(raf) cancelAnimationFrame(raf); clearTimeout(tipTimer); clearTimeout(tipHideT); if(tipRaf) cancelAnimationFrame(tipRaf); stopFollow(); document.removeEventListener('fullscreenchange',onFsChange); document.removeEventListener('webkitfullscreenchange',onFsChange); document.removeEventListener('pointerdown',onDownAnywhere,true); for(const w of keyTargets){ try{ w.removeEventListener('keydown',spaceHandler,true); }catch(_){ } } if(keyTimer) clearInterval(keyTimer); holdStop(); clearTimeout(holdResumeT); try{ player?.removeEventListener?.('onStateChange',syncTransport); }catch(_){} }); }catch(_){} display(root);2e:T284c,const loadYT = (window.YT && window.YT.Player) ? Promise.resolve(window.YT) : new Promise((resolve) => { const prior = window.onYouTubeIframeAPIReady; window.onYouTubeIframeAPIReady = () => { if (prior) prior(); resolve(window.YT); }; if (!document.getElementById("yt-iframe-api")) { const s = document.createElement("script"); s.id = "yt-iframe-api"; s.src = "https://www.youtube.com/iframe_api"; document.head.appendChild(s); } }); const BOOK = { title: "Change Your Thoughts \u2013 Change Your Life", author: "Wayne W. Dyer", eyebrow: "Excerpts from", desc: "The full book has an essay for each chapter of the Daodejing exploring its meaning and explaining how it applies to your life. I highly recommend it as a bite size and practical introduction to Daoism, since the Daodejing is so dense.", // _SL1500_ is Amazon's size token; drop it to _SL320_ for a lighter file. cover: "https://m.media-amazon.com/images/I/81ZXiluQCIL._SL1500_.jpg", amazon: "https://a.co/d/0iSLxeYU", audible: "https://www.audible.com/pd/Change-Your-Thoughts-Change-Your-Life-Audiobook/B00BCLSXE6?source_code=ASSGB149080119000H&share_location=pdp" }; // Only the cool half is replaced; everything else is passed through untouched, // so oranges, yellows, greys and white come out exactly as they went in. A flat // warm tint could not do that — orange and yellow carry different amounts of // green, so no single colour reproduces both. // // coolMask clamp((B - R) * coolEdge) 1 on blue/cyan, 0 elsewhere // kept source * (1 - coolMask) the untouched majority // green coolNeutral * min(R,G,B) + (B - R) * tint * shade(max(R,G,B)) // // shade() is what separates indigo from sky: their B - R is nearly identical // and only brightness tells them apart. coolShade sets how hard it leans on it. const DUO = { id: "ttc-duo", amount: 1, // 0 leaves the cover alone, 1 is the full remap cool: "#5aad4a", coolGain: 1.0, coolEdge: 24, // how sharply the blue/cyan selection turns on // How much the tint follows the pixel's brightness. 1 is max(R,G,B) squared, // which crushed indigo almost to black; 0 ignores brightness entirely and // flattens dark blue and bright sky onto the same green. coolShade: 0.70, // How much of the original neutral shows through the green. Lower is more // saturated but darker, since the grey it removes was also carrying light. coolNeutral: 1.0 }; const duoRGB = h => [0, 1, 2].map(i => parseInt(h.slice(1 + i * 2, 3 + i * 2), 16) / 255); const duoTint = (hex, gain) => { const [r, g, b] = duoRGB(hex).map(v => (v * gain).toFixed(4)); return `${r} 0 0 0 0 ${g} 0 0 0 0 ${b} 0 0 0 0 0 0 0 1 0`; }; const duoBroadcast = ch => [0, 1, 2].map(() => [0, 1, 2].map(i => (i === ch ? 1 : 0)).join(" ") + " 0 0").join(" ") + " 0 0 0 1 0"; const K = DUO.coolEdge; display(html``); display(html``); const inner = document.createElement("div"); const stage = html`

${inner}

`; const wrap = html`

${stage}

$${BOOK.title} \u2014 cover$

${BOOK.eyebrow}

${BOOK.title}

${BOOK.author}

${BOOK.desc}

Amazon Audible

`; display(wrap); // The cover's height comes from measuring the stage, not from CSS. The stage's // height is aspect-ratio driven, so it is only known once its width is laid out. { const ro = new ResizeObserver(([e]) => { const h = e.contentRect.height; if (h > 0) wrap.style.setProperty("--ttc-h", h.toFixed(1) + "px"); }); ro.observe(stage); invalidation.then(() => ro.disconnect()); } // Displayed above rather than inside the async body, so the layout is on the // page immediately and the video fills its slot when the API arrives. const player = (async () => { const YT = await loadYT; return await new Promise((resolve) => { const attach = () => { if (!inner.isConnected) return requestAnimationFrame(attach); const yt = new YT.Player(inner, { videoId: "HzQPYuLY9XM", playerVars: { rel: 0, modestbranding: 1, playsinline: 1 }, events: { onReady: () => resolve(yt) } }); invalidation.then(() => { if (yt && yt.destroy) yt.destroy(); }); }; requestAnimationFrame(attach); }); })();2f:Tc0af,// Slat map: row, chapter, line, join, start, Chinese — one row per JSON sentence. // join "+" means the line continues the previous row's slat, so several lines read // as one; only a slat's first row carries a start time. A slat runs until the next // timed slat starts, so there is no end column. "-" start = not read aloud. // Only the commas are structural. Hand-edit freely; parseSlats() reports problems // in slatMap.warnings and renumbers the rows whenever the map is regenerated. const slatMap = parseSlats(` #row, ch, line, j, start, text 1, 1, 1, ., 0.00, 道可道非常道 2, 1, 2, ., 4.47, 名可名非常名 3, 1, 3, ., 8.97, 無名天地之始 4, 1, 4, ., 15.91, 有名萬物之母 5, 1, 5, ., 20.66, 故常無欲以觀其妙 6, 1, 6, ., 24.37, 常有欲以觀其徼 7, 1, 7, ., 33.98, 此兩者同出而異名 8, 1, 8, +, -, 同謂之玄 9, 1, 9, ., 28.74, 玄之又玄 10, 1, 10, +, -, 眾妙之門 11, 2, 1, ., 41.98, 天下皆知美之為美斯惡已 12, 2, 2, ., 48.32, 皆知善之為善斯不善已 13, 2, 3, ., 53.40, 故有無相生 14, 2, 4, ., 57.31, 難易相成 15, 2, 5, ., 60.44, 長短相較 16, 2, 6, ., 63.34, 高下相傾 17, 2, 7, ., 64.97, 音聲相和 18, 2, 8, ., 65.02, 前後相隨 19, 2, 9, ., 67.96, 是以聖人 20, 2, 10, ., 69.60, 處無為之事 21, 2, 11, +, -, 行不言之教 22, 2, 12, ., 78.07, 萬物作而不始 23, 2, 13, +, -, 生而不有 24, 2, 14, ., 80.55, 為而不恃 25, 2, 15, ., 86.21, 功成而弗居 26, 2, 16, ., 89.47, 夫唯弗居 27, 2, 17, +, -, 是以不去 28, 3, 1, ., 97.99, 不尚賢 29, 3, 2, +, -, 使民不爭 30, 3, 3, ., 102.84, 不貴難得之貨 31, 3, 4, +, -, 使民不為盜 32, 3, 5, ., 106.77, 不見可欲 33, 3, 6, +, -, 使民心不亂 34, 3, 7, ., 112.48, 是以聖人之治 35, 3, 8, ., 113.94, 虛其心實其腹 36, 3, 9, ., 116.42, 弱其志強其骨 37, 3, 10, ., 128.59, 常使民無知無欲 38, 3, 11, ., 130.76, 使夫智者不敢為 39, 3, 12, ., 119.92, 為無為則無不治矣 40, 4, 1, ., -, 道盅而用之有不盈 41, 4, 2, ., -, 淵兮似萬物之宗 42, 4, 3, ., -, 挫其銳 43, 4, 4, ., -, 解其紛 44, 4, 5, ., -, 和其光 45, 4, 6, ., -, 同其塵 46, 4, 7, ., -, 湛兮似或存 47, 4, 8, ., -, 吾不知誰之子 48, 4, 9, ., -, 象帝之先 49, 5, 1, ., 133.22, 天地不仁 50, 5, 2, +, -, 以萬物為芻狗 51, 5, 3, ., 140.72, 聖人不仁 52, 5, 4, +, -, 以百姓為芻狗 53, 5, 5, ., 157.55, 天地之間 54, 5, 6, +, -, 其猶橐籥乎 55, 5, 7, ., 161.21, 虛而不屈 56, 5, 8, ., 163.76, 動而愈出 57, 5, 9, ., 167.01, 多言數窮 58, 5, 10, +, -, 不如守中 59, 6, 1, ., 178.32, 谷神不死 60, 6, 2, +, -, 是謂玄牝 61, 6, 3, ., 193.26, 玄牝之門 62, 6, 4, +, -, 是謂天地之根 63, 6, 5, ., 182.67, 綿綿若存 64, 6, 6, +, -, 用之不勤 65, 7, 1, ., 220.45, 天長地久 66, 7, 2, ., 224.45, 天地所以能長且久者 67, 7, 3, ., 226.97, 以其不自生 68, 7, 4, +, -, 故能長生 69, 7, 5, ., 232.21, 是以聖人 70, 7, 6, ., 234.16, 後其身而身先 71, 7, 7, ., 237.07, 外其身而身存 72, 7, 8, ., 245.01, 非以其無私邪 73, 7, 9, ., 240.04, 故能成其私 74, 8, 1, ., 256.53, 上善若水 75, 8, 2, ., 259.91, 水善利萬物而不爭 76, 8, 3, ., 262.69, 處眾人之所惡 77, 8, 4, ., 265.56, 故幾於道矣 78, 8, 5, ., 270.68, 居善地 79, 8, 6, ., 273.15, 心善淵 80, 8, 7, ., 275.76, 與善仁 81, 8, 8, ., 279.08, 言善信 82, 8, 9, ., 280.37, 正善治 83, 8, 10, ., 282.47, 事善能 84, 8, 11, ., 282.52, 動善時 85, 8, 12, ., 284.73, 夫唯不爭 86, 8, 13, +, -, 故無尤 87, 9, 1, ., 303.02, 持而盈之 88, 9, 2, ., 310.02, 不如其已 89, 9, 3, ., 311.79, 揣而銳之 90, 9, 4, +, -, 不可長保 91, 9, 5, ., 314.85, 金玉滿堂 92, 9, 6, +, -, 莫之能守 93, 9, 7, ., 318.71, 富貴而驕 94, 9, 8, +, -, 自遺其咎 95, 9, 9, ., 323.48, 功遂身退 96, 9, 10, +, -, 天之道 97, 10, 1, ., 333.99, 載營魄抱一 98, 10, 2, +, -, 能無離乎 99, 10, 3, ., 339.64, 專氣致柔 100, 10, 4, +, -, 能嬰兒乎 101, 10, 5, ., 343.13, 滌除玄覽 102, 10, 6, +, -, 能無疵乎 103, 10, 7, ., 347.89, 愛民治國 104, 10, 8, +, -, 能無為乎 105, 10, 9, ., 343.25, 天門開闔 106, 10, 10, +, -, 能為雌乎 107, 10, 11, ., 352.28, 明白四達 108, 10, 12, +, -, 能無以知乎 109, 10, 13, ., 352.44, 生之畜之 110, 10, 14, ., 354.73, 生而不有 111, 10, 15, ., 356.70, 為而不恃 112, 10, 16, ., 359.22, 長而不宰 113, 10, 17, ., 362.10, 是謂玄德 114, 11, 1, ., 374.02, 三十輻共一轂 115, 11, 2, +, -, 當其無有車之用 116, 11, 3, ., 381.97, 埏埴以為器 117, 11, 4, +, -, 當其無有器之用 118, 11, 5, ., 387.71, 鑿戶牖以為室 119, 11, 6, +, -, 當其無有室之用 120, 11, 7, ., 393.57, 故有之以為利 121, 11, 8, +, -, 無之以為用 122, 12, 1, ., 406.41, 五色令人目盲 123, 12, 2, ., 409.36, 五音令人耳聾 124, 12, 3, ., 412.10, 五味令人口爽 125, 12, 4, ., 414.58, 馳騁畋獵令人心發狂 126, 12, 5, ., 418.22, 難得之貨令人行妨 127, 12, 6, ., 423.13, 是以聖人 128, 12, 7, ., 427.00, 為腹不為目 129, 12, 8, +, -, 故去彼取此 130, 13, 1, ., 438.56, 寵辱若驚 131, 13, 2, ., 441.93, 貴大患若身 132, 13, 3, ., 445.52, 何謂寵辱若驚 133, 13, 4, ., 448.56, 寵為下得之若驚 134, 13, 5, +, -, 失之若驚 135, 13, 6, ., 454.28, 是謂寵辱若驚 136, 13, 7, +, -, 何謂貴大患若身 137, 13, 8, ., 457.61, 吾所以有大患者為吾有身 138, 13, 9, ., 461.45, 及吾無身吾有何患 139, 13, 10, ., 473.81, 故貴以身為天下 140, 13, 11, +, -, 若可以寄天下矣 141, 13, 12, ., 478.05, 愛以身為天下 142, 13, 13, +, -, 若可以託天下矣 143, 14, 1, ., 490.44, 視之不見名曰夷 144, 14, 2, ., 494.41, 聽之不聞名曰希 145, 14, 3, ., 497.89, 搏之不得名曰微 146, 14, 4, ., 501.70, 此三者不可致詰 147, 14, 5, +, -, 故混而為一 148, 14, 6, ., 518.79, 一者 149, 14, 7, +, -, 其上不皦 150, 14, 8, ., 521.34, 其下不昧 151, 14, 9, ., 523.43, 繩繩兮不可名 152, 14, 10, +, -, 復歸於無物 153, 14, 11, ., 507.66, 是謂無狀之狀 154, 14, 12, +, -, 無物之象 155, 14, 13, +, -, 是謂惚恍 156, 14, 14, ., 527.97, 迎之不見其首 157, 14, 15, ., 530.27, 隨之不見其後 158, 14, 16, ., 532.86, 執古之道 159, 14, 17, +, -, 以御今之有 160, 14, 18, ., 537.37, 能知古始 161, 14, 19, +, -, 是謂道紀 162, 15, 1, ., 550.97, 古之善為士者微妙玄通 163, 15, 2, +, -, 深不可識 164, 15, 3, ., 557.18, 夫唯不可識 165, 15, 4, +, -, 故強為之容 166, 15, 5, ., 562.70, 豫兮若冬涉川 167, 15, 6, ., 566.14, 猶兮若畏四鄰 168, 15, 7, ., 568.58, 儼兮其若客 169, 15, 8, ., 573.21, 渙兮若冰將釋 170, 15, 9, ., 568.76, 敦兮其若樸 171, 15, 10, ., 571.01, 曠兮其若谷 172, 15, 11, ., 575.88, 混兮其若濁 173, 15, 12, ., 578.21, 孰能濁以靜之徐清 174, 15, 13, ., 582.01, 孰能安以久動之徐生 175, 15, 14, ., 585.18, 保此道者不欲盈 176, 15, 15, ., 588.34, 夫唯不盈 177, 15, 16, ., 591.52, 是以能蔽而不成 178, 16, 1, ., 604.56, 致虛極 179, 16, 2, ., 606.99, 守靜篤 180, 16, 3, ., 609.45, 萬物並作 181, 16, 4, +, -, 吾以觀其復 182, 16, 5, ., 614.49, 夫物芸芸各復歸其根 183, 16, 6, ., 621.87, 歸根曰靜 184, 16, 7, ., 624.83, 靜是謂復命 185, 16, 8, ., 628.20, 復命曰常 186, 16, 9, ., 631.27, 知常曰明 187, 16, 10, ., 634.38, 不知常妄作凶 188, 16, 11, ., 638.50, 知常容 189, 16, 12, ., 641.72, 容乃公 190, 16, 13, ., 643.91, 公乃王 191, 16, 14, ., 647.01, 王乃天 192, 16, 15, ., 649.46, 天乃道 193, 16, 16, ., 653.30, 道乃久 194, 16, 17, ., 656.17, 沒身不殆 195, 17, 1, ., 670.01, 太上下知有之 196, 17, 2, ., 674.92, 其次親而譽之 197, 17, 3, ., 677.31, 其次畏之 198, 17, 4, ., 679.58, 其次侮之 199, 17, 5, ., 683.27, 信不足焉有不信 200, 17, 6, ., 686.52, 猶兮其貴言 201, 17, 7, ., 690.60, 功成事遂 202, 17, 8, ., 693.93, 百姓皆謂我自然 203, 18, 1, ., 706.06, 大道廢 204, 18, 2, +, -, 有仁義 205, 18, 3, ., 717.41, 慧智出 206, 18, 4, +, -, 有大偽 207, 18, 5, ., 728.00, 六親不和 208, 18, 6, +, -, 有孝慈 209, 18, 7, ., 733.17, 國家昏亂 210, 18, 8, +, -, 有忠臣 211, 19, 1, ., 747.55, 絕聖棄智 212, 19, 2, +, -, 民利百倍 213, 19, 3, ., 753.98, 絕仁棄義 214, 19, 4, +, -, 民復孝慈 215, 19, 5, ., 757.82, 絕巧棄利 216, 19, 6, +, -, 盜賊無有 217, 19, 7, ., 762.11, 此三者以為文不足 218, 19, 8, ., 767.55, 故令有所屬 219, 19, 9, ., 771.49, 見素 220, 19, 10, +, -, 抱樸 221, 19, 11, +, -, 少私 222, 19, 12, +, -, 寡欲 223, 20, 1, ., 782.98, 絕學無憂 224, 20, 2, ., 787.39, 唯之與阿 225, 20, 3, +, -, 相去幾何 226, 20, 4, ., 790.11, 美之與惡 227, 20, 5, +, -, 相去若何 228, 20, 6, ., 792.58, 人之所畏不可不畏 229, 20, 7, ., 795.30, 荒兮其未央哉 230, 20, 8, ., 797.47, 眾人熙熙 231, 20, 9, +, -, 如享太牢 232, 20, 10, ., 801.68, 如春登臺 233, 20, 11, ., 805.09, 我獨泊兮 234, 20, 12, +, -, 其未兆 235, 20, 13, ., 807.97, 如嬰兒之未孩 236, 20, 14, ., 811.02, 儽儽兮若無所歸 237, 20, 15, ., 813.23, 眾人皆有餘 238, 20, 16, ., 815.96, 我獨若遺 239, 20, 17, ., 818.28, 我愚人之心也哉 240, 20, 18, +, -, 沌沌兮 241, 20, 19, ., 825.77, 俗人昭昭 242, 20, 20, +, -, 我獨若昏 243, 20, 21, ., 833.21, 俗人察察 244, 20, 22, +, -, 我獨悶悶 245, 20, 23, ., 842.90, 澹兮其若海 246, 20, 24, ., 845.48, 漂兮若無所止 247, 20, 25, ., 847.50, 眾人皆有以 248, 20, 26, +, -, 我獨頑似鄙 249, 20, 27, ., 853.87, 我獨異於人 250, 20, 28, +, -, 而貴食母 251, 21, 1, ., 868.02, 孔德之容唯道是從 252, 21, 2, ., 873.04, 道之為物唯恍唯惚 253, 21, 3, ., 875.89, 惚兮恍兮其中有象 254, 21, 4, ., 879.73, 恍兮惚兮其中有物 255, 21, 5, ., 883.34, 窈兮冥兮其中有精 256, 21, 6, ., 886.96, 其精甚真 257, 21, 7, +, -, 其中有信 258, 21, 8, ., 890.12, 自今及古 259, 21, 9, +, -, 其名不去 260, 21, 10, +, -, 以閱眾甫 261, 21, 11, ., 895.14, 吾何以知眾甫之然哉 262, 21, 12, ., 899.14, 以此 263, 22, 1, ., 911.38, 曲則全 264, 22, 2, ., 914.99, 枉則直 265, 22, 3, ., 917.03, 窪則盈 266, 22, 4, ., 919.01, 敝則新 267, 22, 5, ., 921.59, 少則得 268, 22, 6, ., 923.70, 多則惑 269, 22, 7, ., 926.03, 是以聖人 270, 22, 8, ., 927.72, 抱一以為天下式 271, 22, 9, ., 929.45, 不自見故明 272, 22, 10, ., 933.20, 不自是故彰 273, 22, 11, ., 941.55, 不自伐故有功 274, 22, 12, +, -, 不自矜故長 275, 22, 13, ., 936.90, 夫唯不爭 276, 22, 14, +, -, 故天下莫能與之爭 277, 22, 15, ., 946.29, 古之所謂 278, 22, 16, +, -, 曲則全者 279, 22, 17, +, -, 豈虛言哉 280, 22, 18, ., 951.48, 誠全而歸之 281, 23, 1, ., 964.56, 希言自然 282, 23, 2, ., 967.17, 故飄風不終朝 283, 23, 3, ., 969.93, 驟雨不終日 284, 23, 4, ., 972.59, 孰為此者天地 285, 23, 5, ., 979.43, 天地尚不能久 286, 23, 6, +, -, 而況於人乎 287, 23, 7, ., 985.48, 故從事於道者 288, 23, 8, +, -, 道者同於道 289, 23, 9, ., 988.90, 德者同於德 290, 23, 10, ., 992.24, 失者同於失 291, 23, 11, ., 996.68, 同於道者 292, 23, 12, +, -, 道亦樂得之 293, 23, 13, ., 1000.83, 同於德者 294, 23, 14, +, -, 德亦樂得之 295, 23, 15, ., 1005.79, 同於失者 296, 23, 16, +, -, 失亦樂得之 297, 23, 17, ., 1007.69, 信不足焉有不信 298, 24, 1, ., 1019.48, 企者不立 299, 24, 2, ., 1023.30, 跨者不行 300, 24, 3, ., 1026.85, 自見者不明 301, 24, 4, ., 1032.04, 自是者不彰 302, 24, 5, ., 1029.60, 自伐者無功 303, 24, 6, ., 1035.37, 自矜者不長 304, 24, 7, ., 1037.94, 其在道也 305, 24, 8, +, -, 曰餘食贅行 306, 24, 9, +, -, 物或惡之 307, 24, 10, ., 1047.25, 故有道者不處 308, 25, 1, ., 1062.36, 有物混成 309, 25, 2, +, -, 先天地生 310, 25, 3, ., 1066.71, 寂兮寥兮 311, 25, 4, +, -, 獨立不改 312, 25, 5, ., 1071.35, 周行而不殆 313, 25, 6, ., 1073.92, 可以為天下母 314, 25, 7, ., 1076.14, 吾不知其名 315, 25, 8, +, -, 字之曰道 316, 25, 9, ., 1079.30, 強為之名曰大 317, 25, 10, ., 1081.08, 大曰逝 318, 25, 11, ., 1082.48, 逝曰遠 319, 25, 12, ., 1084.43, 遠曰反 320, 25, 13, ., 1086.97, 道大 321, 25, 14, ., 1089.56, 天大 322, 25, 15, ., 1090.31, 地大 323, 25, 16, ., 1091.52, 王亦大 324, 25, 17, +, -, 域中有四大 325, 25, 18, +, -, 而王居其一焉 326, 25, 19, ., 1092.94, 人法地 327, 25, 20, ., 1096.34, 地法天 328, 25, 21, ., 1098.85, 天法道 329, 25, 22, ., 1101.73, 道法自然 330, 26, 1, ., 1114.11, 重為輕根 331, 26, 2, ., 1117.74, 靜為躁君 332, 26, 3, ., 1120.62, 是以君子終日 333, 26, 4, +, -, 行不離其輜 334, 26, 5, ., 1128.10, 重雖有榮觀燕 335, 26, 6, +, -, 處超然 336, 26, 7, ., 1130.81, 奈何萬乘之主 337, 26, 8, +, -, 而以身輕天下 338, 26, 9, ., 1133.94, 輕則失本 339, 26, 10, ., 1138.50, 躁則失君 340, 27, 1, ., 1150.04, 善行無轍迹 341, 27, 2, ., 1154.05, 善言無瑕謫 342, 27, 3, ., 1156.11, 善數不用籌策 343, 27, 4, ., 1158.06, 善閉無關楗而不可開 344, 27, 5, ., 1162.15, 善結無纆約而不可解 345, 27, 6, ., 1166.99, 是以聖人 346, 27, 7, +, -, 常善救人 347, 27, 8, ., 1171.55, 故無棄人 348, 27, 9, +, -, 常善救物 349, 27, 10, ., 1172.95, 故無棄物 350, 27, 11, ., 1175.10, 是謂襲明 351, 27, 12, ., 1177.51, 故善人者不善人之師 352, 27, 13, ., 1181.41, 不善人者善人之資 353, 27, 14, ., 1184.80, 不貴其師 354, 27, 15, ., 1186.79, 不愛其資 355, 27, 16, ., 1188.51, 雖智大迷 356, 27, 17, ., 1192.28, 是謂要妙 357, 28, 1, ., 1203.01, 知其雄守其雌 358, 28, 2, ., 1206.92, 為天下谿 359, 28, 3, ., 1208.51, 為天下谿 360, 28, 4, +, -, 常德不離 361, 28, 5, ., 1212.64, 復歸於嬰兒 362, 28, 6, ., 1215.16, 知其白守其黑 363, 28, 7, ., 1218.65, 為天下式 364, 28, 8, ., 1220.75, 為天下式 365, 28, 9, +, -, 常德不忒 366, 28, 10, ., 1228.56, 復歸於無極 367, 28, 11, ., 1231.18, 知其榮守其辱 368, 28, 12, ., 1238.01, 為天下谷 369, 28, 13, ., 1238.16, 為天下谷 370, 28, 14, +, -, 常德乃足 371, 28, 15, ., 1247.67, 復歸於樸 372, 28, 16, ., 1242.22, 樸散則為器 373, 28, 17, ., 1251.99, 聖人用之則為官長 374, 28, 18, +, -, 故大制不割 375, 29, 1, ., 1264.06, 將欲取天下而為之 376, 29, 2, ., 1267.92, 吾見其不得已 377, 29, 3, ., 1269.97, 夫天下神器 378, 29, 4, +, -, 不可為也 379, 29, 5, ., 1274.24, 為者敗之 380, 29, 6, ., 1276.33, 執者失之 381, 29, 7, ., 1278.66, 故物 382, 29, 8, ., 1287.42, 或行或隨 383, 29, 9, ., 1284.59, 或歔或吹 384, 29, 10, ., 1295.60, 或強或羸 385, 29, 11, ., 1299.45, 或挫或隳 386, 29, 12, ., 1304.33, 是以聖人 387, 29, 13, ., 1309.13, 去甚 388, 29, 14, ., 1311.79, 去奢 389, 29, 15, ., 1312.74, 去泰 390, 30, 1, ., 1324.01, 以道佐人主者 391, 30, 2, +, -, 不以兵強天下 392, 30, 3, ., 1332.08, 其事好還 393, 30, 4, ., 1335.07, 師之所處荊棘生 394, 30, 5, ., 1340.89, 焉大軍之後必有凶年 395, 30, 6, ., 1362.09, 善者果而已 396, 30, 7, +, -, 不敢以取強 397, 30, 8, ., 1356.23, 果而勿矜 398, 30, 9, ., 1354.10, 果而勿伐 399, 30, 10, ., 1349.54, 果而勿驕 400, 30, 11, ., 1357.86, 果而不得已 401, 30, 12, ., 1365.74, 果而勿強 402, 30, 13, +, -, 物壯則老 403, 30, 14, ., 1368.91, 是謂不道 404, 30, 15, ., 1371.05, 不道早已 405, 31, 1, ., 1385.95, 夫佳兵者不祥之器 406, 31, 2, ., 1389.36, 物或惡之 407, 31, 3, ., 1391.60, 故有道者不處 408, 31, 4, +, -, 君子居則貴左 409, 31, 5, ., 1395.19, 用兵則貴右 410, 31, 6, +, -, 兵者不祥之器 411, 31, 7, ., 1397.77, 非君子之器 412, 31, 8, ., 1401.20, 不得已而用之 413, 31, 9, ., 1403.88, 恬淡為上 414, 31, 10, +, -, 勿美也 415, 31, 11, ., 1408.22, 而美之者是樂殺人 416, 31, 12, ., 1411.92, 夫樂殺人者 417, 31, 13, ., 1416.55, 不可以得志於天下矣 418, 31, 14, ., 1420.56, 故吉事尚左 419, 31, 15, ., 1424.86, 凶事尚右 420, 31, 16, ., 1428.48, 是以偏將軍居左 421, 31, 17, +, -, 上將軍居右 422, 31, 18, ., 1432.00, 言以喪禮處之 423, 31, 19, ., 1433.85, 殺人眾 424, 31, 20, +, -, 以哀悲泣之 425, 31, 21, ., 1428.63, 戰勝以喪禮處之 426, 32, 1, ., 1446.94, 道常無名 427, 32, 2, ., 1449.67, 樸雖小 428, 32, 3, +, -, 天下莫能臣 429, 32, 4, ., 1454.01, 侯王若能守之 430, 32, 5, +, -, 萬物將自賓 431, 32, 6, ., 1459.52, 天地相合 432, 32, 7, +, -, 以降甘露 433, 32, 8, ., 1463.41, 民莫之令 434, 32, 9, +, -, 而自均 435, 32, 10, ., 1469.03, 焉始制有名 436, 32, 11, ., 1472.91, 名亦既有 437, 32, 12, ., 1475.16, 夫亦將知止 438, 32, 13, ., 1476.64, 知止所以不殆 439, 32, 14, ., 1479.84, 譬道之在天下 440, 32, 15, +, -, 猶川谷之與江海 441, 33, 1, ., 1502.14, 知人者智 442, 33, 2, ., 1505.85, 自知者明 443, 33, 3, ., 1509.39, 勝人者有力 444, 33, 4, ., 1512.31, 自勝者強 445, 33, 5, ., 1516.58, 知足者富 446, 33, 6, ., 1520.18, 強行者有志 447, 33, 7, ., 1520.29, 不失其所者久 448, 33, 8, ., 1524.20, 死而不亡者壽 449, 34, 1, ., 1538.48, 大道氾兮 450, 34, 2, ., 1540.88, 其可左右 451, 34, 3, ., 1543.77, 萬物恃之以生 452, 34, 4, +, -, 而不辭 453, 34, 5, ., 1549.46, 功成遂 454, 34, 6, +, -, 而不名有 455, 34, 7, ., 1553.92, 衣養萬物 456, 34, 8, +, -, 而不為主 457, 34, 9, ., 1559.23, 故常無欲 458, 34, 10, +, -, 可名於小 459, 34, 11, +, -, 萬物歸焉 460, 34, 12, ., 1562.70, 而不為主 461, 34, 13, ., 1565.57, 可名於大 462, 34, 14, ., 1567.31, 是以聖人之能成大 463, 34, 15, ., 1571.27, 以其不為大 464, 34, 16, +, -, 故能成大 465, 35, 1, ., 1584.00, 執大象 466, 35, 2, +, -, 天下往 467, 35, 3, ., 1588.03, 往而不害 468, 35, 4, ., 1590.76, 安平太 469, 35, 5, ., 1594.98, 樂與餌過客止 470, 35, 6, ., 1600.79, 道之出言淡呵 471, 35, 7, +, -, 其無味 472, 35, 8, ., 1606.87, 視之不足見 473, 35, 9, ., 1609.46, 聽之不足聞 474, 35, 10, ., 1611.74, 用之不足既 475, 36, 1, ., 1622.99, 將欲歙之 476, 36, 2, +, -, 必固張之 477, 36, 3, ., 1628.04, 將欲弱之 478, 36, 4, +, -, 必固強之 479, 36, 5, ., 1632.24, 將欲廢之 480, 36, 6, +, -, 必固興之 481, 36, 7, ., 1637.07, 將欲奪之 482, 36, 8, +, -, 必固與之 483, 36, 9, ., 1642.01, 是謂微明 484, 36, 10, ., 1645.95, 柔弱勝剛強 485, 36, 11, ., 1652.41, 魚不可脫於淵 486, 36, 12, ., 1655.17, 國之利器 487, 36, 13, +, -, 不可以示人 488, 37, 1, ., 1670.00, 道常無為 489, 37, 2, +, -, 而無不為 490, 37, 3, ., 1674.00, 侯王若能守之 491, 37, 4, ., 1678.04, 萬物將自化 492, 37, 5, +, -, 化而欲作 493, 37, 6, ., 1682.18, 吾將鎮之以無名之樸 494, 37, 7, +, -, 無名之樸 495, 37, 8, ., 1686.10, 夫亦將無欲 496, 37, 9, ., 1688.46, 不欲以靜 497, 37, 10, +, -, 天下將自定 498, 38, 1, ., 1711.49, 上德不德是以有德 499, 38, 2, ., 1716.82, 下德不失德是以無德 500, 38, 3, ., 1720.59, 上德無為而無以為 501, 38, 4, ., 1724.46, 下德為之而有以為 502, 38, 5, ., 1728.99, 上仁為之而無以為 503, 38, 6, ., 1732.91, 上義為之而有以為 504, 38, 7, ., 1736.26, 上禮為之而莫之以應 505, 38, 8, ., 1740.08, 則攘臂而仍之 506, 38, 9, ., 1740.23, 故失道而後德 507, 38, 10, +, -, 失德而後仁 508, 38, 11, ., 1743.27, 失仁而後義 509, 38, 12, ., 1746.28, 失義而後禮 510, 38, 13, ., 1749.32, 夫禮者忠信之薄 511, 38, 14, ., 1752.81, 而亂之首 512, 38, 15, ., 1756.75, 前識者道之華 513, 38, 16, +, -, 而愚之始 514, 38, 17, ., 1755.31, 是以大丈夫 515, 38, 18, ., 1760.08, 處其厚不居其薄 516, 38, 19, ., 1764.22, 處其實不居其華 517, 38, 20, ., 1767.56, 故去彼取此 518, 39, 1, ., 1781.05, 昔之得一者 519, 39, 2, ., 1785.08, 天得一以清 520, 39, 3, ., 1787.77, 地得一以寧 521, 39, 4, ., 1790.19, 神得一以靈 522, 39, 5, ., 1792.89, 谷得一以盈 523, 39, 6, ., 1792.99, 萬物得一以生 524, 39, 7, ., 1795.36, 侯王得一以為天下貞 525, 39, 8, ., 1797.67, 其致之 526, 39, 9, +, -, 天無以清 527, 39, 10, ., 1805.05, 將恐裂 528, 39, 11, +, -, 地無以寧 529, 39, 12, ., 1801.13, 將恐發 530, 39, 13, +, -, 神無以靈 531, 39, 14, ., 1807.23, 將恐歇 532, 39, 15, +, -, 谷無以盈 533, 39, 16, ., 1808.97, 將恐竭 534, 39, 17, +, -, 萬物無以生 535, 39, 18, ., 1811.44, 將恐滅 536, 39, 19, +, -, 侯王無以貴高 537, 39, 20, +, -, 將恐蹶 538, 39, 21, ., 1811.59, 故貴以賤為本 539, 39, 22, ., 1815.12, 高以下為基 540, 39, 23, ., 1818.51, 是以侯王自謂孤寡不穀 541, 39, 24, ., 1830.83, 此非以賤為本邪 542, 39, 25, +, -, 非乎 543, 39, 26, ., 1825.26, 故致數輿無輿 544, 39, 27, ., 1846.08, 不欲琭琭如玉 545, 39, 28, +, -, 珞珞如石 546, 40, 1, ., 1859.88, 反者道之動 547, 40, 2, ., 1863.47, 弱者道之用 548, 40, 3, ., 1866.36, 天下萬物生於有 549, 40, 4, ., 1869.72, 有生於無 550, 41, 1, ., 1881.72, 上士聞道勤而行之 551, 41, 2, ., 1885.98, 中士聞道若存若亡 552, 41, 3, ., 1890.38, 下士聞道大笑之 553, 41, 4, ., 1895.03, 不笑不足以為道 554, 41, 5, ., 1898.04, 故建言有之曰 555, 41, 6, ., 1901.09, 明道若昧 556, 41, 7, ., 1903.41, 進道若退 557, 41, 8, ., 1906.16, 夷道若纇 558, 41, 9, ., 1908.68, 上德若谷 559, 41, 10, ., 1911.02, 大白若辱 560, 41, 11, ., 1922.00, 廣德若不足 561, 41, 12, ., 1919.17, 建德若偷 562, 41, 13, ., 1913.48, 質真若渝 563, 41, 14, ., 1916.36, 大方無隅 564, 41, 15, +, -, 大器晚成 565, 41, 16, +, -, 大音希聲 566, 41, 17, ., 1924.80, 大象無形 567, 41, 18, +, -, 道隱無名 568, 41, 19, ., 1928.76, 夫唯道善始且善成 569, 42, 1, ., 1942.04, 道生一 570, 42, 2, ., 1944.37, 一生二 571, 42, 3, ., 1947.56, 二生三 572, 42, 4, ., 1949.60, 三生萬物 573, 42, 5, ., 1953.14, 萬物負陰而抱陽 574, 42, 6, ., 1957.53, 沖氣以為和 575, 42, 7, ., 1961.00, 人之所惡 576, 42, 8, +, -, 唯孤寡不穀 577, 42, 9, ., 1966.15, 而王公以自稱 578, 42, 10, ., 1971.05, 故物 579, 42, 11, +, -, 或損之而益 580, 42, 12, +, -, 或益之而損 581, 42, 13, ., 1975.79, 人之所教我亦教之 582, 42, 14, ., 1978.45, 強梁者不得其死 583, 42, 15, ., 1981.77, 吾將以為教父 584, 43, 1, ., 1992.11, 天下之至柔 585, 43, 2, +, -, 馳騁天下之至堅 586, 43, 3, ., 1997.39, 無有入無間 587, 43, 4, ., 2000.82, 吾是以知無為之有益 588, 43, 5, ., 2003.76, 不言之教 589, 43, 6, ., 2005.66, 無為之益 590, 43, 7, ., 2007.26, 天下希及之 591, 44, 1, ., 2024.10, 名與身孰親 592, 44, 2, ., 2028.22, 身與貨孰多 593, 44, 3, ., 2032.66, 得與亡孰病 594, 44, 4, ., 2036.99, 甚愛必大費 595, 44, 5, ., 2040.15, 多藏必厚亡 596, 44, 6, ., 2042.83, 知足不辱 597, 44, 7, ., 2046.41, 知止不殆 598, 44, 8, ., 2049.95, 可以長久 599, 45, 1, ., 2059.98, 大成若缺 600, 45, 2, +, -, 其用不弊 601, 45, 3, ., 2065.80, 大盈若盅 602, 45, 4, +, -, 其用不窮 603, 45, 5, ., 2070.48, 大直若屈 604, 45, 6, ., 2073.90, 大巧若拙 605, 45, 7, ., 2076.98, 大辯若訥 606, 45, 8, ., 2086.12, 躁勝寒 607, 45, 9, ., 2088.67, 靜勝熱 608, 45, 10, ., 2091.12, 清靜為天下正 609, 46, 1, ., 2104.73, 天下有道 610, 46, 2, +, -, 卻走馬以糞 611, 46, 3, ., 2110.82, 天下無道 612, 46, 4, +, -, 戎馬生於郊 613, 46, 5, ., 2119.53, 罪莫大於可欲 614, 46, 6, ., 2122.12, 禍莫大於不知足 615, 46, 7, ., 2124.76, 咎莫大於欲得 616, 46, 8, ., 2131.02, 故知足之足常足矣 617, 47, 1, ., 2145.99, 不出戶 618, 47, 2, +, -, 以知天下 619, 47, 3, ., 2149.25, 不闚牖 620, 47, 4, +, -, 以知天道 621, 47, 5, ., 2153.37, 其出彌遠 622, 47, 6, +, -, 其知彌少 623, 47, 7, ., 2156.54, 是以聖人 624, 47, 8, ., 2158.64, 不行而知 625, 47, 9, ., 2160.76, 不見而名 626, 47, 10, ., 2163.52, 不為而成 627, 48, 1, ., 2175.36, 為學者日益 628, 48, 2, ., 2179.07, 為道者日損 629, 48, 3, ., 2183.00, 損之又損 630, 48, 4, +, -, 以至於無為 631, 48, 5, ., 2187.17, 無為而無不為 632, 48, 6, ., 2190.97, 取天下常以無事 633, 48, 7, ., 2195.37, 及其有事 634, 48, 8, +, -, 不足以取天下 635, 49, 1, ., 2205.29, 聖人無常心 636, 49, 2, ., 2208.11, 以百姓心為心 637, 49, 3, ., 2210.59, 善者吾善之 638, 49, 4, ., 2213.38, 不善者吾亦善之 639, 49, 5, +, -, 德善 640, 49, 6, ., 2228.31, 信者吾信之 641, 49, 7, ., 2230.74, 不信者吾亦信之 642, 49, 8, +, -, 德信 643, 49, 9, ., 2233.92, 聖人在天下歙歙 644, 49, 10, ., 2237.41, 焉為天下渾其心 645, 49, 11, ., 2243.38, 百姓皆注其耳目 646, 49, 12, ., 2240.06, 聖人皆孩之 647, 50, 1, ., 2258.06, 出生入死 648, 50, 2, ., 2260.13, 生之徒十有三 649, 50, 3, ., 2263.18, 死之徒十有三 650, 50, 4, ., 2266.40, 人之生動之死地 651, 50, 5, +, -, 亦十有三 652, 50, 6, ., 2271.87, 夫何故 653, 50, 7, ., 2273.80, 以其生生之厚 654, 50, 8, ., 2278.68, 蓋聞善攝生者 655, 50, 9, ., 2283.02, 陵行不遇兕虎 656, 50, 10, ., 2286.09, 入軍不被甲兵 657, 50, 11, ., 2288.82, 兕無所投其角 658, 50, 12, ., 2291.95, 虎無所措其爪 659, 50, 13, ., 2294.37, 兵無所容其刃 660, 50, 14, ., 2298.42, 夫何故 661, 50, 15, ., 2300.21, 以其無死地 662, 51, 1, ., 2321.56, 道生之 663, 51, 2, ., 2325.67, 德畜之 664, 51, 3, ., 2330.15, 物形之 665, 51, 4, ., 2332.69, 勢成之 666, 51, 5, ., 2335.61, 是以萬物 667, 51, 6, +, -, 莫不尊道而貴德 668, 51, 7, ., 2339.77, 道之尊 669, 51, 8, ., 2342.40, 德之貴 670, 51, 9, ., 2344.66, 夫莫之命 671, 51, 10, +, -, 而常自然 672, 51, 11, ., 2347.44, 故道生之德畜之 673, 51, 12, ., 2349.89, 長之育之 674, 51, 13, ., 2352.24, 亭之毒之 675, 51, 14, +, -, 養之覆之 676, 51, 15, ., 2355.02, 生而不有 677, 51, 16, ., 2358.04, 為而不恃 678, 51, 17, ., 2360.58, 長而不宰 679, 51, 18, ., 2363.91, 是謂玄德 680, 52, 1, ., 2377.42, 天下有始 681, 52, 2, ., 2380.77, 以為天下母 682, 52, 3, ., 2383.53, 既得其母 683, 52, 4, +, -, 以知其子 684, 52, 5, ., 2387.88, 既知其子 685, 52, 6, +, -, 復守其母 686, 52, 7, ., 2393.02, 沒身不殆 687, 52, 8, ., 2394.94, 塞其兌閉其門 688, 52, 9, ., 2396.97, 終身不勤 689, 52, 10, ., 2398.76, 開其兌濟其事 690, 52, 11, ., 2401.65, 終身不救 691, 52, 12, ., 2403.79, 見小曰明 692, 52, 13, ., 2406.88, 守柔曰強 693, 52, 14, ., 2409.79, 用其光復歸其明 694, 52, 15, ., 2414.00, 無遺身殃 695, 52, 16, ., 2416.58, 是謂習常 696, 53, 1, ., 2429.41, 使我介然有知 697, 53, 2, +, -, 行於大道 698, 53, 3, ., 2434.17, 唯施是畏 699, 53, 4, ., 2436.39, 大道甚夷 700, 53, 5, +, -, 而民好徑 701, 53, 6, ., 2441.75, 朝甚除 702, 53, 7, ., 2443.84, 田甚蕪 703, 53, 8, ., 2445.48, 倉甚虛 704, 53, 9, ., 2447.24, 服文綵 705, 53, 10, ., 2449.58, 帶利劍 706, 53, 11, ., 2450.87, 厭飲食 707, 53, 12, ., 2453.19, 財貨有餘 708, 53, 13, ., 2456.56, 是謂盜夸 709, 53, 14, ., 2463.79, 非道也哉 710, 54, 1, ., 2475.75, 善建者不拔 711, 54, 2, ., 2480.26, 善抱者不脫 712, 54, 3, ., 2483.51, 子孫以祭祀不輟 713, 54, 4, ., 2487.47, 修之身其德乃真 714, 54, 5, ., 2490.78, 修之家其德乃餘 715, 54, 6, ., 2494.41, 修之鄉其德乃長 716, 54, 7, ., 2498.46, 修之國其德乃豐 717, 54, 8, ., 2502.47, 修之天下其德乃普 718, 54, 9, ., 2507.07, 故以身觀身 719, 54, 10, ., 2510.09, 以家觀家 720, 54, 11, ., 2515.82, 以鄉觀鄉 721, 54, 12, +, -, 以國觀國 722, 54, 13, ., 2519.52, 以天下觀天下 723, 54, 14, ., 2522.61, 吾何以知天下然哉 724, 54, 15, ., 2524.92, 以此 725, 55, 1, ., 2539.04, 含德之厚者 726, 55, 2, +, -, 比於赤子 727, 55, 3, ., 2544.18, 蜂蠆虺蛇不螫 728, 55, 4, ., 2547.30, 猛獸不據 729, 55, 5, ., 2549.84, 攫鳥不摶 730, 55, 6, ., 2552.20, 骨弱筋柔而握固 731, 55, 7, ., 2557.17, 未知牝牡之合而脧作 732, 55, 8, ., 2561.31, 精之至也 733, 55, 9, ., 2562.94, 終日號而不嗄 734, 55, 10, ., 2565.45, 和之至也 735, 55, 11, ., 2567.60, 知和曰常 736, 55, 12, ., 2570.88, 知常曰明 737, 55, 13, ., 2574.28, 益生曰祥 738, 55, 14, +, -, 心使氣曰強 739, 55, 15, +, -, 物壯則老 740, 55, 16, ., 2581.97, 謂之不道 741, 55, 17, ., 2583.78, 不道早已 742, 56, 1, ., 2599.74, 知者不言 743, 56, 2, ., 2602.89, 言者不知 744, 56, 3, ., 2606.04, 塞其兌閉其門 745, 56, 4, ., 2610.83, 挫其銳 746, 56, 5, +, -, 解其紛 747, 56, 6, +, -, 和其光 748, 56, 7, ., 2614.90, 同其塵 749, 56, 8, ., 2616.20, 是謂玄同 750, 56, 9, ., 2620.47, 故不可得而親 751, 56, 10, +, -, 不可得而疏 752, 56, 11, ., 2625.35, 不可得而利 753, 56, 12, +, -, 不可得而害 754, 56, 13, ., 2627.47, 不可得而貴 755, 56, 14, +, -, 不可得而賤 756, 56, 15, ., 2629.66, 故為天下貴 757, 57, 1, ., 2649.17, 以正治國 758, 57, 2, ., 2655.02, 以奇用兵 759, 57, 3, ., 2657.95, 以無事取天下 760, 57, 4, ., 2660.40, 吾何以知其然哉 761, 57, 5, ., 2662.23, 以此 762, 57, 6, +, -, 天下多忌諱 763, 57, 7, +, -, 而民彌貧 764, 57, 8, ., 2668.76, 民多利器 765, 57, 9, +, -, 而國家滋昏 766, 57, 10, ., 2672.92, 人多知巧 767, 57, 11, +, -, 而奇物滋起 768, 57, 12, ., 2677.48, 法物滋章 769, 57, 13, +, -, 盜賊多有 770, 57, 14, ., 2681.26, 故聖人云 771, 57, 15, ., 2683.08, 我無為而民自化 772, 57, 16, ., 2686.28, 我好靜而民自正 773, 57, 17, ., 2689.03, 我無事而民自富 774, 57, 18, ., 2691.81, 我無欲而民自樸 775, 58, 1, ., 2702.98, 其政悶悶 776, 58, 2, +, -, 其民淳淳 777, 58, 3, ., 2708.48, 其政察察 778, 58, 4, +, -, 其民缺缺 779, 58, 5, ., 2713.06, 禍兮福之所倚 780, 58, 6, ., 2716.65, 福兮禍之所伏 781, 58, 7, ., 2720.34, 孰知其極 782, 58, 8, ., 2723.44, 其無正 783, 58, 9, ., 2726.07, 正復為奇 784, 58, 10, +, -, 善復為妖 785, 58, 11, ., 2728.93, 人之迷 786, 58, 12, +, -, 其日固久 787, 58, 13, ., 2732.66, 是以聖人 788, 58, 14, +, -, 方而不割 789, 58, 15, ., 2738.25, 廉而不劌 790, 58, 16, ., 2741.37, 直而不肆 791, 58, 17, ., 2745.13, 光而不燿 792, 59, 1, ., 2759.03, 治人事天 793, 59, 2, +, -, 莫若嗇 794, 59, 3, ., 2765.78, 夫唯嗇 795, 59, 4, +, -, 是謂早服 796, 59, 5, ., 2768.86, 早服謂之重積德 797, 59, 6, ., 2771.90, 重積德 798, 59, 7, +, -, 則無不克 799, 59, 8, ., 2775.70, 無不克 800, 59, 9, +, -, 則莫知其極 801, 59, 10, ., 2778.57, 莫知其極 802, 59, 11, +, -, 可以有國 803, 59, 12, ., 2789.05, 有國之母 804, 59, 13, +, -, 可以長久 805, 59, 14, ., 2781.98, 是謂深根固柢 806, 59, 15, ., 2786.07, 長生久視之道 807, 60, 1, ., 2800.07, 治大國若烹小鮮 808, 60, 2, ., 2807.22, 以道莅天下 809, 60, 3, +, -, 其鬼不神 810, 60, 4, ., 2811.36, 非其鬼不神 811, 60, 5, +, -, 其神不傷人 812, 60, 6, ., 2816.59, 非其神不傷人 813, 60, 7, +, -, 聖人亦不傷人 814, 60, 8, ., 2821.86, 夫兩不相傷 815, 60, 9, +, -, 故德交歸焉 816, 61, 1, ., 2841.05, 大國者下流 817, 61, 2, ., 2846.13, 天下之交 818, 61, 3, +, -, 天下之牝 819, 61, 4, ., 2850.00, 牝常以靜勝牡 820, 61, 5, +, -, 以靜為下 821, 61, 6, ., 2855.83, 故大國以下小國 822, 61, 7, +, -, 則取小國 823, 61, 8, ., 2861.22, 小國以下大國 824, 61, 9, +, -, 則取於大國 825, 61, 10, ., 2866.85, 故或下以取 826, 61, 11, +, -, 或下而取 827, 61, 12, ., 2871.50, 大國不過欲兼畜人 828, 61, 13, ., 2874.15, 小國不過欲入事人 829, 61, 14, ., 2876.75, 夫兩者各得其所欲 830, 61, 15, ., 2879.42, 大者宜為下 831, 62, 1, ., 2882.47, 道者萬物之奧 832, 62, 2, ., 2888.09, 善人之寶 833, 62, 3, ., 2890.19, 不善人之所保 834, 62, 4, ., 2892.43, 美言可以市 835, 62, 5, ., 2895.41, 尊行可以加人 836, 62, 6, ., 2901.83, 人之不善 837, 62, 7, +, -, 何棄之有 838, 62, 8, ., 2904.68, 故立天子 839, 62, 9, +, -, 置三公 840, 62, 10, ., 2906.74, 雖有拱璧以先駟馬 841, 62, 11, ., 2910.17, 不如坐進此道 842, 62, 12, ., 2915.53, 古之所以貴此道者何 843, 62, 13, ., 2918.61, 不曰 844, 62, 14, +, -, 以求得 845, 62, 15, +, -, 有罪以免邪 846, 62, 16, ., 2923.10, 故為天下貴 847, 63, 1, ., 2935.09, 為無為 848, 63, 2, ., 2937.98, 事無事 849, 63, 3, ., 2940.04, 味無味 850, 63, 4, ., 2941.81, 大小多少 851, 63, 5, ., 2945.49, 報怨以德 852, 63, 6, ., 2948.03, 圖難於其易 853, 63, 7, ., 2950.77, 為大於其細 854, 63, 8, ., 2953.59, 天下難事必作於易 855, 63, 9, ., 2956.63, 天下大事必作於細 856, 63, 10, ., 2960.07, 是以聖人終不為大 857, 63, 11, +, -, 故能成其大 858, 63, 12, ., 2964.99, 夫輕諾必寡信 859, 63, 13, ., 2968.95, 多易必多難 860, 63, 14, ., 2971.70, 是以聖人猶難之 861, 63, 15, +, -, 故終無難矣 862, 64, 1, ., 2984.65, 其安易持 863, 64, 2, ., 2987.61, 其未兆易謀 864, 64, 3, ., 2990.96, 其脆易泮 865, 64, 4, ., 2993.85, 其微易散 866, 64, 5, ., 2996.79, 為之於未有 867, 64, 6, ., 2999.98, 治之於未亂 868, 64, 7, ., 3002.50, 合抱之木生於毫末 869, 64, 8, ., 3007.69, 九層之臺起於累土 870, 64, 9, ., 3011.31, 千里之行始於足下 871, 64, 10, ., 3015.42, 為者敗之 872, 64, 11, ., 3018.29, 執者失之 873, 64, 12, ., 3020.21, 是以聖人 874, 64, 13, +, -, 無為故無敗 875, 64, 14, ., 3024.10, 無執故無失 876, 64, 15, ., 3027.73, 民之從事常於幾成而敗之 877, 64, 16, ., 3031.68, 慎終如始 878, 64, 17, ., 3035.24, 則無敗事 879, 64, 18, ., 3037.11, 是以聖人 880, 64, 19, +, -, 欲不欲 881, 64, 20, +, -, 不貴難得之貨 882, 64, 21, ., 3042.78, 學不學 883, 64, 22, +, -, 復眾人之所過 884, 64, 23, ., 3045.87, 以輔萬物之自然 885, 64, 24, ., 3049.52, 而不敢為 886, 65, 1, ., 3062.72, 古之善為道者 887, 65, 2, ., 3067.93, 非以明民 888, 65, 3, +, -, 將以愚之 889, 65, 4, ., 3073.33, 民之難治 890, 65, 5, +, -, 以其知多 891, 65, 6, ., 3077.34, 故以知治國 892, 65, 7, +, -, 國之賊 893, 65, 8, ., 3080.93, 不以知治國 894, 65, 9, +, -, 國之福 895, 65, 10, ., 3085.16, 知此兩者亦稽式 896, 65, 11, +, -, 常知稽式 897, 65, 12, ., 3094.12, 是謂玄德 898, 65, 13, +, -, 玄德深矣遠矣 899, 65, 14, ., 3087.83, 與物反矣 900, 65, 15, +, -, 乃至大順 901, 66, 1, ., 3104.88, 江海所以能為百谷王者 902, 66, 2, ., 3108.42, 以其善下之 903, 66, 3, +, -, 故能為百谷王 904, 66, 4, ., 3112.52, 是以聖人 905, 66, 5, +, -, 欲上民 906, 66, 6, +, -, 必以言下之 907, 66, 7, ., 3117.55, 欲先民 908, 66, 8, +, -, 必以身後之 909, 66, 9, ., 3120.37, 是以聖人 910, 66, 10, +, -, 處上而民不重 911, 66, 11, ., 3125.92, 處前而民不害 912, 66, 12, ., 3129.72, 是以天下樂推而不厭 913, 66, 13, ., 3134.76, 以其不爭 914, 66, 14, +, -, 故天下莫能與之爭 915, 67, 1, ., 3153.52, 天下皆謂我大 916, 67, 2, ., 3157.73, 似不肖 917, 67, 3, ., 3158.84, 夫唯不肖故能大 918, 67, 4, ., 3167.79, 若肖 919, 67, 5, +, -, 久矣其細也 920, 67, 6, ., 3171.31, 夫我有三寶 921, 67, 7, +, -, 持而保之 922, 67, 8, ., 3175.55, 一曰慈 923, 67, 9, ., 3177.52, 二曰儉 924, 67, 10, ., 3179.12, 三曰不敢為天下先 925, 67, 11, ., 3181.61, 慈故能勇 926, 67, 12, ., 3183.81, 儉故能廣 927, 67, 13, ., 3186.42, 不敢為天下先 928, 67, 14, +, -, 故能成器長 929, 67, 15, ., 3189.11, 今舍慈且勇 930, 67, 16, ., 3191.79, 舍儉且廣 931, 67, 17, ., 3194.25, 舍後且先 932, 67, 18, ., 3196.62, 死矣 933, 67, 19, ., 3197.94, 夫慈以戰則勝 934, 67, 20, ., 3200.53, 以守則固 935, 67, 21, ., 3202.64, 天將救之 936, 67, 22, ., 3208.02, 以慈衛之 937, 68, 1, ., 3224.05, 善為士者不武 938, 68, 2, ., 3227.57, 善戰者不怒 939, 68, 3, ., 3229.64, 善勝敵者不與 940, 68, 4, ., 3232.03, 善用人者為之下 941, 68, 5, ., 3238.25, 是謂不爭之德 942, 68, 6, ., 3241.96, 是謂用人之力 943, 68, 7, ., 3244.96, 是謂配天古之極也 944, 69, 1, ., 3263.72, 用兵有言 945, 69, 2, ., 3266.40, 吾不敢為主而為客 946, 69, 3, ., 3269.88, 不敢進寸而退尺 947, 69, 4, ., 3274.05, 是謂行無行 948, 69, 5, ., 3277.79, 攘無臂 949, 69, 6, +, -, 扔無敵 950, 69, 7, +, -, 執無兵 951, 69, 8, ., 3280.89, 禍莫大於輕敵 952, 69, 9, ., 3285.42, 輕敵幾喪吾寶 953, 69, 10, ., 3291.12, 故抗兵相若 954, 69, 11, +, -, 則哀者勝矣 955, 70, 1, ., 3310.88, 吾言甚易知 956, 70, 2, +, -, 甚易行 957, 70, 3, ., 3316.76, 而天下莫之能知 958, 70, 4, +, -, 莫之能行 959, 70, 5, ., 3321.93, 言有宗 960, 70, 6, +, -, 事有君 961, 70, 7, ., 3325.58, 夫唯無知 962, 70, 8, ., 3327.13, 是以不我知 963, 70, 9, +, -, 知我者希 964, 70, 10, ., 3336.63, 則我者貴矣 965, 70, 11, ., 3329.42, 是以聖人 966, 70, 12, +, -, 被褐而懷玉 967, 71, 1, ., 3346.44, 知不知尚矣 968, 71, 2, ., 3349.19, 不知知病矣 969, 71, 3, ., 3351.90, 夫唯病病 970, 71, 4, +, -, 是以不病 971, 71, 5, ., 3357.01, 聖人不病 972, 71, 6, ., 3359.09, 以其病病 973, 71, 7, +, -, 是以不病 974, 72, 1, ., 3373.03, 民不畏威 975, 72, 2, ., 3377.21, 則大威至矣 976, 72, 3, ., 3381.73, 無狎其所居 977, 72, 4, ., 3384.12, 無厭其所生 978, 72, 5, ., 3387.12, 夫唯不厭 979, 72, 6, ., 3389.83, 是以不厭 980, 72, 7, ., 3392.94, 是以聖人 981, 72, 8, ., 3394.18, 自知不自見 982, 72, 9, ., 3397.00, 自愛不自貴 983, 72, 10, ., 3400.12, 故去彼取此 984, 73, 1, ., 3412.66, 勇於敢 985, 73, 2, +, -, 則殺 986, 73, 3, ., 3416.55, 勇於不敢 987, 73, 4, +, -, 則活 988, 73, 5, ., 3420.60, 此兩者或利或害 989, 73, 6, ., 3425.15, 天之所惡孰知其故 990, 73, 7, ., 3425.30, 是以聖人猶難之 991, 73, 8, ., 3425.48, 天之道 992, 73, 9, +, -, 不爭而善勝 993, 73, 10, ., 3428.62, 不言而善應 994, 73, 11, ., 3431.37, 不召而自來 995, 73, 12, ., 3435.42, 繟然而善謀 996, 73, 13, ., 3439.30, 天網恢恢 997, 73, 14, ., 3441.80, 疏而不失 998, 74, 1, ., 3457.00, 民不畏死 999, 74, 2, +, -, 奈何以死懼之 1000, 74, 3, ., 3462.69, 若使民常畏死 1001, 74, 4, ., 3464.53, 而為奇者吾得執而殺之 1002, 74, 5, +, -, 孰敢 1003, 74, 6, ., 3466.43, 常有司殺者 1004, 74, 7, ., 3468.80, 夫代司殺者殺 1005, 74, 8, +, -, 是謂代大匠斲 1006, 74, 9, ., 3474.57, 夫代大匠斲者 1007, 74, 10, +, -, 希不傷其手矣 1008, 75, 1, ., 3489.43, 民之饑 1009, 75, 2, +, -, 以其上食稅之多 1010, 75, 3, +, -, 是以饑 1011, 75, 4, ., 3492.96, 民之難治 1012, 75, 5, +, -, 以其上之有為 1013, 75, 6, +, -, 是以難治 1014, 75, 7, ., 3497.35, 民之輕死 1015, 75, 8, +, -, 以其求生之厚 1016, 75, 9, ., 3500.56, 是以輕死 1017, 75, 10, +, -, 夫唯無以生為者 1018, 75, 11, ., 3502.63, 是賢於貴生 1019, 76, 1, ., 3515.00, 人之生也柔弱 1020, 76, 2, ., 3521.57, 其死也堅強 1021, 76, 3, ., 3524.93, 萬物草木之生也柔脆 1022, 76, 4, ., 3530.52, 其死也枯槁 1023, 76, 5, ., 3532.74, 故堅強者死之徒 1024, 76, 6, ., 3536.06, 柔弱者生之徒 1025, 76, 7, ., 3538.83, 是以兵強則不勝 1026, 76, 8, ., 3541.69, 木強則兵 1027, 76, 9, ., 3545.04, 強大處下 1028, 76, 10, ., 3547.92, 柔弱處上 1029, 77, 1, ., 3560.60, 天之道其猶張弓與 1030, 77, 2, ., 3563.99, 高者抑之 1031, 77, 3, +, -, 下者舉之 1032, 77, 4, ., 3567.36, 有餘者損之 1033, 77, 5, +, -, 不足者補之 1034, 77, 6, ., 3570.34, 天之道 1035, 77, 7, +, -, 損有餘而補不足 1036, 77, 8, ., 3574.20, 人之道則不然 1037, 77, 9, ., 3576.87, 損不足以奉有餘 1038, 77, 10, ., 3580.81, 孰能有餘而奉於天下 1039, 77, 11, ., 3584.02, 唯有道者 1040, 77, 12, +, -, 是以聖人 1041, 77, 13, +, -, 為而不恃 1042, 77, 14, ., 3594.22, 功成而不處 1043, 77, 15, +, -, 其不欲見賢 1044, 78, 1, ., 3612.93, 天下莫柔弱於水 1045, 78, 2, ., 3617.23, 而攻堅強者 1046, 78, 3, ., 3620.79, 莫之能勝 1047, 78, 4, +, -, 以其無以易之 1048, 78, 5, ., 3623.70, 弱之勝強 1049, 78, 6, ., 3626.32, 柔之勝剛 1050, 78, 7, ., 3628.37, 天下莫不知 1051, 78, 8, ., 3631.35, 莫能行 1052, 78, 9, ., 3633.49, 是以聖人云 1053, 78, 10, ., 3635.03, 受國之垢 1054, 78, 11, +, -, 是謂社稷之主 1055, 78, 12, ., 3637.50, 受國之不祥 1056, 78, 13, ., 3639.74, 是謂天下之王 1057, 78, 14, ., 3643.59, 正言若反 1058, 79, 1, ., 3656.28, 和大怨 1059, 79, 2, +, -, 必有餘怨 1060, 79, 3, ., 3660.48, 安可以為善 1061, 79, 4, ., 3670.86, 是以聖人 1062, 79, 5, +, -, 執左契 1063, 79, 6, +, -, 而不責於人 1064, 79, 7, ., 3674.15, 故有德司契 1065, 79, 8, +, -, 無德司徹 1066, 79, 9, ., 3681.15, 天道無親 1067, 79, 10, +, -, 常與善人 1068, 80, 1, ., 3694.96, 小國寡民 1069, 80, 2, ., 3700.27, 使有什伯之器而不用 1070, 80, 3, ., 3705.56, 使民重死而不遠徙 1071, 80, 4, ., 3712.82, 雖有舟輿無所乘之 1072, 80, 5, ., 3698.18, 雖有甲兵無所陳之 1073, 80, 6, ., 3716.13, 使民復結繩而用之 1074, 80, 7, ., 3716.26, 甘其食 1075, 80, 8, ., 3718.12, 美其服 1076, 80, 9, ., 3720.03, 安其居 1077, 80, 10, ., 3721.89, 樂其俗 1078, 80, 11, ., 3724.08, 鄰國相望 1079, 80, 12, +, -, 雞犬之聲相聞 1080, 80, 13, ., 3730.42, 民至老死 1081, 80, 14, +, -, 不相往來 1082, 81, 1, ., 3745.00, 信言不美 1083, 81, 2, +, -, 美言不信 1084, 81, 3, ., 3750.96, 善者不辯 1085, 81, 4, +, -, 辯者不善 1086, 81, 5, ., 3755.53, 知者不博 1087, 81, 6, +, -, 博者不知 1088, 81, 7, ., 3761.77, 聖人不積 1089, 81, 8, ., 3764.33, 既以為人己愈有 1090, 81, 9, ., 3766.29, 既以與人己愈多 1091, 81, 10, ., 3768.97, 天之道利而不害 1092, 81, 11, ., 3773.44, 聖人之道為而不爭 `); display(`slatMap`);30:T10c7,// Codec for the slat map text. Kept apart from the data so an editing UI can read // rows, change them, and call slatMapCellText() for a replacement cell — and so // the data cell can call parseSlats() without a dependency cycle. // Row: row, chapter, line, join, start, text. join "+" means this line continues // the previous row's slat, "." starts a new one, so several JSON sentences can be // read as a single slat. Only a slat's first row carries a start time. // Only the commas are structural; column padding is cosmetic and rebuilt here. // The older 5-field format (no join column) still parses, as all-new-slats. const SLAT_HEADER = "#row, ch, line, j, start, text"; const SLAT_MAX_WARNINGS = 40; function parseSlats(text) { // -> rows, with .warnings; never throws const rows = [], warnings = []; let ln = 0, suppressed = 0; const warn = (m) => { warnings.length < SLAT_MAX_WARNINGS ? warnings.push(m) : suppressed++; }; const num = (s, where) => { // "-" or empty means no start const v = String(s).trim(); if (v === "-" || v === "") return null; const x = Number(v); if (!isFinite(x)) { warn(`${where}: "${v}" is not a number`); return null; } return x; }; for (const raw of String(text).split("\n")) { ln++; const s = raw.trim(); if (!s || s.startsWith("#")) continue; const f = s.split(","); if (f.length < 5) { warn(`line ${ln}: needs 5 commas, found ${f.length - 1} in "${s.slice(0, 40)}"`); continue; } const legacy = f.length === 5; // no join column const at = `row ${f[0].trim()}`; const cont = legacy ? false : f[3].trim() === "+"; const r = { i: rows.length, row: num(f[0], at), chapter: num(f[1], at), line: num(f[2], at), cont: cont && rows.length > 0, t0: num(legacy ? f[3] : f[4], at), text: (legacy ? f.slice(4) : f.slice(5)).join(",").trim() }; if (cont && rows.length === 0) warn("row 1 cannot continue a previous slat"); if (r.row !== null && r.row !== rows.length + 1) warn(`row ${r.row}: sitting at position ${rows.length + 1} — a row was added or removed`); rows.push(r); } // Starts need NOT increase with row order: the English does not always cover the // Chinese lines in order, so a later line may be read earlier. Only an exact // collision is a problem, since it makes the time -> slat lookup ambiguous. const seen = new Map(); for (const r of rows) { if (r.cont || r.t0 == null) continue; if (seen.has(r.t0)) warn(`row ${r.row}: start ${r.t0} is already used by row ${seen.get(r.t0)}`); else seen.set(r.t0, r.row); } if (suppressed) warnings.push(`\u2026 and ${suppressed} more`); rows.warnings = warnings; return rows; } function formatSlats(rows) { // -> text, rows renumbered from position const f = (x) => (x == null ? "-" : Number(x).toFixed(2)); const out = [SLAT_HEADER]; rows.forEach((r, k) => { const cont = k > 0 && !!r.cont; out.push([ String(k + 1).padStart(4), String(r.chapter).padStart(2), String(r.line).padStart(4), cont ? "+" : ".", (cont ? "-" : f(r.t0)).padStart(8), r.text || "" ].join(", ")); }); return out.join("\n"); } function slatMapCellText(rows) { // -> a complete pasteable cell const BT = "\u0060"; return [ "// Slat map: row, chapter, line, join, start, Chinese — one row per JSON sentence.", '// join "+" means the line continues the previous row\'s slat, so several lines read', "// as one; only a slat's first row carries a start time. A slat runs until the next", '// timed slat starts, so there is no end column. "-" start = not read aloud.', "// Only the commas are structural. Hand-edit freely; parseSlats() reports problems", "// in slatMap.warnings and renumbers the rows whenever the map is regenerated.", "", "const slatMap = parseSlats(" + BT, formatSlats(rows), BT + ");", "", "display(slatMap);" ].join("\n"); } async function copySlatMapCell(rows) { const t = slatMapCellText(rows); try { await navigator.clipboard.writeText(t); return true; } catch { return false; } } const slatCodec = { parseSlats, formatSlats, slatMapCellText, copySlatMapCell, header: SLAT_HEADER }; display('slatCodec');31:T1256,// Lookups over the slat map, used by the reader and the playback bar. // A SLAT is one or more consecutive map rows: a row whose join is "+" continues the // slat before it, so several JSON sentences can be read as one line. Slat indices // are what everything else counts in, and they match the reader's plank indices. // READING ORDER is separate from slat order: the English does not always cover the // Chinese lines in order, so a later slat may be read earlier. Times are sorted into // a reading order, and a slat runs until whatever is read NEXT begins. // slatAt(sec) -> slat timeOf(i) -> sec rangeOf(i) locate(i) isRead(i) // rowsOf(i) -> the map rows that make up slat i // readingOrder -> slat indices, earliest first orderPos(i) -> place in that order // rebuild() -> re-derive after the timing editor mutates slatMap in place const slatSync = (() => { const rows = slatMap; let slats = [], ts = [], order = [], orderPos = [], nextStart = [], seekTo = [], chapters = [], chOf = []; function rebuild() { slats = []; rows.forEach((r, i) => { const last = slats[slats.length - 1]; if (last && r.cont) { last.rows.push(i); last.text += (r.text || ""); } else slats.push({ rows: [i], t0: r.t0, chapter: r.chapter, line: r.line, text: r.text || "" }); }); order = []; slats.forEach((s, k) => { s.t0 = rows[s.rows[0]].t0; if (s.t0 != null) order.push(k); }); order.sort((a, b) => slats[a].t0 - slats[b].t0 || a - b); // reading order, not slat order ts = order.map((k) => slats[k].t0); orderPos = new Array(slats.length).fill(-1); order.forEach((k, i) => { orderPos[k] = i; }); nextStart = new Array(slats.length).fill(null); // implied end: whatever is read next order.forEach((k, i) => { nextStart[k] = i + 1 < order.length ? ts[i + 1] : null; }); // A seekable time for every slat, unread ones included: those borrow the next // read slat in TEXT order, which is where that passage sits in the recording. seekTo = new Array(slats.length); let ahead = null; for (let k = slats.length - 1; k >= 0; k--) { seekTo[k] = slats[k].t0 != null ? slats[k].t0 : (ahead ?? (ts.length ? ts[ts.length - 1] : 0)); if (slats[k].t0 != null) ahead = slats[k].t0; } chapters = []; // derived, so edits cannot desync it slats.forEach((s, k) => { const last = chapters[chapters.length - 1]; if (!last || last.chapter !== s.chapter) chapters.push({ chapter: s.chapter, slat0: k, n: 1, read: s.t0 != null }); else { last.n++; if (s.t0 != null) last.read = true; } }); for (const c of chapters) { // span the chapter's slats, which may be read out of order let lo = null, hi = null; for (let k = c.slat0; k < c.slat0 + c.n; k++) { const t = slats[k].t0; if (t == null) continue; if (lo == null || t < lo) lo = t; const e = nextStart[k]; if (e != null && (hi == null || e > hi)) hi = e; } c.t0 = lo; c.t1 = hi; } chOf = new Array(slats.length); for (const c of chapters) for (let k = 0; k < c.n; k++) chOf[c.slat0 + k] = c; api.readingOrder = order; api.n = slats.length; api.slats = slats; api.timed = ts.length; api.chapters = chapters; api.lastStart = ts.length ? ts[ts.length - 1] : 0; api.duration = api.lastStart; api.unreadChapters = chapters.filter((c) => !c.read).map((c) => c.chapter); api.warnings = rows.warnings || []; return api; } const slatAt = (sec) => { // whatever was read most recently at or before sec if (!ts.length) return 0; let lo = 0, hi = ts.length - 1, k = -1; while (lo <= hi) { const m = (lo + hi) >> 1; if (ts[m] <= sec) { k = m; lo = m + 1; } else hi = m - 1; } return order[k < 0 ? 0 : k]; }; const api = { rows, rebuild, slatAt, timeOf: (k) => seekTo[k], rangeOf: (k) => (slats[k] && slats[k].t0 != null ? [slats[k].t0, nextStart[k]] : null), isRead: (k) => !!slats[k] && slats[k].t0 != null, rowsOf: (k) => (slats[k] ? slats[k].rows.slice() : []), orderPos: (k) => orderPos[k], locate: (k) => { const c = chOf[k]; return c ? { chapter: c.chapter, line: k - c.slat0 + 1, of: c.n, read: slats[k].t0 != null } : null; } }; rebuild(); const warn = api.warnings; if (warn.length) display(html`

${warn.length} slat map warning${warn.length > 1 ? "s" : ""}: ${warn.slice(0, 4).join("; ")}${warn.length > 4 ? " \u2026" : ""}

`); return api; })(); display('slatSync');32:T5b56,const fontUrl = await FileAttachment("chongxi_seal_patched (1).otf").url(); // Values the reader's JS needs as well as its CSS: the canvas that measures // glyphs and gloss widths has to be handed the very same stacks and sizes the // rules below are written with. Defined once here, read back through ddjStyle, // so the two can never drift. const SEAL_STACK = "'SealScript','Songti SC','Noto Serif CJK SC','SimSun',serif"; const SERIF_STACK = "'Lora','Iowan Old Style','Palatino Linotype','Palatino','Songti SC','Noto Serif CJK SC',Georgia,serif"; const GLOSS_SIZE = 15.5; const TIP_RADIUS = 7; const TIP_CARET = 8; const TIP_CARET_LEN = 8; const TIP_EDGE = 'rgba(255,255,255,.5)'; // Lora for the reading faces, Nunito for the labels. Reused and updated in // place rather than appended, so a re-run cannot stack copies. { const href='https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600&family=Nunito:wght@400;600;700&display=swap'; let fl=document.querySelector('link[data-ddj-font]'); if(!fl){ fl=document.createElement('link'); fl.rel='stylesheet'; fl.setAttribute('data-ddj-font','ddj'); document.head.appendChild(fl); } if(fl.getAttribute('href')!==href) fl.setAttribute('href',href); } { const id = "ddj-global-style"; document.getElementById(id)?.remove(); // avoid dupes on re-run const style = document.createElement("style"); style.id = id; style.textContent = ` @font-face{ font-family:'SealScript'; src:url("${fontUrl}") format('opentype'); font-display:swap; } /* notebook-wide background \u2014 the light-green jade field */ html, body{ background:radial-gradient(120% 90% at 50% 30%, #dfe9dc 55%, #cfdcca 100%) fixed; } /* Notebook prose and headings in Lora, matching the reader's gloss and tooltips. FAMILY ONLY \u2014 Observable's own sizes, weights and spacing are left exactly as they were. Headings take inherit rather than the stack again, so there is one place to change and no chance of the two lines disagreeing. Code keeps its own monospace; it never inherits. */ body{ font-family:${SERIF_STACK}; } h1,h2,h3,h4,h5,h6, .observablehq h1,.observablehq h2,.observablehq h3, .observablehq h4,.observablehq h5,.observablehq h6{ font-family:inherit; } /* Headings as plain text. The anchor is left in place and only de-styled, because in some builds the heading's whole text sits INSIDE it — hiding it would hide the heading. Rules are duplicated under .observablehq since a class-qualified link rule outranks a bare h2 a on specificity. */ h1,h2,h3,h4,h5,h6, .observablehq h1,.observablehq h2,.observablehq h3, .observablehq h4,.observablehq h5,.observablehq h6{ text-decoration:none; border-bottom:none; } h1 a,h2 a,h3 a,h4 a,h5 a,h6 a, h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover, h1 a:visited,h2 a:visited,h3 a:visited,h4 a:visited,h5 a:visited,h6 a:visited, .observablehq h1 a,.observablehq h2 a,.observablehq h3 a, .observablehq h4 a,.observablehq h5 a,.observablehq h6 a, .observablehq h1 a:hover,.observablehq h2 a:hover,.observablehq h3 a:hover, .observablehq h4 a:hover,.observablehq h5 a:hover,.observablehq h6 a:hover{ color:inherit; text-decoration:none; border-bottom:none; background:none; font:inherit; } /* \u2500\u2500 reader \u2500\u2500 everything below is scoped to .ddj-root \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */ .ddj-root{ --jade:#dfe9dc; --jade-deep:#cfdcca; --ink:#2b2118; --ink-soft:#4a5245; --ink-faint:#7d887a; --cinnabar:#b0402a; --panel:rgba(250,252,247,.72); --ring-ink:rgba(255,255,255,.92); /* the hover frame's line colour */ --ring-fill:rgba(255,255,255,.2); /* the wash inside the frame */ /* the glow is the whole filter list, not one shadow: a tight core to thicken the line, then a broad halo to lift it off the bamboo. Widen the second radius for more bloom, raise its alpha for more intensity. */ --ring-glow:drop-shadow(0 0 4px rgba(255,255,255,.75)) drop-shadow(0 0 17px rgba(255,255,255,.5)); --pad-x:0px; --pad-y:8px; /* strip inset: 0 in notebook (page supplies the margin), real padding in full screen */ /* controls sit at the TOP in the notebook so they are visible while scrolling past, and at the BOTTOM in full screen, like a video player. The :fullscreen rule flips these. */ /* NOTEBOOK: two rows — the labelled buttons, then the scrubber beneath them, which leaves the track full width and room for a word beside each glyph. FULL SCREEN: one row at the very bottom, glyphs only, with the track between them, so the slats get everything above it. Both rows are --row-h tall, and a glyph's centre lands at 15px in — exactly where the scrubber centres its track, segments, and handle. */ --row-h:30px; --btn-top:var(--pad-y); --btn-bottom:auto; --scrub-top:calc(var(--pad-y) + 40px); --scrub-bottom:auto; --scrub-l:var(--pad-x); --scrub-r:var(--pad-x); --count-top:calc(var(--pad-y) + 82px); --count-bottom:auto; --lbl:inline; /* the word beside each glyph; switched off in full screen */ --serif:${SERIF_STACK}; --ui:'Nunito',ui-sans-serif,-apple-system,'Segoe UI',sans-serif; /* One size, one weight, one tracking for every small sans label. They had drifted to 9 / 9.5 / 10 / 11px with no weight set at all, which reads as four near-misses rather than one system. Change them here, once. */ --ui-size:10px; --ui-weight:600; --ui-track:.14em; /* Reading sizes, all nudged up together so the scale between them is intact: was 14 / 10.5 for the gloss and 12.5 / 12 / 13.5 in the tooltip. */ --gloss-size:${GLOSS_SIZE}px; --gloss-note:12px; --tip-lead:14px; /* the reading, and the dictionary sense beside it */ --tip-body:13.5px; /* formation, and each component's description */ --tip-py:15px; /* a component given for its sound */ --seal:${SEAL_STACK}; --ease:cubic-bezier(.25,.8,.3,1); --dur:280ms; font-family:var(--serif); user-select:none;-webkit-user-select:none; } .ddj-root:focus,.ddj-root:focus-visible{outline:none;} /* Every all-caps sans label: chapter tags, AUDIO / FULL SCREEN, the scrubber's CH, and AHEAD / READ. Colour stays per-use — these sit on bamboo, on jade and on a button, and want different weights of ink. */ .ddj-chap .en,.ddj-lbl,.ddj-slbl,.ddj-count{ font-family:var(--ui,sans-serif); font-size:var(--ui-size); font-weight:var(--ui-weight); letter-spacing:var(--ui-track); text-transform:uppercase; } /* border-radius:inherit so the deck rounds off the slats at the corners by itself. The root used to do that with its own overflow:hidden; the deck is the only child that ever actually needed clipping, and taking it off the root is what lets the play target reach outside the reader. */ .ddj-deck{position:absolute;inset:0;perspective:1200px;perspective-origin:50% 42%; cursor:grab;touch-action:none;overflow:hidden;border-radius:inherit;} .ddj-deck.dragging{cursor:grabbing;} .ddj-deck.dragging .ddj-plank{transition:none!important;} /* --shs folds the size knob and the pile fade into one multiplier, and --slat-shadow is the drop shadow itself. Both are declared here, on the element that carries the per-slat --sh, so the value each slat inherits is already resolved; .ddj-body then just references it. */ .ddj-plank{position:absolute;top:0;left:0;will-change:transform,opacity;cursor:pointer; --shs:calc(var(--shadow-scale,1) * var(--sh,1)); --slat-shadow:0 calc(3px*var(--shs)) calc(7px*var(--shs)) calc(-2px*var(--shs)) rgba(43,33,24,calc(.20*var(--sh,1))), 0 calc(10px*var(--shs)) calc(22px*var(--shs)) calc(-8px*var(--shs)) rgba(43,33,24,calc(.26*var(--sh,1))); opacity:calc(1 - var(--vanish,0));} /* The shadow is painted on the SAME element that carries the hover tilt, so the slat and its cast shadow are rendered as one image and then projected by the perspective together. No preserve-3d or backface-visibility: every child here is flat and rotateY never passes 22deg, so both only forced extra layers. */ .ddj-body{position:relative;border-radius:9px/14px; transform:perspective(560px) rotateX(var(--rx,0)) rotateY(var(--ry,0)); transition:transform 90ms var(--ease); box-shadow:var(--slat-shadow), inset 0 1px 1px rgba(255,255,255,.35), inset 0 -2px 3px rgba(0,0,0,.12);} .ddj-root.shadow-flat .ddj-plank{box-shadow:var(--slat-shadow);} .ddj-root.shadow-flat .ddj-body{box-shadow:inset 0 1px 1px rgba(255,255,255,.35), inset 0 -2px 3px rgba(0,0,0,.12);} .ddj-fog{position:absolute;inset:0;border-radius:inherit;pointer-events:none; opacity:var(--fog,0);background:linear-gradient(#dde8da,#d8e3d4);} .ddj-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0; transition:opacity var(--dur) var(--ease);mix-blend-mode:soft-light; background:radial-gradient(60% 50% at var(--sx,50%) var(--sy,30%), rgba(255,255,255,.9),transparent 70%);} .ddj-plank.hovering .ddj-sheen{opacity:.55;} /* hover frame: an inline SVG sized and positioned by makeRing(), sitting outside the slat on every side. overflow:visible so the outermost stroke is never clipped by the svg's own viewport. */ .ddj-ring{position:absolute;pointer-events:none;overflow:visible;opacity:0; transition:opacity var(--dur) var(--ease); filter:var(--ring-glow);} .ddj-plank.hovering .ddj-ring{opacity:1;} /* the wash the frame encloses. It is a sibling of the body, appended before it, so it paints BEHIND the bamboo: a child could never get under its own parent's background. The slat is opaque, so what actually shows is a soft white plate in the margin band, out to the frame's line. It repeats the body's tilt — same plane, same perspective, same centre — so the band stays even when the slat turns; --rx/--ry are set on the plank and inherit here. The pile fade is no longer applied here: .ddj-plank now carries the vanish opacity, and this sits inside it. */ .ddj-rfill{position:absolute;pointer-events:none;opacity:0; background:var(--ring-fill); transform:perspective(560px) rotateX(var(--rx,0)) rotateY(var(--ry,0)); transition:opacity var(--dur) var(--ease),transform 90ms var(--ease);} .ddj-plank.hovering .ddj-rfill{opacity:1;} /* Parallel-verse partners. An INSET ring, not an outline: outline-offset draws a second rounded rect outside the slip, and the browser derives its radii by adding the offset to the slat's randomised elliptical corners, so it drifts out of register and reads as a misplaced shadow. An inset ring follows the element's real border curve and cannot diverge. Alpha is lower than the old outline's because a line on the bamboo reads stronger than one on the jade. This restates .ddj-body's whole box-shadow, drop shadow included. */ .ddj-plank.pp-partner .ddj-body{ box-shadow:var(--slat-shadow), inset 0 0 0 1.5px rgba(176,64,42,.22), inset 0 1px 1px rgba(255,255,255,.35), inset 0 -2px 3px rgba(0,0,0,.12);} .ddj-root.shadow-flat .ddj-plank.pp-partner .ddj-body{ box-shadow:inset 0 0 0 1.5px rgba(176,64,42,.22), inset 0 1px 1px rgba(255,255,255,.35), inset 0 -2px 3px rgba(0,0,0,.12);} .ddj-ch{position:absolute;left:50%;transform:translateX(-50%); font-family:var(--seal,serif);color:var(--ink,#2b2118);pointer-events:none; line-height:1;text-shadow:0 1px 0 rgba(255,255,255,.25); transition:color 160ms var(--ease);} .ddj-ch.hl{color:var(--cinnabar,#b0402a);} .ddj-region{position:absolute;left:0;width:100%;pointer-events:auto;background:transparent;cursor:pointer;} .ddj-chap{position:absolute;left:50%;bottom:100%;transform:translateX(-50%); margin-bottom:8px;text-align:center;pointer-events:none;white-space:nowrap;cursor:pointer; opacity:calc((1 - var(--fog,0)) * var(--tagfade,1));transition:opacity 160ms var(--ease);} .ddj-ctag{left:0;top:0;bottom:auto;margin-bottom:0;transform:translate(-50%,-100%); transform-origin:bottom center;z-index:55;pointer-events:auto;opacity:0;will-change:transform,opacity; transition:opacity 150ms var(--ease);} .ddj-chap .cn{display:block;font-family:var(--seal,serif);color:var(--ink,#2b2118);font-size:18px;} .ddj-chap .en{display:block;color:var(--ink-faint,#7d887a);margin-top:2px;} /* title slats: the big 道德經 written across the opening blank slips. The clip is on .ddj-tclip rather than the body so the hover frame, which deliberately overhangs the slat, is not cut off. */ .ddj-tclip{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;} .ddj-tstrip{position:absolute;top:0;height:100%;pointer-events:none;} .ddj-tch{position:absolute;left:50%;transform:translateX(-50%); font-family:var(--seal,serif);line-height:1;color:var(--ink,#2b2118); mix-blend-mode:multiply;pointer-events:none;} .ddj-gloss{position:absolute;top:0;left:0;z-index:30;pointer-events:none; will-change:transform,opacity;} .ddj-gitem{position:absolute;left:0;transform:translateY(-50%); pointer-events:auto;padding:2px 0;} .ddj-gen{font-size:var(--gloss-size);line-height:1.28;color:var(--ink-soft,#4a5245); display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:color 160ms var(--ease);} .ddj-gitem.ddj-multi .ddj-gen{ display:-webkit-box;white-space:normal;text-overflow:clip; -webkit-line-clamp:6;-webkit-box-orient:vertical;} .ddj-gitem.hl .ddj-gen{color:var(--ink,#2b2118);} .ddj-gnote{font-size:var(--gloss-note);line-height:1.25;color:var(--ink-faint,#7d887a);margin-top:1px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} /* etymology tooltip: frosted jade glass. The tint is the field's own gradient at low alpha, so the panel reads as the background thickening rather than as a window laid over it; the blur is what makes the text legible. */ .ddj-tip{position:absolute;top:0;left:0;z-index:200;pointer-events:none; box-sizing:border-box;padding:11px 13px 12px;border-radius:${TIP_RADIUS}px; background:radial-gradient(120% 90% at 50% 30%, rgba(223,233,220,.58) 55%, rgba(207,220,202,.66) 100%); -webkit-backdrop-filter:blur(13px) saturate(1.25); backdrop-filter:blur(13px) saturate(1.25); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); overflow:hidden;opacity:0; transition:opacity 170ms var(--ease); will-change:transform,opacity;} .ddj-tip.show{opacity:1;} /* Stroked at 2px and clipped by the panel's own clip-path, so the outer half is cut and exactly 1px is left sitting on the boundary — panel and caret in one unbroken line. z-index:-1 keeps it above the glass and under the text. */ .ddj-tip-edge{position:absolute;left:0;top:0;z-index:-1;pointer-events:none;overflow:visible;} .ddj-tip-edge path{fill:none;stroke:${TIP_EDGE};stroke-width:2;stroke-linejoin:round;} .ddj-tip.tip-caret-r{padding-right:${13+TIP_CARET_LEN}px;} .ddj-tip.tip-caret-l{padding-left:${13+TIP_CARET_LEN}px;} /* every band is the same row: a fixed left column — the reading, then the character, then each component — against its text */ .ddj-tip-row,.ddj-tip-comp{display:flex;align-items:center;gap:10px;} .ddj-tip-hpy,.ddj-tip-glyph,.ddj-tip-cglyph{flex:0 0 auto; width:calc(var(--tip-glyph) * 1.06);text-align:center;} .ddj-tip-hpy{font-size:var(--tip-lead);line-height:1.2;color:var(--ink-soft,#4a5245);white-space:nowrap;} .ddj-tip-glyph{font-family:var(--seal,serif);font-size:var(--tip-glyph);line-height:1; color:var(--ink,#2b2118);} .ddj-tip-row .ddj-tip-cm{line-height:1.42;} .ddj-tip-rule{height:1px;margin:10px 0 9px; background:linear-gradient(90deg,rgba(43,33,24,.16),rgba(43,33,24,.04));} .ddj-tip-comps{display:flex;flex-direction:column;gap:8px;} .ddj-tip-comps.across{flex-direction:row;gap:9px;align-items:flex-start;} .ddj-tip-comps.across .ddj-tip-comp{flex-direction:column;align-items:center;text-align:center; flex:1 1 0;min-width:0;gap:3px;} .ddj-tip-cglyph{font-family:var(--seal,serif);font-size:var(--tip-glyph);line-height:1; color:var(--ink,#2b2118);} .ddj-tip-comps.across .ddj-tip-cglyph{width:auto;} .ddj-tip-cbody{min-width:0;} .ddj-tip-cm{font-size:var(--tip-body);line-height:1.32;color:var(--ink-soft,#4a5245);} .ddj-tip-cpy{font-size:var(--tip-py);line-height:1.3;color:var(--ink,#2b2118);letter-spacing:.01em;} .ddj-tip-han{font-family:var(--seal,serif);font-size:1.22em;line-height:1; letter-spacing:.02em;color:var(--ink,#2b2118);} .ddj-tip-crole{font-family:var(--ui,sans-serif);font-size:var(--ui-size); font-weight:var(--ui-weight);letter-spacing:.06em;color:var(--ink-faint,#7d887a); margin-top:1px;} .ddj-tip-mean{font-size:var(--tip-lead);line-height:1.38;color:var(--ink,#2b2118);} /* height matches .ddj-scrub, so when the two share a row in full screen each glyph's centre sits on the track. gap is the space to the label beside it. */ .ddj-strip{position:absolute;top:var(--btn-top);bottom:var(--btn-bottom);z-index:70;height:var(--row-h);cursor:pointer; gap:8px; display:flex;align-items:center;justify-content:flex-start; background:none;border:0;padding:0;margin:0; -webkit-appearance:none;appearance:none; transition:opacity 160ms var(--ease),color 160ms var(--ease);} .ddj-strip:focus{outline:none;} .ddj-strip:focus-visible{outline:1px solid rgba(43,33,24,.3);outline-offset:3px;} /* Both buttons are auto-width so the label can sit beside the glyph; in full screen --lbl:none collapses them back to the glyph alone. */ .ddj-lbl{display:var(--lbl,inline);white-space:nowrap;} .ddj-ico{display:block;flex:0 0 auto;} /* glyph paths start at x=0 in their viewBox so the ink sits flush at --pad-x */ .ddj-play{left:var(--pad-x);color:var(--ink,#2b2118);opacity:.55;} .ddj-play:hover{opacity:1;} .ddj-play .ddj-ico svg{width:10px;height:12px;display:block;fill:currentColor;} /* The actual target: a transparent square centred on the GLYPH, not on the button — the button grows when the label shows, and the square must not drift right with it. The glyph is 10px wide and flush left, so its centre is always 5px in. Sized by sizePlayHit(); a pseudo-element, so the glyph does not move and nothing else in the row is reflowed. */ /* The target is NOT a square centred on the glyph any more: centred, it could never reach the screen corner without also running into the scrubber, which sits only ~27px to the right. Each edge is set independently by sizePlayHit() — out to the corner on the left and below, held short of the scrubber on the right, and no higher than the control row's own top so it never reaches up into the slats. Anchored to the GLYPH (5px in) rather than to the button, which grows when its label shows. */ .ddj-play::before{content:'';position:absolute; left:calc(5px - var(--hit-l,11px)); top:calc(50% - var(--hit-t,11px)); width:calc(var(--hit-l,11px) + var(--hit-r,11px)); height:calc(var(--hit-t,11px) + var(--hit-b,11px));} /* the corner icon is stroked, not filled like the play glyph, so it needs its own paint rules. Label first, then the icon, so it reads inward from the edge. */ .ddj-fs{right:var(--pad-x);color:var(--ink,#2b2118);opacity:.55;} .ddj-fs:hover{opacity:1;} .ddj-fs .ddj-ico svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor; stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;} .ddj-scrub{position:absolute;top:var(--scrub-top);bottom:var(--scrub-bottom);left:var(--scrub-l);right:var(--scrub-r); height:var(--row-h);z-index:60; opacity:.6;transition:opacity 200ms var(--ease);cursor:pointer;touch-action:none;} .ddj-scrub.hov,.ddj-scrub.scrubbing{opacity:1;} .ddj-sread{position:absolute;top:14px;left:0;height:2px;background:rgba(43,33,24,.34); transition:opacity 160ms var(--ease);} .ddj-sleft{position:absolute;top:14px;right:0;height:2px;background:rgba(43,33,24,.14); transition:opacity 160ms var(--ease);} .ddj-scrub.hov .ddj-sread,.ddj-scrub.hov .ddj-sleft, .ddj-scrub.scrubbing .ddj-sread,.ddj-scrub.scrubbing .ddj-sleft{opacity:0;} .ddj-seg{position:absolute;top:13px;height:4px;background:rgba(43,33,24,.12); opacity:0;transition:opacity 160ms var(--ease);} .ddj-scrub.hov .ddj-seg,.ddj-scrub.scrubbing .ddj-seg{opacity:1;} .ddj-sfill{position:absolute;left:0;top:0;height:100%;background:rgba(43,33,24,.4);} .ddj-shandle{position:absolute;top:11px;width:8px;height:8px;border-radius:50%; background:var(--ink,#2b2118);transform:translateX(-50%);z-index:2;} /* line-height:1 pins the box so top:-6px clears the handle at top:11px */ .ddj-slbl{position:absolute;top:-6px;transform:translateX(-50%);line-height:1; color:var(--ink-soft,#4a5245);opacity:0;transition:opacity 160ms var(--ease);white-space:nowrap;} .ddj-scrub.hov .ddj-slbl,.ddj-scrub.scrubbing .ddj-slbl{opacity:1;} /* The counts pass in front of the slats, so they carry a halo in the field's own colour to stay legible against bamboo. See --count-halo: it is a ring of text-shadows rather than -webkit-text-stroke, because that always miters. */ .ddj-count{position:absolute;top:var(--count-top);bottom:var(--count-bottom); text-shadow:var(--count-halo); color:var(--ink-faint,#7d887a);pointer-events:none;z-index:15;} .ddj-root:fullscreen,.ddj-root:-webkit-full-screen{ width:100vw;height:100vh;max-height:none;border-radius:0; --pad-x:26px; --pad-y:18px; /* one row: buttons and track share the bottom band, labels off, so nothing but --pad-y sits below the slats' clearance */ /* -5px: the row sits 5px lower than --pad-y would put it. rowTopPx() is measured, so the slats pick up those 5px of height on their own. */ --btn-top:auto; --btn-bottom:calc(var(--pad-y) - 5px); --scrub-top:auto; --scrub-bottom:calc(var(--pad-y) - 5px); --scrub-l:calc(var(--pad-x) + 32px); --scrub-r:calc(var(--pad-x) + 30px); --lbl:none; /* the counts sit at the slats' bottom edge and are allowed to overlap them: reserving a band for two words of 10px type is what was costing the slats their height, and they are pointer-events:none, so nothing is blocked. */ --count-top:auto; --count-bottom:calc(var(--pad-y) + 38px); overscroll-behavior:contain;} .ddj-toast{position:absolute;z-index:120;pointer-events:none;transform:translate(-50%,-140%); font:13px var(--serif,serif);color:#f3efe6;background:rgba(43,33,24,.88); padding:4px 10px;border-radius:8px;opacity:0;transition:opacity 200ms,transform 200ms;} .ddj-toast.show{opacity:1;transform:translate(-50%,-170%);} .ddj-noselect{user-select:none;-webkit-user-select:none;} `; document.head.appendChild(style); } // The reader measures glyph ink off a canvas, so it must not start before the // face is actually usable. Awaiting here is what makes depending on this cell // mean something. try { await document.fonts.load(`48px SealScript`, "\u9053\u5FB7\u7D93"); } catch (_) {} const ddjStyle = { fontUrl, seal: SEAL_STACK, serif: SERIF_STACK, glossSize: GLOSS_SIZE, tipRadius: TIP_RADIUS, tipCaret: TIP_CARET, tipCaretLen: TIP_CARET_LEN }; display('Fonts and Style');33:[{"id":"21f1617d05a04a247d4a7946cf9af2c9494082d78957b55515f63c551605d416d8e2ecd57dded80c2d5a0c152b3b9780a5a7aa08582c73f641f17a77c228bd36","href":"https://static.observableusercontent.com/files/21f1617d05a04a247d4a7946cf9af2c9494082d78957b55515f63c551605d416d8e2ecd57dded80c2d5a0c152b3b9780a5a7aa08582c73f641f17a77c228bd36","name":"lao_statue.png","type":"image/png","lastModified":1784872428612,"size":1244324},{"id":"2b2660ea88fd4ad19b025555c30a75aaf1970cc263594185a3caad7a4aed21fc1acaf84b65dca942e36c7209ccf3763e7682dd28975719360149e5729adc4cf6","href":"https://static.observableusercontent.com/files/2b2660ea88fd4ad19b025555c30a75aaf1970cc263594185a3caad7a4aed21fc1acaf84b65dca942e36c7209ccf3763e7682dd28975719360149e5729adc4cf6","name":"daodejing-reading (1).json","type":"application/json","lastModified":1785025733494,"size":2312607},{"id":"141440571c334137156c3de4a891ce4ffae1e2aa7247fdb7be86ff1dee4d8b61631f9b3abafd189dfdfb402a0e69c1a5e41041aa9da8435019be77553e91e019","href":"https://static.observableusercontent.com/files/141440571c334137156c3de4a891ce4ffae1e2aa7247fdb7be86ff1dee4d8b61631f9b3abafd189dfdfb402a0e69c1a5e41041aa9da8435019be77553e91e019","name":"chongxi_seal_patched (1).otf","type":"application/octet-stream","lastModified":1785026718195,"size":21811992}] 2a:{"title":"Daodejing in Seal Script","cells":[{"id":46,"value":"# Daodejing in Seal Script\n## Character level translation paired with concept level reading","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"$2c","pinned":false,"hidden":false,"mode":"ts"},{"id":42,"value":"$2d","pinned":false,"hidden":false,"mode":"ts"},{"id":20,"value":"$2e","pinned":false,"hidden":false,"mode":"ts"},{"id":48,"value":"------------------","pinned":false,"hidden":false,"mode":"md"},{"id":47,"value":"### Assets and Functions","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"$2f","pinned":false,"hidden":false,"mode":"ts"},{"id":39,"value":"$30","pinned":false,"hidden":false,"mode":"ts"},{"id":41,"value":"$31","pinned":false,"hidden":false,"mode":"ts"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"ts"}],"files":"$W33","stdlib":"2","titling":"auto"}