Open davideastmond opened 1 month ago
Here's a useful article ChatGPT helped me put together. Particularly interesting and relevant is the bit about the Selection API.
My Prompt "How might web highlighting be implemented in a semantically aware way? That is, I would be concerned by a solution that wrapped every character in a span tag is it might interfere with semantics."
ChatGPT Implementing web highlighting in a semantically aware way requires careful consideration to ensure that the underlying HTML structure and semantics are preserved. Here are some approaches you might consider:
mark
TagThe HTML <mark>
tag is designed specifically for highlighting text. It has semantic meaning, indicating that the enclosed text is marked or highlighted for reference or emphasis.
<p>This is a <mark>highlighted</mark> word.</p>
For more subtle highlighting, CSS pseudo-elements can be used. This method avoids modifying the HTML content directly.
p::selection {
background: yellow;
}
Using data-
attributes can provide additional context without disrupting the semantics of the HTML.
<p>This is a <span data-highlight="true">highlighted</span> word.</p>
The Range and Selection APIs allow for programmatically highlighting text without altering the HTML structure significantly. You can use these APIs to create non-intrusive highlights.
function highlightSelection() {
const selection = window.getSelection();
if (selection.rangeCount) {
const range = selection.getRangeAt(0);
const mark = document.createElement('mark');
range.surroundContents(mark);
}
}
Creating custom elements for highlighting can encapsulate the highlight functionality while preserving the original content semantics.
<p>This is a <highlight-text>This text is highlighted</highlight-text> sentence.</p>
Using absolutely positioned overlay elements can highlight text without changing the HTML content.
.highlight-overlay {
position: absolute;
background-color: yellow;
pointer-events: none;
opacity: 0.5;
}
To combine semantic awareness with practical implementation, you might consider a hybrid approach:
<mark>
Tags or data-
Attributes: Wrap the selected text with <mark>
tags or spans with data-
attributes to indicate highlights.document.addEventListener('mouseup', () => {
const selection = window.getSelection();
if (selection.rangeCount) {
const range = selection.getRangeAt(0);
const mark = document.createElement('mark');
range.surroundContents(mark);
}
});
By using these methods, you can create a highlighting solution that is both visually effective and semantically respectful.
Something important to keep in mind is that note numbers are not inherent to each note; a note's number is programmatically determined by the number of anchors preceding the current note's anchor in the document flow.
marker
tool to customize it for our purposes. It will highlight text and insert markers (note numbers) into the text and will programmatically figure out the correct number. They can be added / deleted.
We should chat / meet and discuss architecture for these questions. Please feel free to add any questions and issues that you see.