kennethreitz/rhymepad.org
1
0
Fork 0
mirror of https://github.com/kennethreitz/rhymepad.org.git synced 2026-06-11 17:08:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Export carries the rhythm dots when the toggle is on

Browse Source 
WYSIWYG: PNG line spacing widens to fit, dots centered under each
word in ink, same notation as the editor.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Kenneth Reitz
2026-06-07 05:12:03 -04:00
parent 1027302ab8
commit 8262f65ae7
1 changed files with 19 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/index.html
+19 -1
View File
@@ -828,7 +828,8 @@ document.getElementById('exportBtn').addEventListener('click', async ()=>{
const palette = Array.from({length: COLORS}, (_, i)=>css.getPropertyValue(`--r${i}`).trim());
const ink = css.getPropertyValue('--ink').trim();
const bg = css.getPropertyValue('--bg').trim();
const S = 2, FS = 16, LH = FS * 1.9, PAD = 40;
const rhythm = stressToggle.checked && analysis && analysis.stress;
const S = 2, FS = 16, LH = FS * (rhythm ? 2.35 : 1.9), PAD = 40;
const font = FS + "px 'Spline Sans Mono', monospace";
const probe = document.createElement('canvas').getContext('2d');
@@ -872,6 +873,23 @@ document.getElementById('exportBtn').addEventListener('click', async ()=>{
}
x.fillStyle = ink;
x.fillText(line, PAD, y);
if(rhythm && fresh){
const spans = (analysis.stress.filter(s=>s.l===i)).sort((a,b)=>a.s-b.s);
x.font = "8px 'Spline Sans Mono', monospace";
x.textAlign = 'center';
spans.forEach(s=>{
const x0 = PAD + x.measureText(line.slice(0, s.s)).width * 2;
// measure with the body font for positions
x.font = font;
const left = PAD + x.measureText(line.slice(0, s.s)).width;
const wpx = x.measureText(line.slice(s.s, s.e)).width;
x.font = "9px 'Spline Sans Mono', monospace";
const dots = [...s.st].map(c=> c === '0' ? '○' : '●').join(' ');
x.fillText(dots, left + wpx / 2, y + FS * 0.95);
});
x.textAlign = 'left';
x.font = font;
}
});
x.fillStyle = 'rgba(167,154,137,0.55)';
x.font = "11px 'Spline Sans Mono', monospace";