以下のツイートを見て、自分の環境でも再現したので気になって調べてみた。 現象 text-spacing-trim プロパティを Yu Gothic UI のテキストに適用すると、一部の括弧類が重なってしまう。これは値に space-all を設定すると解消される。 halt と hmtx を見る Windows に標準搭載される Yu Gothic UI や游ゴシックには、GPOS テーブルに halt 機能タグが含まれている。 halt 機能タグの正式名称は「字幅半角メトリクス」であり、全角の約物を半角として扱う際などに位置を補正する役割を持つ。text-spacing-trim プロパティの実装においても、この halt の値を見て文字詰めを決定している。 TTX（fontTools が提供する解析ツール）を用いて、Yu Gothic UI／游ゴシック の halt と hmtx（水平

最近 Web 上で写真をサッと管理するためのアプリケーションを Cloudflare 上で構築しているのですが、その際に Cloudflare Workers, KV を用いて GitHub アカウントを用いたアクセス制御を行う機会があったのでそのメモです。 認証の流れ GitHub アカウントと連携する場合は OAuth 2.0 を利用するため、クライアント側では次の流れを踏みます。 state パラメータを生成し、https://github.com/login/oauth/authorize?client_id=<id>&state=<state>（認可エンドポイント）へ遷移 GitHub 上の認可画面で、ユーザにアカウント連携の承認を求める。これが許可されると、事前に指定した（Workers 上の）コールバック URL にリダイレクトされる Workers：state パラメータを

年の瀬ですね。こんにちは、いなにわうどん（@kyoto_mast21）です。 11 月 5, 6 日に、筑波大学では雙峰祭（そうほうさい）と呼ばれる学園祭が開催されました。私は雙峰祭 Web サイトのフロントエンドのデザインや実装を主に担当したので、その工夫や裏話的なものを少しお話しできればと思います。 Web サイトの開発光景 本稿は 学園祭非公式 Advent Calendar 2022 の 14 日目の記事です。12 日目の担当は issy さんでした[1]。 背景 学園祭の運営を担う筑波大学学園祭実行委員会には、情報メディアシステム局[2]（以下、jsys）と呼ばれる部門が存在しています。jsys では、学園祭で使用する映像の制作・生中継[3]等に加え、学園祭運営に必要な各種システムや Web サイトの内製を担当しています。 例年、雙峰祭の前後 1 ヶ月程度は、その年のテーマに合わ

この記事も例に漏れず、Web における組版は 1 段組みを基本としており、テキストが延々と下に伸びていく単調なレイアウトが主流です。 しかしながら新聞や雑誌等の組版を見つめ直すと、ブラウザでは実装されることのない縦横無尽に動き回るグリッドの配置、テキストの流し込みが当たり前のように実現されています。こうした自在な組版、Web でぜひ実現してみたいと感じませんか……？ できたもの 図 1: Web で新聞のような組版が実現されたスクリーンショット 図 1 の通り、新聞風のレイアウトを実現しています。 Web で自在なテキストレイアウトは不可能？ CSS3 にて導入された columns プロパティ は、ブラウザ上で段組みを用いたコンテンツの表示を実現します。論文のスタイルでよく見かけるアレですね。ところが、CSS3 の段組みの仕様には「段の高さが揃っていなければならない」[1]と規定があるこ