2つの文章の似ている度合いを、編集距離と、2文字ずつ比べるダイス係数の2つの方法で0〜100%にして表示するコンポーネントを React で作りました。語順を入れ替えたときに2つの値が分かれる例や、長い文章で計算にかかる時間も確かめて ...

小さなドット絵を img で拡大すると、境目がぼけます。image-rendering: pixelated を付けると、元のドットのまま拡大されます。crisp-edges との違い、整数倍でない大きさ、背景画像や canvas で ...

入力した文章を Intl.Segmenter で単語に分け、単語ごとの回数を数えて多い順に表にするコンポーネントを React で作りました。日本語で助詞が上位に並ぶときの除き方、英字の大文字・全角のそろえ方、活用した語が別の単語に分 ...

親要素に :has() と :nth-child() を組み合わせると、子の数に応じて列数などのレイアウトを CSS だけで切り替えられます。hidden の項目や項目の中の要素まで数えてしまう落とし穴、sibling-count() ...

Unix時間を打てば日時に、日時を選べばUnix時間に変わる入力欄を React で作りました。datetime-local の値をブラウザのタイムゾーンで読む方法、valueAsNumber の落とし穴、秒とミリ秒の取り違え、夏時間 ...

img に object-view-box: xywh(x y 幅 高さ) を付けると、画像のその範囲だけが表示され、img の大きさも範囲に合わせて決まります。書き方、object-fit との組み合わせ、拡大やアニメーションを C ...

textarea の左に行番号の列を並べ、改行の数から番号を作って、スクロールに合わせて動かします。scrollTop をそろえる書き方で起きる15pxのずれ、折り返しによるずれ、onSelect では拾えないキャレットの移動を Ch ...

タブでインデントしたコードは、ブラウザーでは空白8文字分の幅で表示されます。pre に tab-size: 4 を付けると4文字分になります。数値と長さの違い、タブ位置の考え方、効かない場合を Chromium で確かめました。

画像の R・G・B をそれぞれ数段階にそろえ、色の数を減らしたポスターのような画像を React で表示して PNG で保存しました。SVG のフィルターで表示だけを変える書き方と、color-interpolation-filter ...

CSS の背景画像を image-set() で書くと、倍率2の画面には2倍の大きさの画像、通常の画面には普通の画像をブラウザーが選んで読み込みます。書き方、倍率ごとに選ばれた画像、表示される大きさ、type() で形式を選ぶ方法を確 ...