Idea annotation list 注記リストのスタイリングとスクリプト

概要

※ 注記テキスト

みたいなコンテンツの最適解を探索中

現時点では

<ul>
 <li data-annot="※">list item list item list item  list item list item list item list item list item list item</li>
</ul>

として cssで

 [data-annot] {
    --annot-length: 1em;
    --annot-gap: 0.5em;
    --annot-width: calc(var(--annot-length) + var(--annot-gap));
    text-indent: calc(var(--annot-width)  * -1);
    padding-left: var(--annot-width);
  }
  [data-annot]::before {
    content:attr(data-annot);
    margin-right: var(--annot-gap);
  }

としてみる。

ただし、data-annotには複数文字が入る可能性があるため--annot-lengthを上書きできるjsを用意する jsはli[data-annot]が存在する場合にモジュールを投入させる

// 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();
    });
  }

monosus / super-static

Idea annotation list 注記リストのスタイリングとスクリプト #37

概要