ブックマーク / zenn.dev/inaniwaudon (5)

  • Yu Gothic UIに text-spacing-trim を適用するとバグる

    halt と hmtx を見る Windows に標準搭載される Yu Gothic UI や游ゴシックには、GPOS テーブルに halt 機能タグが含まれている。 halt 機能タグの正式名称は「字幅半角メトリクス」であり、全角の約物を半角として扱う際などに位置を補正する役割を持つ。text-spacing-trim プロパティの実装においても、この halt の値を見て文字詰めを決定している。 TTX(fontTools が提供する解析ツール)を用いて、Yu Gothic UI/游ゴシック の halt と hmtx(水平方向のレイアウト情報)を値をダンプしてみる。 ttx -t GPOS YuGothicUI-Regular.ttf ttx -t GPOS YuGothic-Medium.ttf ttx -t hmtx YuGothicUI-Regular.ttf ttx -t h

    Yu Gothic UIに text-spacing-trim を適用するとバグる
    yug1224
    yug1224 2024/03/27
  • Chrome で text-spacing-trim プロパティがサポートされたぞ!!

    Chrome の挙動を見てみる 百聞は一見に如かずと言いますので、実際の挙動を見てみます。以下の図では、text-align: justify を指定したテキストボックスに対し、上段には space-first を、下段には従来の挙動である space-all を設定しています。上段は下段に比べて、自然な組版が実現されていることが見て取れます。 文章は 京葉線 - Wikipedia を改変して使用。CC BY-SA 画像からは、以下の挙動が確認できます。 行頭の括弧(橙色) 1 行目のみアキが残り、2 行目以降は行頭のアキが詰まる(space-first であるため) 連続する約物(ピンク色、青色、緑色) 読点→句点、閉じ括弧→閉じ括弧ではアキなし、中黒→括弧、閉じ括弧→開き括弧では二分(1/2)–全角程度のアキに調整される 行末の閉じ括弧(青色) 必要に応じて行末のアキが詰まる 行末の

    Chrome で text-spacing-trim プロパティがサポートされたぞ!!
    yug1224
    yug1224 2024/03/24
  • プログラミング初学者の大学生が動かないコードを動かすには?

    はじめに 年の瀬ですね。何かと話題の mast Advent Calendar 2022 も 21 日目を迎えました[1]。 20 日目の記事は AMY🌮 さんの「University of Wisconsin-Madisonってどこ!」でした。続く 23 日目の記事はしょあさんの「プログラミング課題不正回答を防ぐ手法の提言」です[2]。 さて、mast というのは筑波大学[3]情報学群情報メディア創成学類[4]の略称です。 筑波大学の情報系は入学して 1 年間は殆ど情報系の実習を行わないのですが、2 年次になると春先から唐突に C 言語を書かされる授業が乱発[5]し、その結果「インターネットの大海原から拾ってきたコードを継ぎ接ぎで合わせてみたら大量のエラーが出てきたよ〜〜たすけて〜〜」みたいな人が跡を絶ちません。 稿ではそうした状況を回避するべく、プログラミングの初学者でも取り敢えず

    プログラミング初学者の大学生が動かないコードを動かすには?
    yug1224
    yug1224 2022/12/27
  • Type 2 Charstring を読み解いて OpenType フォントを描画してみる

    フォントのパスデータはどこにある? 前回の拙記事にて解説したとおり、OpenType は内部構造として PostScript をアウトライン構造に持つものと、TrueType を由来とするものの 2 種類に分かれ、前者の場合は OpenType 形式の中に CFF (Compact File Format) 形式のデータが内包される形となるため、解読に多大な労力が必要となります。 CFF 形式において、フォントの中核であるパスデータは CharStrings に格納されているのですが、この CharString はさらに、CFF と併せて使用することを想定した Type 2 と呼ばれる別のフォーマットにて記述されています。 稿では Type2 の仕様を概説した上で、OpenType フォントからをパスデータを実際に描画してみることを目的とします。OpenType 及び CFF のファイル

    Type 2 Charstring を読み解いて OpenType フォントを描画してみる
    yug1224
    yug1224 2022/11/17
  • Web だって組版の夢を見る――新聞のように自在にテキストを流し込むには

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

    Web だって組版の夢を見る――新聞のように自在にテキストを流し込むには
    yug1224
    yug1224 2022/07/29
  • 1