// annot-style.ts
export function applyAnnotStyles() {
// Select all <li> elements with the 'data-annot' attribute
const listItems = document.querySelectorAll('li[data-annot]');
// Function to calculate the length in em units
function calculateEmLength(str: string): string {
let length = 0;
for (const char of str) {
// Check if the character is half-width (ASCII range)
length += (char.match(/[\u0020-\u007E]/) ? 0.5 : 1);
}
return length === 0 ? '0' : `${length}em`;
}
// Use a for...of loop to iterate over the NodeList
for (const listItem of listItems) {
// Get the value of the 'data-annot' attribute
const annotValue = listItem.dataset.annot || '';
// Calculate the length of the 'data-annot' value in 'em' units
const emValue = calculateEmLength(annotValue);
// Assign the calculated 'em' value to a CSS variable for this specific list item
listItem.style.setProperty(`--annot-length`, emValue);
// If the length is 0, also set --annot-gap to 0
if (emValue === '0') {
listItem.style.setProperty(`--annot-gap`, '0');
}
}
}
// entry.ts
// Check if there are any <li> elements with the 'data-ano' attribute
if (document.querySelector('li[data-annot]')) {
// Dynamically import the module
import('./annot-length').then(module => {
// Apply styles
module.applyAnnotStyles();
});
}
概要
※ 注記テキスト
みたいなコンテンツの最適解を探索中
現時点では
として cssで
としてみる。
ただし、data-annotには複数文字が入る可能性があるため
--annot-length
を上書きできるjsを用意する jsはli[data-annot]が存在する場合にモジュールを投入させる