新しい文章の並べ方 常識が変わるレイアウトシステム？
引用元：https://news.ycombinator.com/item?id=44390501
「Same Sizer」って、文字が機械的に引き伸ばされてるから見た目が良くないと思うな。各行の幅がバラバラだし。
理想としては、行の幅は全部同じにして、文字の位置を引き伸ばすべきだよ。
「全ての単語を同じサイズにする」っていう原則の、もっと良い応用例は、ベトナム語の書道に見られると思う。ラテン文字を中国語に近い書き方と組み合わせたりしてるんだ。
例えばこれ。
https://commons.m.wikimedia.org/wiki/File:%C4%90%E1%BB%91i_-…
（これはラテン文字が同じ大きさの四角に区切られて書いてあるよ）
へぇ〜。君の挙げた例の画像が実はラテン文字だったなんて、全く気づかなかったよ。
中国語読めないから、漢字に十分似てるものは何でも「どうせ理解できない」っていう箱に頭の中で入っちゃうんだ。（この場合は、ベトナム語を知ってたら、この書道の中に慣れた単語とか音節を認識できて、役に立ったかもね）
面白い効果だ。
僕、中国語読めるけど、それでもあの画像をラテン文字として処理できないな。
文字全部を漢字の部品みたいにしちゃってるんだもん。見てると頭が痛くなるよ。
下のページ、「Summary」のところに普通のフォントのバージョンがあるよ。「Tân niên」で始まってる。
（あと、面白いことに、中国語のバージョンもあったね。フレーズ全体が古典中国語からの借用語みたい？多分、読者は決まった言い回しとして知ってるから、分かりやすいんだろうね。）
「hoa」っていう文字が の口亽 みたいな形に様式化されてるのも、分かりにくくしてる一因だね。
似たような感じで、ここの書道もかなりすごいんだ。
https://www.reddit.com/r/language/comments/1gmzro8/what_scri…
へぇ〜。ハングルがどういう仕組みでできてるか説明するのに、良い方法だね、多分 :)
ちなみに、僕はこういうアプローチを「square writing」って呼んでて、いくつかのリンクをまとめたんだ。見てみて。
https://gwern.net/doc/design/typography/square/index
多分一番面白いのは「Hangulatin」フォントかな（https://www.t26.com/fonts/22320-Hangulatin-EN）。まさに名前の通り、ラテン文字をハングルみたいにしたやつだよ。残念ながら開発中止でリンクも切れちゃったけど、古い動画ならたくさん見れるよ。
https://www.youtube.com/watch?v=T0syCsC0_4s
君がリンクしてくれた例、どうしても見たかったんだけど、リンクが切れてるみたいだよ。
なんでかは知らないけど、僕の環境では動くよ。もし代替案が必要なら、Wikipediaに行って File:Đối - Tết 2009.jpg を検索バーに貼り付けてみるのはどうかな。
Firefoxでそのページ見てたら、2年前のLinux開発用ノートPCのCPUがマジで発火しそうなくらい熱くなったわ。でも、レイアウトの視覚化はめっちゃ気に入ったけどね。
2年もののMac M1でFirefox使ってて、タブ50個くらい開いてKrita、Chrome、VS Studio、The Terminal、Preview、Finder窓いくつか起動してても、全然問題なかったよ。だから、一応見る価値はあるかもだけど、そんなに優先しなくて大丈夫じゃない？
時々、こんなにバカげてるのに美しいものに出会うと、その裏にある天才性が見えてきて、めっちゃ嬉しくなることがあるんだよね。すごいじゃん！
声に出して読んでみた？声が一瞬でロボットみたいになるよ :D
ハハハ、てか僕にはJony Iveの声に聞こえたな。
「Hyphenator」レイアウトいいな、でも単語一つだけじゃなくてさ。余ったテキストが回り込んで、フォントがどんどん小さくなる感じにしてほしいんだ。大学でノート取ってて、スペースないところに詰め込む時みたいなのを真似たいんだよね。
非表音言語、つまり英語だと、このメソッドの多くはキツい。「Last is First」は特にね。「I」って見ても、次に「In」になるから、理解を頭の中で巻き戻さないといけない。「t」って見ても、次に「that」になるから、読み上げようとすると、’t’と’th’は音素が違うから音素を作り直す必要が出てくる。
ちょっと助けたいんだけどね、’i.e.’は’id est’の略で、「つまり」って意味だよ。君の文脈だとむしろ’e.g.’ (exempli gratia) を使うべきで、これは「例えば」って意味だよ。
思うに、今の軽い会話では（少なくとも僕の経験では）その二つって区別なく使われてるよ。プロの場とか法律関係ではきっと区別が大事なんだろうけど、僕としてはさっきの人の使い方は、厳密には違うけど結構自然に感じたかな。
ieは「つまり」って意味で、egは「例えば」って意味だよ。全然違うから、一緒にしちゃダメ。
ieとegを区別するのって大事なんだ。そうしないと、英語だけが表音文字じゃない言語だって誤解されちゃうかも。
「カジュアルな話し言葉では使い分けられてないと思う」？どうして？全然意味違うじゃん。
フォーマルな場で間違えるより、気楽な場で訂正してもらった方が絶対良いよ。
死語から借りた言葉を書くときに使うと、教養ある人にはすごく変に聞こえるんだ。ちゃんとダブルチェックしないとって思ったよ。自慢じゃなくてね。ieとegは完全に同じには使えないんだ。「Among us：ie me and my father」（つまり、俺と父さん）と「Among us：eg me and my father」（例えば、俺と父さん）じゃ、全く意味が違うでしょ。
それは「my father and I」だよ。
読むのって、一文字ずつ解析するよりパターン認識に近いんじゃない？俺の場合はそうみたい。単語の文字がぐちゃぐちゃでも普通に読めちゃう有名な例もあるしね。まあ、みんながそうとは限らないし、文章の理解の仕方はいろいろあるのかも。
ちなみに、文字ぐちゃぐちゃ現象に関する記事はこれだよ：
https://observer.com/2017/03/chunking-typoglycemia-brain-con…
前に短いワークショップに行ったんだけど、発表者が心の中で声に出して読むのをやめてパターン認識みたいに読むモードに切り替えるのを勧めてて、そうしたら理解度を落とさずにずっと速く読めるようになったんだ。その人はこのスレッドの言葉は使ってなかったけど、その日にこの二つは全然違うモードなんだって学んだよ。
英語って表音文字じゃないの？確かに同じ文字でも違う音を表すけど、それでも音を表してるじゃん。もし音を表してないなら、君の混乱は起こり得ないだろ。
thatみたいな短い単語は、特によく見るから一気に読めるよね。だから読み直す必要はない。でもphoneticとかsubvocalizingみたいなあまり見ない単語は、君の言う通りに読む感じ。だけど、文の終わりにはphonemeをどう読むか分かるようになるよ。だって、形は違えど3回も出てきたからね。
「Last Is First」は書く人がテキストをコピーする時のチェックサムみたいで、場所を失わないようにするんだと思うな。トーラーを読む必要があった時、標準的なヘブライ語から母音なし＆引き伸ばし文字に移行するのが大変だったのを覚えてるよ。歌い方も学ばなきゃいけなかったしね。でも手書きで、整然と並んでる羊皮紙の文字を見るのは美しかったな。
もっとコメントを表示（1）
これが一般的だったら、読む人も正しい行を見つける手助けとして使うだろうなって思う。特に長い行だと、同じ行を読んじゃったり、飛ばしたりしやすいからね。
マジ頼むからこんなウェブサイト作るのやめてくれよ。1 Gbpsの回線あるのにさ。君のサーバーはこんなデカいサイト配信できないんだって。画像一つ一つが画面じゃ数百ピクセルしか使わないのに、4K解像度で最大9 MiBとかで送られてくる。ページによっては読み込みに15秒以上かかって、合計40 MiB＞だよ！アクセス集中もあるのは分かるけど、3 Mbpsは普通の小さいサーバーなら十分な速度なんだ。サイト自体がデカすぎる！
これは重さが正当化されるケースの一つじゃない？これはエンドユーザー向けじゃなくて、パフォーマンスやコンバージョン率を最大化するサイトじゃないんだよ。タイポグラファーがタイポグラファーのために作ったデザインの見本なんだ。ピクセル一つ一つが重要で、見る側は細かいところまで見るために数秒待つのを厭わないだろうしね。
プログレッシブローディングとかどう？
レイアウト見れるリンクがないから混乱したよ。まさか読み込んでたなんて！うちの回線だと、最初の表示まで3分＞かかったよ！
「Last is first」ってグレゴリオ聖歌の楽譜によくあるcustos＼custodesをすごく思い出すな。行末にあって、次の行の最初の音符を教えてくれるんだ（だから、目が次の行を探してる間に、音節はなくても音高は分かる）。例：https://lilypond.org/doc/v2.18/Documentation/notation/ancien…
これ、ひどいね。大好きだ。
私、斜視とか複視とか、目の問題がいくつかあるんだけど、same-sizerは驚くほど読みやすかったよ。標準より読みやすいのがすごく不思議。これ、アクセシビリティモードとして使えるんじゃないかって少し思う。
軽い乱視くらいで目に問題ないんだけど、私もsame-sizerテキストは思ってたよりずっと読みやすいと感じたよ。
サイトの”imager”ツール、マジでクールだよ！見てみてね → https://alternativelayoutsystem.com/imager/
試したい気持ちはあるんだけど、数秒おきにページが勝手にリロードされちゃうんだよね。超うざい。
「最後が最初」って話で思い出したんだけど、昔のスペイン語の本って、ページの終わりに次のページの最初の音節を置いてたんだって。初めて見た時、ちょっとびっくりしたな。
それは”catchword”って呼ばれるものだよ。スペイン語だけじゃなく、昔の多くのテキストで一般的だったんだ。ページをめくる時に朗読しやすくしたり、製本する時にページの抜けや順序間違いを見つけやすくする目的があったんだよ。（信じられないかもしれないけど、ページ番号は後からできたものなんだ。）
近代初期のヨーロッパ全体で一般的だったみたいだね。バージニア州Williamsburgの1775年当時の屋外博物館みたいな場所にあるレシピ本を持ってるんだけど、それも当時の文書みたいに”catchword”が入ってるんだ。charming だなって思うよ。
超クールだね！Devanagari文字って、行の下じゃなくて上に合わせてテキストが並ぶんだ。例えばこれ → https://www.typotheque.com/research/devanagari-the-makings-o…. Roman文字も逆に、上揃えで下がバラバラになるバージョンとか見れたら面白いだろうな。
読むの楽しかったよ。数年前に”Boustrophedon”っていう、行ごとに書く方向が変わる筆記法にかなりハマったんだ。これも「あ～、この行長すぎ！」問題へのエレガントな解決策に思えるんだよね。 → https://en.m.wikipedia.org/wiki/Boustrophedon
これ → https://i0.wp.com/biblequestions.info/wp-content/uploads/202… 意外と読みやすいんだよね。内容は結構知ってるからってのもあるけど、よく分からない単語も拾える。ただ、’d’が’b’に見えたりして”debts”とかは戸惑ったな。
この組版、https://bionic-reading.com/ と組み合わせられないかな？普通の強調テキストじゃなくて、人が読むのをAIで学習させて、どこで詰まるかとかを追跡すれば、どう強調すれば理解が深まるか分かるかも？
”Same Sizer”ってアイデア、Justified text（両端揃え）に対して感じるのと全く同じ気持ちだわ。
著者がHebrewテキストによく言及してたけど、歴史的なHebrewの文書って、記事で紹介されてるような方法を特に使ってた理由とかあるのかな？
巻物使ってた名残りで、テキストの「ページ」をはっきり区切る必要があったせいもあるんじゃない？
いや、トーラー巻物も古代Greco-Roman papyrus巻物も横書きでカラム幅は揃ってるんだよ。巻物は手に持って使うの。現代fantasy描写の縦スクロールが本が下に進むって間違った印象を与えてて、Hypertext mediaとかtext editorの連続スクロールがこの誤解を広げてるんだ。この勘違いはかなり新しくて、たぶん1980年代くらいだよ。
シングルカラムで縦スクロールする巻物（今のtext editorとかweb browserみたいの）も全くなかったわけじゃないんだよ。特に典礼とか法律文書とかね。詳しくはここ見て→http://grbs.library.duke.edu/article/viewFile/9191/4607
まあ、横書きフォーマットの方が一般的だったけどね。
テキストの「川」を最大化するlayout systemが見たいな。読書をもっと変な感じにしようぜ。
もっと読みやすくするために、単語をぎゅっと圧縮して英語をもっとlogographicっぽくしたい！
A) superwriteみたいなalphabetic shorthandを使うとか、
B) 文字を詰め詰めにするとか、
C) 頻出の短い単語を記号に置き換えるとか、
具体的な方法を色々提案してるよ。
（コメント6のアイデアあたりかな）Latin script syllablesをChineseみたいなblocksに詰め込んでる、Vietnameseのこういうstylized prayerを思い出したよ→https://old.reddit.com/r/neography/comments/1gp6t8j/stylized…
これら超creativeだね！
記事の「Same Sizer」はtitlesとかdesignに使うの好きだし、「Fill the Space」もbody textで、glyphs（keyみたいな記号）が使われてるなら嫌いじゃないと思うな。
これ、Klingonみたいなfictional glyphsに適用したら面白そうだね。
このレイアウトはカーニングのルールを破ってるね。
レンダリングエンジンは通常、横方向の流れと一定の間隔を期待してるけど、同じサイズとか反響する行があると、グリフのロジックがおかしくなる。
間隔がフォント本来のものではなく、レイアウトに強制されるんだ。
フォントは単なる見た目じゃなく、レイアウトロジックの一部になる。
エンジン全体が本来意図してないことをする羽目になるんだよ。
そしてレイアウト自体がタイポグラフィのロジックを変え始めるんだろうね。
まあ、それがここでのポイントだと思うよ。
意図的にルールを破る素敵な方法を見つけて、面白い効果を出すため、何ができるか探るため。
それは本当に素晴らしいことだよ。
ありがとう、嫌いだわ。皮肉ね。
速読のためのDotsiesシステムを思い出すけど、これは読むのが遅くなるだけだな…
もっとコメントを表示（2）
もしくはCSSのtext-wrap: balanceを使うだけでもいいかもね。
https://developer.chrome.com/docs/css-ui/css-text-wrap-balan…
これはInDesignのスクリプトセットだよ。CSSじゃない。
