記事や章の最初の段落をドロップキャップで飾るには、::first-letter で1文字目を選び、float か initial-letter で大きくします。日本語の段落で initial-letter の字下げが指定より1行多くな ...

「※」で始まる注釈の2行目以降を、記号のあとの本文の頭にそろえるには、padding-left と負の text-indent を組み合わせます。新しいブラウザーで使える hanging の書き方や、「注1：」のように幅の違う見出しの ...

「サーバー」と「サーバ」のような表記ゆれを、文章の中から見つけて一覧にし、ボタンで1つの書き方にそろえるコンポーネントを React で作りました。カタカナ語は比べるための形にそろえて探し、それ以外は辞書で探します。見逃す例と、誤って ...

選んだ画像を canvas に描いて画素を取り出し、jsQR に渡して QR コードを読む React のコンポーネントです。背景が透明な PNG、白黒が反対の QR コード、大きな画像、Shift_JIS の文字、QR コードが2つ ...

CSS で文章を縦書きにするには writing-mode: vertical-rl を指定し、height で1行の長さを決めます。英字を立てる text-orientation、2桁の数字を横に並べる text-combine-u ...

ひらがなとカタカナを互いに変換する関数と、ボタンで変換する入力欄、欄を離れたときにカタカナにそろえるフリガナの欄を React で作りました。「ヷ」や「ゝ」の扱い、半角カナ、wanakana との違い、ひらがなとカタカナを区別しない検 ...

引用文の左上と右下に大きなかぎかっこを付けるには、blockquote の ::before と ::after にかぎかっこの字を入れて絶対配置します。字の余白でかっこが内側に寄る理由と直し方、線で描く方法、読み上げとコピーでの扱い ...

camelCase、PascalCase、snake_case、CONSTANT_CASE、kebab-case を互いに変換する関数と、入力した名前を5つの書き方で並べてコピーできるコンポーネントを React で作りました。XML ...

横にスクロールする枠の背景に、端に止まる影と、中身といっしょに動く白いふたを重ねると、続きがある側にだけ影が出ます。JavaScript は使いません。中身に背景色があると影が隠れるので、スクロール位置で動くアニメーションで疑似要素に ...

貼り付けた一覧から重複した行を取り除くコンポーネントを React で作りました。new Set だけでは別の行として残る改行コード・前後の空白・全角と半角・大文字と小文字の違いを、比べるときだけそろえる方法と、10万行を貼り付けたと ...