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

Remove the counts layer

Browse Source 
The caret-line readout already gives syllables on demand; a number on
every line was furniture.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Kenneth Reitz
2026-06-07 13:40:25 -04:00
parent fa539bbb68
commit 3252d70c57
1 changed files with 1 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/index.html
+1 -37
View File
@@ -114,11 +114,6 @@
z-index: 1;
}
#highlight .anno { color: #6a5f52; }
.sylcount {
position: absolute; right: 9px;
font-size: 10px; line-height: 1.6; color: #5d5347;
pointer-events: none;
}
#editor::selection { background: rgba(232,129,74,0.22); color: transparent; }
#stresslayer {
pointer-events: none;
@@ -294,7 +289,6 @@ Double-click any word to look it up on the right."></textarea>
<label class="mtoggle" title="Color-code rhyme families"><input type="checkbox" id="rhymeToggle" checked> rhyme</label>
<label class="mtoggle" title="Underline words that share an initial sound"><input type="checkbox" id="allitToggle"> alliteration</label>
<label class="mtoggle" title="Sheet music for your flow — syllable emphasis dots under each word"><input type="checkbox" id="stressToggle"> rhythm</label>
<label class="mtoggle" title="Syllables per line, at the right edge"><input type="checkbox" id="countsToggle"> counts</label>
<div class="scheme-readout" id="schemeReadout"></div>
</div>
</div>
@@ -371,9 +365,6 @@ allitToggle.addEventListener('change', render);
const rhymeToggle = document.getElementById('rhymeToggle');
rhymeToggle.checked = true;
rhymeToggle.addEventListener('change', render);
const countsToggle = document.getElementById('countsToggle');
countsToggle.checked = false;
countsToggle.addEventListener('change', render);
const schemeReadout = document.getElementById('schemeReadout');
const COLORS = 12;
@@ -596,7 +587,6 @@ function render(){
html += (line ? `<span class="${lcls}" data-l="${i}">${h}</span>` : '') + '\n';
});
highlight.innerHTML = html;
renderCounts(lines);
renderStress(lines);
highlight.scrollTop = editor.scrollTop;
highlight.scrollLeft = editor.scrollLeft;
@@ -623,21 +613,6 @@ function cadenceColors(){
return map;
}
function renderCounts(lines){
highlight.querySelectorAll('.sylcount').forEach(el=>el.remove());
if(!countsToggle.checked || !analysis || !analysis.meter) return;
analysis.meter.forEach(m=>{
if(analysis.lines[m.l] !== lines[m.l]) return; // line being edited
const mark = highlight.querySelector(`.lmark[data-l="${m.l}"]`);
if(!mark) return;
const d = document.createElement('div');
d.className = 'sylcount';
d.textContent = m.syl;
d.style.top = (mark.offsetTop + 5) + 'px';
highlight.appendChild(d);
});
}
function renderStress(lines){
if(!stressToggle.checked){ stresslayer.innerHTML = ''; return; }
const byLine = {};
@@ -906,7 +881,7 @@ document.getElementById('exportBtn').addEventListener('click', async ()=>{
const probe = document.createElement('canvas').getContext('2d');
probe.font = font;
const w = Math.ceil(Math.max(220, ...lines.map(l=>probe.measureText(l).width)) + PAD * 2 + (countsToggle.checked ? 28 : 0));
const w = Math.ceil(Math.max(220, ...lines.map(l=>probe.measureText(l).width)) + PAD * 2);
const h = Math.ceil(lines.length * LH + PAD * 2 + 18);
const canvas = document.createElement('canvas');
canvas.width = w * S; canvas.height = h * S;
@@ -955,17 +930,6 @@ document.getElementById('exportBtn').addEventListener('click', async ()=>{
}
x.fillStyle = /^\s*[#([]/.test(line) ? '#6a5f52' : ink;
x.fillText(line, PAD, y);
if(countsToggle.checked && fresh && analysis.meter){
const cm = analysis.meter.find(mm=>mm.l===i);
if(cm){
x.font = "10px 'Spline Sans Mono', monospace";
x.textAlign = 'right';
x.fillStyle = '#5d5347';
x.fillText(String(cm.syl), w - 10, y);
x.textAlign = 'left';
x.font = font;
}
}
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";