Refine reading emphasis and remove duplicate fullscreen menu

Author: reycn

electron/main.mjs

@@ -8,6 +8,8 @@ import {join} from 'node:path';
 import {mkdtempSync} from 'node:fs';
 import {tmpdir,release} from 'node:os';
 const windowsBuild=process.platform==='win32'?Number(release().split('.')[2]):0;
+// AppKit otherwise inserts a second full-screen item beside our togglefullscreen role.
+if(process.platform==='darwin')systemPreferences.setUserDefault('NSFullScreenMenuItemEverywhere','boolean',false);
 const smoke=process.argv.find(a=>a.startsWith('--smoke-test='))?.split('=')[1];
 if(smoke&&app.isPackaged&&!process.execPath.includes('PDFMathReader Tests.app'))throw Error('Mock tests require the isolated test application.');
 if(smoke){

server/topic-sentences.test.mjs

@@ -1,8 +1,9 @@
 import {test} from 'node:test';
 import assert from 'node:assert/strict';
-import {firstSentenceLength,topicSentenceRanges} from '../src/topic-sentences.mjs';
+import {firstSentenceLength,topicSentenceLength,topicSentenceRanges} from '../src/topic-sentences.mjs';
 
 const run=(text,x,y,width=160,height=10,extra={})=>({text,x,y,width,height,fontSize:extra.fontSize??height,...extra});
+const longTail=Array.from({length:61},(_,index)=>`context${index+1}`).join(' ');
 
 test('firstSentenceLength keeps leading offsets, closes quotes, and handles abbreviations and decimals',()=>{
  const text='  Dr. Smith reports 3.14. “Next sentence.”';
@@ -17,16 +18,35 @@ test('firstSentenceLength segments CJK sentences',()=>{
  assert.equal(firstSentenceLength('첫 문장입니다. 다음 문장입니다.','ko'), '첫 문장입니다.'.length);
 });
 
+test('topicSentenceLength gates at more than 60 weighted words',()=>{
+ const sixtyWords=Array.from({length:60},(_,index)=>`word${index+1}`).join(' ');
+ assert.equal(topicSentenceLength(`${sixtyWords}. 🙂`), 0);
+ const overThreshold=`${sixtyWords} extra. Next.`;
+ assert.equal(topicSentenceLength(overThreshold), `${sixtyWords} extra.`.length);
+});
+
+test('topicSentenceLength counts Han, Hiragana, Katakana, and Hangul characters as half words',()=>{
+ const mixed='漢'.repeat(30)+'あ'.repeat(30)+'カ'.repeat(30)+'한'.repeat(30);
+ const text=`${mixed}。次。`;
+ assert.equal(topicSentenceLength(text,'ja'), `${mixed}。`.length);
+});
+
+test('topicSentenceLength excludes a long single sentence',()=>{
+ const latin=Array.from({length:61},(_,index)=>`word${index+1}`).join(' ');
+ assert.equal(topicSentenceLength(`${latin}.`), 0);
+ assert.equal(topicSentenceLength(`${'漢'.repeat(121)}。`,'zh'), 0);
+});
+
 test('topicSentenceRanges limits a single run to its first sentence',()=>{
- const text='First sentence. Second sentence.';
+ const text=`First sentence. Second sentence. ${longTail}`;
  assert.deepEqual(topicSentenceRanges([run(text,10,10)]), [{index: 0, start: 0, end: 'First sentence.'.length}]);
 });
 
 test('topicSentenceRanges joins same-paragraph lines and maps offsets back to runs',()=>{
  const runs=[
   run('First sentence starts',20,10),
   run('on the next line.',20,22),
-  run('Second sentence.',20,34)
+  run(`Second sentence. ${longTail}`,20,34)
  ];
  assert.deepEqual(topicSentenceRanges(runs), [
   {index: 0, start: 0, end: runs[0].text.length},
@@ -35,9 +55,9 @@ test('topicSentenceRanges joins same-paragraph lines and maps offsets back to ru
 });
 
 test('topicSentenceRanges keeps CJK line joins unspaced and preserves decimal abbreviations',()=>{
- const runs=[run('Dr. Smith uses 3.14.',10,10),run('这是下一句。',10,22)];
+ const runs=[run('Dr. Smith uses 3.14.',10,10),run(`这是下一句。 ${longTail}`,10,22)];
  assert.deepEqual(topicSentenceRanges(runs), [{index: 0, start: 0, end: runs[0].text.length}]);
- const cjk=[run('这是第一句',10,10),run('继续。第二句。',10,22)];
+ const cjk=[run('这是第一句',10,10),run(`继续。第二句。 ${longTail}`,10,22)];
  assert.deepEqual(topicSentenceRanges(cjk), [
   {index: 0, start: 0, end: cjk[0].text.length},
   {index: 1, start: 0, end: '继续。'.length}
@@ -48,8 +68,8 @@ test('topicSentenceRanges uses explicit paragraph boxes for overlapping columns'
  const runs=[
   run('Left starts',10,10,80),
   run('Right starts',210,10,80),
-  run('left ends. Left next.',10,22,80),
-  run('right ends. Right next.',210,22,80)
+  run(`left ends. Left next. ${longTail}`,10,22,80),
+  run(`right ends. Right next. ${longTail}`,210,22,80)
  ];
  const boxes=[
   {id:'left',x:0,y:0,width:100,height:60},
@@ -66,9 +86,9 @@ test('topicSentenceRanges uses explicit paragraph boxes for overlapping columns'
 test('topicSentenceRanges falls back to vertical gaps, indentation, and font size',()=>{
  const runs=[
   run('First paragraph begins',20,10,160,10,{fontSize:10}),
-  run('and finishes. Later.',20,22,160,10,{fontSize:10}),
+  run(`and finishes. Later. ${longTail}`,20,22,160,10,{fontSize:10}),
   run('Second paragraph starts',42,52,160,14,{fontSize:14}),
-  run('and has more. Later.',42,68,160,14,{fontSize:14})
+  run(`and has more. Later. ${longTail}`,42,68,160,14,{fontSize:14})
  ];
  assert.deepEqual(topicSentenceRanges(runs), [
   {index:0,start:0,end:runs[0].text.length},

src/App.vue

@@ -14,22 +14,22 @@ function drawEmphasis(){
  if(props.emphasizeInformation){
   const boxes=[];for(const mark of host.value.querySelectorAll('.pdf-information-keyword')){const range=window.document.createRange();range.selectNodeContents(mark);for(const r of range.getClientRects())boxes.push({x:r.left-pageBounds.left,y:r.top-pageBounds.top,width:r.width,height:r.height});}
   highlights=window.document.createElement('div');highlights.className='information-highlights';highlights.setAttribute('aria-hidden','true');
-  for(const r of mergeInformationRects(boxes)){const rect=window.document.createElement('div');rect.className='information-highlight-rect';Object.assign(rect.style,{left:r.x+'px',top:r.y+'px',width:r.width+'px',height:r.height+'px'});highlights.append(rect);}
+  for(const r of mergeInformationRects(boxes)){const rect=window.document.createElement('div');rect.className='information-highlight-rect';Object.assign(rect.style,{left:r.x+'px',top:(r.y+r.height-Math.max(1,r.height*.08))+'px',width:r.width+'px',height:Math.max(1,r.height*.08)+'px'});highlights.append(rect);}
   host.value.append(highlights);
  }
  if(!props.emphasizeTopicSentences)return;
  const source=host.value.parentElement?.querySelector(':scope > canvas');if(!source?.width||!source.height)return;
  const bounds=host.value.getBoundingClientRect();if(!bounds.width||!bounds.height)return;
  const rects=[];for(const strong of host.value.querySelectorAll('.pdf-topic-sentence')){const range=window.document.createRange();range.selectNodeContents(strong);rects.push(...range.getClientRects());}
  if(!rects.length)return;
- overlay=window.document.createElement('canvas');overlay.className='topic-sentence-overlay';overlay.width=source.width;overlay.height=source.height;
+ overlay=window.document.createElement('canvas');overlay.className='topic-sentence-overlay';overlay.setAttribute('aria-hidden','true');overlay.width=source.width;overlay.height=source.height;
  const context=overlay.getContext('2d'),sx=source.width/bounds.width,sy=source.height/bounds.height;
- context.globalCompositeOperation='darken';
- for(const r of rects){context.save();context.beginPath();context.rect((r.left-bounds.left)*sx-.5*sx,(r.top-bounds.top)*sy, r.width*sx+sx,r.height*sy);context.clip();for(const offset of [-.3,0,.3])context.drawImage(source,offset*sx,0);context.restore();}
- // Keep only the glyph ink so the overlay never obscures the rest of the PDF.
- const pixels=context.getImageData(0,0,source.width,source.height),data=pixels.data;
- for(let i=0;i<data.length;i+=4){if(!data[i+3])continue;const white=Math.min(data[i],data[i+1],data[i+2]),alpha=255-white;if(!alpha){data[i+3]=0;continue;}for(let c=0;c<3;c++)data[i+c]=(data[i+c]-white)*255/alpha;data[i+3]=alpha;}
- context.putImageData(pixels,0,0);host.value.append(overlay);
+ // A translucent wash marks the sentence without changing the PDF glyphs.
+ const style=getComputedStyle(host.value);
+ context.fillStyle=style.getPropertyValue('--system-accent').trim()||style.getPropertyValue('--accent').trim()||'#007aff';
+ context.globalAlpha=.1;
+ for(const r of mergeInformationRects(rects.map(r=>({x:r.left-bounds.left,y:r.top-bounds.top,width:r.width,height:r.height}))))context.fillRect(r.x*sx,r.y*sy,r.width*sx,r.height*sy);
+ host.value.append(overlay);
 }
 onMounted(()=>{frameHost=host.value?.parentElement;frameHost?.addEventListener('pdf-frame-presented',drawEmphasis);});
 function emphasize(){
@@ -72,7 +72,7 @@ onBeforeUnmount(()=>{generation++;layer?.cancel();frameHost?.removeEventListener
 <style>
 .reading-text-layer.topic-layer-only{pointer-events:none;user-select:none}
 .reading-text-layer :is(.pdf-topic-sentence,.pdf-information-keyword){position:static;font:inherit;color:transparent;background:transparent;padding:0;white-space:inherit;transform:none}
-.reading-text-layer .topic-sentence-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transform:none;z-index:2;background:transparent;min-height:0;border-radius:0}
+.reading-text-layer .topic-sentence-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transform:none;z-index:2;background:transparent;min-height:0;border-radius:0;mix-blend-mode:multiply}
 .reading-text-layer .information-highlights{position:absolute;inset:0;pointer-events:none;user-select:none;transform:none;z-index:1}
-.information-highlight-rect{position:absolute;pointer-events:none;background:color-mix(in srgb,var(--system-accent,var(--accent)) 24%,transparent);border-radius:2px}
+.information-highlight-rect{position:absolute;pointer-events:none;background:color-mix(in srgb,var(--system-accent,var(--accent)) 65%,transparent);border-radius:1px}
 </style>

src/ReadingTextLayer.vue

@@ -1,13 +1,13 @@
 <script setup>
 import {computed} from 'vue';
 import {uiLanguage} from './i18n.mjs';
-import {firstSentenceLength} from './topic-sentences.mjs';
+import {topicSentenceLength} from './topic-sentences.mjs';
 import {informationTextSegments} from './information-emphasis.mjs';
 const props=defineProps({text:String,enabled:Boolean,information:Boolean});
-const parts=computed(()=>informationTextSegments(props.text||'',{topicEnd:props.enabled?firstSentenceLength(props.text||'',uiLanguage.value):0,emphasizeInformation:props.information}));
+const parts=computed(()=>informationTextSegments(props.text||'',{topicEnd:props.enabled?topicSentenceLength(props.text||'',uiLanguage.value):0,emphasizeInformation:props.information}));
 </script>
 <template><template v-for="part in parts" :key="part.start"><component :is="part.topic?'strong':'span'" :class="{'topic-sentence-text':part.topic}"><mark v-if="part.important" class="information-keyword">{{part.text}}</mark><template v-else>{{part.text}}</template></component></template></template>
 <style>
-.topic-sentence-text,.information-keyword.topic-sentence-text{font-weight:700}
-.information-keyword{font:inherit;color:inherit;background:color-mix(in srgb,var(--system-accent,var(--accent)) 24%,transparent);padding:0;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
+.topic-sentence-text{font-weight:inherit;background:color-mix(in srgb,var(--system-accent,var(--accent)) 10%,transparent);border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
+.information-keyword{font:inherit;color:inherit;background:transparent;padding:0;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--system-accent,var(--accent)) 65%,transparent);text-decoration-thickness:.08em;text-underline-offset:.16em;text-decoration-skip-ink:auto}
 </style>

src/TopicSentenceText.vue

@@ -714,9 +714,11 @@ for(const [locale,label] of Object.entries(annotationPurpleLabels))annotationBro
 const annotationUnknownColors={en:'No color','zh-CN':'无颜色','zh-TW':'無顏色',ja:'色なし',fr:'Sans couleur',es:'Sin color',ko:'색상 없음'};
 for(const [locale,label] of Object.entries(annotationUnknownColors))annotationBrowserMessages[locale].unknownColor=label;
 for(const [locale,labels] of Object.entries(annotationBrowserMessages))messages[locale].annotationBrowser=labels;
-const topicSentenceLabels={en:'Emphasize topic sentences','zh-CN':'强调主题句','zh-TW':'強調主題句',ja:'段落の最初の文を強調',fr:'Mettre en gras la première phrase',es:'Destacar la primera oración',ko:'문단의 첫 문장 강조'};
+const topicSentenceLabels={en:'Emphasize topic sentences','zh-CN':'强调主题句','zh-TW':'強調主題句',ja:'段落の最初の文を強調',fr:'Mettre en évidence la première phrase',es:'Destacar la primera oración',ko:'문단의 첫 문장 강조'};
 for(const [locale,label] of Object.entries(topicSentenceLabels))messages[locale].settings.emphasizeTopicSentences=label;
-const informationLabels={en:['Emphasize information','Highlight research results, ordering, reasoning, discovery and comparison keywords.'],'zh-CN':['强调信息','用系统强调色高亮科研结果、序数、逻辑、发现和比较关键词。'],'zh-TW':['強調資訊','用系統強調色醒目標示科研結果、序數、邏輯、發現與比較關鍵詞。'],ja:['重要情報を強調','研究結果・順序・論理・発見・比較のキーワードを強調します。'],fr:['Mettre en évidence les informations','Surligner les mots clés des résultats, de l’ordre, du raisonnement, des découvertes et des comparaisons.'],es:['Destacar información','Resaltar palabras clave de resultados, orden, lógica, descubrimientos y comparaciones.'],ko:['중요 정보 강조','연구 결과, 순서, 논리, 발견 및 비교 관련 키워드를 강조합니다.']};
+const topicSentenceHints={en:'A soft tint marks the first sentence of paragraphs over 60 words or 120 CJK characters. Single-sentence paragraphs are skipped.','zh-CN':'以淡色底纹标示超过 60 个词或 120 个中日韩字符的长段落首句；只有一句的段落不强调。','zh-TW':'以淡色底紋標示超過 60 個詞或 120 個中日韓字元的長段落首句；只有一句的段落不強調。',ja:'60語または120文字を超える段落の最初の文を淡く表示します。1文のみの段落は対象外です。',ko:'60단어 또는 한중일 문자 120자를 넘는 문단의 첫 문장을 옅게 표시합니다. 한 문장인 문단은 제외합니다.',fr:'Une teinte légère marque la première phrase des paragraphes de plus de 60 mots ou 120 caractères CJK. Les paragraphes à une seule phrase sont exclus.',es:'Un fondo suave marca la primera oración de párrafos de más de 60 palabras o 120 caracteres CJK. Se omiten los párrafos de una sola oración.'};
+for(const [locale,hint] of Object.entries(topicSentenceHints))messages[locale].settings.emphasizeTopicSentencesHint=hint;
+const informationLabels={en:['Emphasize information','Subtle underlines mark research results, ordering, reasoning, discovery and comparison keywords.'],'zh-CN':['强调信息','用细下划线标示科研结果、序数、逻辑、发现和比较关键词。'],'zh-TW':['強調資訊','用細底線標示科研結果、序數、邏輯、發現與比較關鍵詞。'],ja:['重要情報を強調','研究結果・順序・論理・発見・比較のキーワードに細い下線を表示します。'],fr:['Mettre en évidence les informations','Souligner discrètement les mots clés des résultats, de l’ordre, du raisonnement, des découvertes et des comparaisons.'],es:['Destacar información','Subrayar suavemente palabras clave de resultados, orden, lógica, descubrimientos y comparaciones.'],ko:['중요 정보 강조','연구 결과, 순서, 논리, 발견 및 비교 관련 키워드에 가는 밑줄을 표시합니다.']};
 for(const [locale,[label,hint]] of Object.entries(informationLabels)){messages[locale].settings.emphasizeInformation=label;messages[locale].settings.emphasizeInformationHint=hint;}
 export const UI_MESSAGES=messages;
 

src/i18n.mjs

@@ -117,6 +117,17 @@ export function firstSentenceLength(text, locale = 'en') {
  return source ? intlSentenceEnd(source, locale) : 0;
 }
 
+/** Emphasize only multi-sentence paragraphs over 60 word-equivalents. */
+export function topicSentenceLength(text, locale = 'en') {
+ const source = textValue(text);
+ const cjk = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]/gu;
+ const characters = source.match(cjk)?.length || 0;
+ const words = source.replace(cjk, ' ').match(/[\p{L}\p{N}]+(?:['’\-][\p{L}\p{N}]+)*/gu)?.length || 0;
+ if (words + characters / 2 <= 60) return 0;
+ const end = firstSentenceLength(source, locale);
+ return source.slice(end).trim() ? end : 0;
+}
+
 function numeric(value) {
  const result = Number(value);
  return Number.isFinite(result) ? result : undefined;
@@ -275,7 +286,7 @@ function rangesForIndices(indices, normalized, locale) {
   logical += text;
   parts.push({index, start, end: logical.length});
  }
- const sentenceEnd = firstSentenceLength(logical, locale);
+ const sentenceEnd = topicSentenceLength(logical, locale);
  if (!sentenceEnd) return [];
  const ranges = [];
  for (const part of parts) {