上達のコツはやはり反復練習！ということで、第4回では、InDesignで作られた書籍のPDF（なければプリントアウト）をもとに、紙面デザインをそっくりに再現する方法について解説します。何度か作成していくうちに、Vivliostyleの可能性やクセがつかめてくるはずです。 CSS組版を覚える早道は……？ 筆者は2023年に『Web技術で「本」が作れるCSS組版 Vivliostyle入門』を執筆しましたが、これを読んだだけで自在に本を組めるようになるかといえば、残念ながらそう簡単なものではないというのが正直なところです。 では、どうやってCSS組版を勉強すればいいのでしょうか？ ひるがえって、自分がたどった道のりを思い出してみると、CSS組版とVivliostyleを使い始めたのは、書籍の原稿整理の一環として、書籍デザイン通りの字数・行数をCSS組版で再現したのが始まりでした。何度もそれを繰
予告｜Illustratorの文字組み機能・テキストエンジンが進化｜いまから備えよう！Illustrator 2023（27.7）以降で再保存のお願い
予告｜Illustratorの文字組み機能・テキストエンジンが進化｜いまから備えよう！Illustrator 2023（27.7）以降で再保存のお願い アドビでは現在、Illustratorをはじめとしたデザインアプリケーションの文字組み品質向上のために、テキストエンジンの刷新に取り組んでいます。この記事では、テキストエンジンをアップデートする背景と、アプリケーション側の対応について紹介します。 品質向上のメリットを体験していただくには、みなさんがお手持ちのIllustratorファイル（.ai）を再保存をしていただく必要があります。 ぜひ、最後までご一読ください。 テキストエンジン＝文字組みの品質を決めるプログラム Adobe IllustratorやAdobe InDesign、Adobe Photoshop、Adobe Premiere Proといったクリエイティブアプリケーションに
GigaViewer for AppsにVivliostyle.jsが採用されました 小形 克宏 (理事、業務執行役員) 株式会社はてなは今年3月29日、自社のマンガビューワ「GigaViewer for Apps」が、「少年ジャンプ＋」（株式会社集英社）のアプリ版に採用されたことを発表しました。 はてなのアプリ専用マンガビューワを集英社が採用。2,700万ダウンロードを超える「少年ジャンプ＋」に提供開始（2024-03-29） これにともない「GigaViewer for Apps」に組み込まれた小説用ビューワのレイアウトエンジンとして、Vivliostyle.jsが採用されたことをお知らせします。 もしかしたら、「なぜマンガアプリにVivliostyleが？」と不思議に思われる方もいるかもしれません。じつは集英社はマンガ作品のノベライズにも力を入れており、「少年ジャンプ＋」もたくさんの
欧文のルール｜しじみ ｜デザインを語るひと｜note
日本人は知らない欧文（主に英語）のルールというものがあります。これは英語の授業でも教えてくれません。それゆえか翻訳者からの原稿にも、このルールに則っていないものがすごく多くありま… もっと読む
css-text-4-memo-ja.md CSS Text Level 4 を読む（抄訳） CSS Text Module Level 4 W3C Working Draft, 19 February 2024 This version: https://www.w3.org/TR/2024/WD-css-text-4-20240219/ Latest published version: https://www.w3.org/TR/css-text-4/ Editor's Draft: https://drafts.csswg.org/css-text-4/ この文書はCSS Text Level 4を読むための参考として部分的に訳した抄訳です。 この仕様書全体の日本語訳は https://triple-underscore.github.io/css-text-ja.html に公開
文字組版の教室 note版｜モリサワ note編集部
なんとなく使っていませんか？ 括弧の種類と使い分け 突然ですが、質問です！ 以下の文章で、登場人物が実際に声に出して言っている部分と、心の中…
突然ですが、質問です！ 以下の文章で、登場人物が実際に声に出して言っている部分と、心の中で思い浮かべている部分はどこでしょうか。 「みんなはね、ずいぶん走ったけれども遅れてしまったよ。ザネリもね、ずいぶん走ったけれども追いつかなかった」と言いました。 ジョバンニは、 （そうだ、ぼくたちはいま、いっしょにさそって出かけたのだ）とおもいながら、 「どこかで待っていようか」と言いました。 青空文庫 宮沢賢治『銀河鉄道の夜』 https://www.aozora.gr.jp/cards/000081/files/43737_19215.html 答えは簡単ですね。 「 」の中の言葉が声に出して言っている部分、（ ）の中の言葉が心の中で思い浮かべている部分です。 前後の文章からも読み取れると思いますが、括弧の使い分けがされていることで、より分かりやすくなっています。 このように括弧類は主に文章内で会
Vivliostyle（ビブリオスタイル）はCSS組版を実現するオープンソースのライブラリ／アプリケーション群です。これから始まるこの連載は、そんなVivliostyleの魅力や可能性にさまざまな方向から迫ってみようという試み。まず第1回としてCSS組版とはなにか、そしてVivliostyleでどんなことが、どのようにしてできるのかをご紹介します。 CSS組版ってなに？ そもそも組版とはなんでしょう。一言でいえば文字・図版・写真などをページ上に配置することです。この記事では、とりわけCSSやHTMLといったWeb技術をつかうCSS組版を取り上げます。その最大の特徴はページ区切り（pagination）。ブラウザーではコンテンツをスクロールして読み進みますが、CSS組版ではページをめくることで読み進みます。結果として、CSS組版は印刷用データ（PDF）を作成する方法でもあります。現在CS
「約物」のアキと調整｜モリサワ note編集部
「日本語組版は難しい……」 こんな言葉を聞いたことがありますか？ その要になるのが「約物やくもの」と言われる記号類です。 例えば私達が当たり前のように使用している句読点。 縦組みでは「、。（テン・マル）」の組み合わせが使用されますが、横組みでは「，。（カンマ・マル）」や「，．（カンマ・ピリオド）」の組み合わせを使用することもあります 昭和26年（1951年）に国語審議会が定めた「公用文作成の要領」では、公文書において横書きでは「，。（カンマ・マル）」を用いるよう定められていました。 しかし令和4年（2022年）上記に代わって「公用文作成の考え方」が定められ「、。（テン・マル）」が横書きにおける句読点の原則となりました。 ※横書きでは「，（カンマ）」を用いてもよいとされていますが、一つの文書内でどちらかに統一する必要があります。 これら句読点は、文の区切りを示す役割を果たしています。私達にと
こんにちは、以前 FlightBooksというサービスを立ち上げていたのですが、2年ほどメンテしていなかったため、ローカル動作するOSS版として公開することにしました。 OSS版を作るにあたり、エディタ部分はVSCodeなりお好きなエディタを使ってもらうとして、 MarkdownからHTMLを生成する部分 HTMLからPDFを生成する部分 を切り出して公開しました。 ほかのサービスや技術と何が違うの？ 技術書をマークアップテキストで書くプラットフォームとしては、Re:VIEW、Vivliostyleなどがありますが、FlightBooksは「出版やDTPに関する知識がなくても印刷所にだしたい」というエンジニア諸氏のために開発されました。 「商業印刷」にどこまで向き合うか ご家庭のプリンタに印刷を指示すると、ファイルの情報がプリンタドライバに送信され、そこでインクの出し方を制御するためのデー
みなさんは日本語の文章を書くとき、段落の始まりはどのようにしていますか？ 大抵の方は「先頭を1字下げにする」と答えるのではないかと思います。 では、なぜこの1字下げを行うのでしょうか？ 段落の字下げは執筆者・出版社などの⽅針によってさまざまなルールがあり、表示する媒体（紙・Webなど）によっても変わります。 今回はこの段落の字下げについてご紹介します。 段落とは？段落の字下げについて語る前に「段落」について整理しておきます。 日本語の文章の構成要素は大きい順に「文章・段落・文・文節・単語」の5種類の区切りがあります。 それぞれが意味を持ち、内容を理解できるようになっており、それらをより理解しやすくし、受け⼿に伝えるのが組版の重要な役割でもあります。 日本語をあらわす「ことばの単位」この5種類の区切りは下図のような範囲・意味があります。 ことばの範囲例①単語 文法上の意味・機能をもった最小の
このたびモリサワのnote3周年を機に、文字組版に関する記事をアップしていくことになりました。 この連載を担当するのは、モリサワの中で文字や組版、印刷、制作などに関して、普段からお客様のお困りごとの解決を行っている技術サポートのエキスパートです！ 以下のような内容の連載を予定していますので、ぜひご期待ください。 文字サイズに関する単位の種類 禁則文字にはどんなものがあるの？ 文字間の調整と詰め組 日本語の中のアルファベットの扱い方 ルビの種類と組み方 など モリサワは「写真植字」を発明して以来、一貫して「文字の未来」をみつめて研究・開発を続けてきました。 モリサワと聞いて「フォント」のメーカーだとイメージする方は多いと思います。「フォント」ひいては「文字」は、なにかしらのことばや情報を表すために用いる材料のひとつでしかなく、相手に伝えるためには「文字」を並べて組む「組版」が必須です。 文字
CSSでここまでできるとは驚いた！ CSSを活用した本作りのワークフローを徹底解説した良書 -CSS組版Vivliostyle入門
CSSの解説書というと、通常はWebサイトやスマホアプリを実装するための知識やテクニックですが、今回は『CSSによる本作り』の解説書を紹介します。 原稿の執筆から、本のデザインやレイアウト、データ入稿まで、CSSを活用した本作りのやり方を徹底解説した解説書です。 表紙に「未知の表現力！」とあるように、CSSでこんなこともできるのかと驚きの連続でした。 本書は技術書で評判が高いリブロワークスさんの最新刊。当ブログでもVS Codeの解説書やJavaScriptの解説書を紹介しましたが、今回はCSSによる組版、本作りの解説書です。 マークダウンで原稿を執筆し、それをCSSでレイアウトし、本に仕上げます。本はWeb上でも書籍にもでき、本書自体もCSSで作成されています。
多言語の組版ルールをご紹介している本連載。今回からは、繁体字 はんたいじに関する知識を全２回にわたりお送りします。 繁体字と共通点も多い、簡体字の組版ルールはこちらからご覧ください。 繁体字の成り立ち繁体字は中国語の表記に使用される文字で、「正体字」とも言われます。漢字が簡体字として省略化される以前は、中国大陸でも使われていました。 一見すると日本の旧字体にも似た伝統的字形を持ちますが、両者は微妙に違います。 もともと木版印刷などが登場する以前、漢字は手書きでやり取りされていたため、ひとつの漢字に複数の異体字がありました。 しかし、活字を使うようになると、手書きで通用していた複数のバリエーション（異体字）をすべて網羅することが難しくなり、そこで、使用頻度の高い字形に集約されるようになったのです。 18世紀前半（清朝期）に編纂された『康熙字典 こうきじてん』は12集42巻から成り立っており、
新興組版システム typst のススメ
はじめに Typst とは、新しい組版ソフトウェアです。数式を多用する科学技術系の記事を書くのに向いています。 ローカル環境で PDF にコンパイルすることもできますし、 Overleaf のようなオンラインの執筆環境も提供されています。 この分野では LaTeX が歴史的にも非常に強く、なかなか代替のソフトウェアが出現しなかったのですが、ようやく注目にも値する品質のものが登場してきたという感じです。 そもそも組版システムとは そもそも Qiita や Zenn でも数式を埋め込むことができるこの時代、ドキュメントを書くための専用の言語を使う理由は何でしょうか。 LaTeX はオワコンではないのでしょうか。 組版システムというのは簡単には無くなりません。これは、ブログや Wiki などの Web の記事とは性質が異なるからです。 組版システムは紙に印刷することを最終的な目的にしたシステムで
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き
blog.jxck.io で（md2inao→md2indesignの進行は過去にもちょっとかかわりがあってウォッチした） もうすでにそういう製品があったり、知らないだけで全コードがハイライトされた書籍を出してる出版社はあるのかもしれないが、そういう本を少なくとも自分は見てない。 という記載があったのでちょっと書いてみる。 オーム社さん、オライリー・ジャパンさん、インプレスさん、羊土社さん、講談社サイエンティフィク社さんなどの一部の書籍では、コードハイライト付きになっていて、さらにそのうちいくつかは紙版では白黒、電子版ではカラーを使い分けていたりする。 というのも、前職の制作会社時代に私がその仕組みを作ってきたから。 組版はInDesignを使うのもあれば、TeXを使っているのもある。紙白黒/電子カラーのような使い分けは、TeXではOK、InDesignではもしデータを2種類管理しなければ
欧文のルール日本人は知らない欧文（主に英語）のルールというものがあります。これは英語の授業でも教えてくれません。それゆえか翻訳者からの原稿にも、このルールに則っていないものがすごく多くあります。 知っておくと何かとアドバンテージになるので少しずつご紹介していきます。ご紹介した欧文のルールはこちらのマガジンにストックしていきます。 欧文で「〜」は使わない考えてみると「そりゃそうか」ってなるのがこの「〜」。日本だと 午前10時〜午後7時 というように使用します。便利でわかりやすい符号です。 「〜」は波形という日本の約物これは「波形」というつなぎ符号です。約物（やくもの）という記号の一種。波形の意味は、「…まで」。だから 東京〜大阪まで という表記は間違いです。「東京〜大阪」で「東京から大阪まで」という意味になるからです。波形は、この他に語句の省略や長音を強調するために使う音引き「ー」の代わりに
話題の組版エンジン Typst を触ってみた
Typst — 新しい組版エンジン 今年の3月21日、Typst というソフトウェアが public beta となり、処理系がオープンソースで公開されました。 Typst is a new markup-based typesetting system for the sciences. Typst はマークアップベースの新しい組版システムです。独自の構文を持っており、Typst で書かれた文書をオンラインサービスまたはローカル上でコンパイルすることで PDF に変換（出力）することができます。 公式サイトには「科学分野向け」「LaTeX への不満から生まれた」とあり、数式や相互参照等の機能が充実していることから、メインターゲットも LaTeX ときわめて近いところにあると考えられます。とはいえそれ自体は汎用的な組版システムなので、用途も 論文・会議原稿 雑誌の記事 小説 技術書 スライ
書籍詳細｜株式会社 C&R研究所
簡単に説明すると、CSS組版とはWebページの技術を使って本を作ることで、Vivliostyleはそれを実現するためのソフトウェアです。本書も（カバーを除いて）すべてVivliostyleで制作しています。 本書ではVivliostyle（ビブリオスタイル）を使ったCSS組版について、環境の構築から基本的な内容のハンズオン、実践的なテクニックまで丁寧に解説しています。 Markdown（マークダウン）の書き方やCSS組版のテクニック集、実際に印刷所への入稿データを作る際の注意点など、現場のノウハウが満載の1冊です。 ■ 商品名： Web技術で「本」が作れるCSS組版 Vivliostyle入門 ■ 価格：3,410円＋税 ■ ISBNコード：978-4-86354-418-5 ■ 本のサイズ：A5判／ソフトカバー ■ 著者：リブロワークス／監修：Vivliostyle 目次 Chapter
書体を意識して見るのは慣れていないと難しい。特に普段使わない言語ならなおのこと。みなさんは欧文書体を意識して見たことはありますか？ 店の看板、メニュー、電光掲示板、雑誌……和文書体のすぐそばに欧文書体はいます。 もしかして欧文書体にフォーカスしたら書体にまつわる面白いことが見つかるのではないか……？そんな思いつきがこの記事のきっかけになりました。 日本語に翻訳されると書体も変化する不思議欧文書体を意識するには、まずは見慣れた和文書体と比較するときっとわかりやすいはず。そう思って翻訳絵本に目をつけました。 翻訳絵本とは、オリジナルが海外にある絵本を日本語に翻訳して出版された書籍のことです。 調査すると嬉しいことに書体にまつわる面白い発見がありました。 海外の絵本の本文ではセリフ体（Serif）が多く使われ、日本語版では様々な書体に変化することがわかりました。セリフ体は和文書体でいう明朝体のこ
PR webtoon（ウェブトゥーン）というものがある。簡単に言えば縦に読むマンガで、ページをめくるということはなく、スマホでスクロールしながら読む。スマホでマンガを読むことに最適化された形式だ。実際に読んでみると実に読みやすい。 webtoonを読んでいると、面白さはもちろんだけれど、その長さにも驚く。ページをめくることがないので、長さをダイレクトに感じるのだ。では、一体どのくらい長いのか、印刷して測ってみたいと思う。 webtoonが面白い 紙で読むマンガはページをめくる。見開きで迫力ある絵がドーンという使い方もある。しかし、スマホで読むには見開きが小さくなってしまうという問題もある。そこでスマホやタブレットに最適化されたのがwebtoonだ。 この記事を書いている地主です！ webtoonは縦読みなのだ。ページをめくるという概念はなく、その代わりにスクロールをする。スマホなどの縦長の
『週刊少年ジャンプ』の歴史からひも解く、マンガ雑誌の文字とデザイン世界中で高い人気を得ている日本のマンガだが、その隆盛を支えてきたのはマンガ雑誌であった。本記事ではマンガを語るうえで頻繁に取り上げられる物語や絵ではなく、とくにマンガ雑誌における「文字」の歴史がいかなるものであったのかを、『週刊少年ジャンプ』を例にひも解いていく。 聞き手・監修＝岡本正史（集英社） 文・構成＝安原真広（ウェブ版「美術手帖」編集部） 歴代の『週刊少年ジャンプ』 いまやスマートフォンで見ることも多くなったマンガだが、世界中で高い人気を得るようになった日本のマンガ文化をつくりあげてきたのはマンガ雑誌に代表される、紙でつくられた本のマンガだった。月刊や週刊という刊行スピードで数百万部にも上るマンガ雑誌が印刷され、日本全国の書店に届けられる。この世界的に見ても稀有なシステムが、日本の多様なマンガ文化をつくりあげたことに
CSS組版 with Vivliostyleでゼロから版面設計をやってみよう HOME CSS組版 CSS組版 with Vivliostyleでゼロから版面設計をやってみよう 社内で時々「仮組み用のCSSの書き方を教えて」といわれるんですが、なかなか時間が取れず後回しにしていました。少し時間が作れたので、今回はCSSファイルを作るところからスタートして、基本の版面ができあがるあたりまでチュートリアルやってみようと思います。 Vivliostyleには便利なCLIもありますし、当社も普段は自前のAtomプラグインを使っていますが、今回はあえて便利なものは使わず、最低限の構成でやってみます（多少不便でもシンプル構成なほうが要素技術が見えるだろうという趣旨です）。最低限の構成とは、HTMLファイル、CSSファイル、Vivliostyle Viewer、Webサーバーの4つです。Webサーバーは
こんにちは、製造業でソフト開発エンジニアをやっているとみー(@tommyecguitar)です。 会社で納品物の説明ドキュメントを作ることがあり、その時にMarkdownでの組版をやってみたので、どう運用したか、困ったところ、いい点、悪い点をまとめてみようと思います。 Vivliostyleで組版したブログはたくさんあるので、見た目がどんな感じにできるかなどはそちらを見ていただくか、Vivliostyleのサイトをご覧ください。 Wordじゃだめなのか。 製造業で何かしら長大なドキュメントを作るとなったら、大抵はWordを複数人数で編集するという運用をしているところが多いと思います。 しかし、Wordにはいろいろと悪いところがあります。 チーム内で共同編集すると、編集したところが消えたり、フォントやデザインがなぜか統一されなかったりする。 セクションごとに担当を分けても、マージが手作業にな
組版ソフトとワープロは違うものですよという話
最近ある会議関連で組版ソフトとワープロ的なものの違いについての話が出たのですが、これは相当大事な話で、ここ20年近くの印刷組版データ制作現場の苦労の一因はここの混同にあるのではないかなと思ったのでちょっと書いておきます。 印刷組版データ制作者は両者を分けて考えている 私は電子書籍制作を担当する前には組版データの作成もやっていましたが、その際には自然に組版ソフトとワープロは別のものとして考えていました。ワープロ等で作成されたテキストデータが元原稿として入ってきて、それを元にの印刷組版データを制作していたわけなのでこれは当然です。おそらく今現在組版データの作成を仕事としている多くの人も同様なのではないかと思います。 一般的には混同されている感がある 一方で、原稿の執筆者含めて一般的には両者は混同されている感があります。これはPCユーザーの目線に立ってみればわかることで、今は例えばInDesig
Focus on your text and let Typst take care of layout and formatting.
nehan（縦書き文庫の組版エンジン）をWebAssembly化することで、約3倍の高速化を達成しました - anti scroll
縦書き文庫の組版エンジンであるnehan（js製）をRustで書き換え、WebAssemblyで実行したところ、約3倍の高速化に成功しました。 現時点ですでに運用されています。 感想としては「本当は10倍ぐらい速くなって欲しかったけど、そこまでは速度が出ずにトホホ…」という感じです。 3倍なら良いではないか、と思われる方もいるかもしれませんが、青空文庫の長編小説なんかは、だいたい40万字ぐらいあり、そのjsでの組版時間は（すごく遅い端末だと）27秒に達することもあります。 ちなみに手元のノートPC（メモリ8G）でjsに組版させると5秒ぐらいです。 この5秒が1.7秒ぐらいになるのは嬉しくても、27秒が9秒になっても、あんまり嬉しくないですよね。 だから、ずっと10倍を目標にしてきたのですが… まあこれから頑張って、Rust側のソースを最適化していこうと思います。 ビューアーの変更点 全ペー
「本の編集ではテキスト原稿のバージョン管理しか勝たん」という信念を押し通してきて、そろそろ20年近くになりました。厳密には19年くらいだと思うので、タイトルは誇張です。 久しぶりに編集者にとってのバージョン管理に言及したくなったので書いてみました。 目次です。 なんで「テキスト原稿のバージョン管理」の話をしなくなったか 「誌面レイアウトしたPDFとか紙に赤字を入れる」で編集するのもう無理… そこでテキスト原稿のバージョン管理 具体的にどうすればいいのさ 前提からつらつら書いていたらやたらに長くなりそうだったので、全部捨てて書き直したのに、それでもそれなりに長くなってしまった。 最後の節に書いた「 「原稿の移り変わり」を管理するのではなく、「原稿にありうる無数の可能性」を管理する 」というヒントだけでも持ち帰ってもらえればうれしいです。 なんで「テキスト原稿のバージョン管理」の話をしなくなっ
ドワンゴ教育事業Webフロントエンドチームの berlysia です*1。 はじめに この記事では、日本語の縦書きHTMLにおいて、「ある1文字が縦組みのなかで違和感なく縦書きとして表示される」とはどのように成り立っているのか、意図しない表記になりやすい文字とその理由について紹介します。 最後まで読むと、縦書き時の文字の縦横に関する問題をたちどころに分解できるようになるはずです。とりあえずフォントのせいだろうかと疑う日々には、これでおさらばしましょう*2。 はじめに N予備校における日本語縦書きHTML CSS の関連仕様 日本語の一般的な縦書きに設定する うまくいかないことが起こりやすい文字たち うまくいかない文字がうまくいかない理由を理解する 縦書きを考慮した文字の周りの方向の定義 CSS における縦書きでの文字の縦横 upright typesetting sideways type
Online ISSN : 1883-8170 Print ISSN : 0453-4662 ISSN-L : 0453-4662
写植で培った“文字を見る目”をInDesignに活用し、美しい文字組みのノウハウを伝える大石十三夫さんの職人魂 はあどわあく・大石十三夫さんは大阪で書籍組版をメインに活動する、言わば“文字組みのスペシャリスト”です。自身の仕事としてAdobe InDesignによる組版を行なうだけでなく、より美しい文字組みを実現するためのノウハウをさまざまメディアで積極的に公開。オリジナルの設定を施したAdobe Illustrator・InDesign向け「文字組みアキ量設定」は、きれいな文字組みをよりスムーズに実現するツールとして、デザイン・制作の現場で多くの支持を得ています。 大石さんはどのようにして、美しい文字組みを見極める目を養い、それをInDesignに活かしていったのか。また、そのノウハウを積極的に伝える目的はどこにあるのか。これまでの経緯から、現在の活動まで話を聞きました。 文字組み50年
ビジネスに使えるデザインの話ビジネスにデザインの知識はけっこう使えます。苦手な人も多いから１つ知るだけでもその分アドバンテージになることもあります。noteは毎日午前7時に更新しています。 「でこぼこした数字」オールドスタイル数字ときどき、このようなでこぼこした数字を見かけることはありませんか？上に下にでこぼこしたこの数字を「オールドスタイル数字（Old Style Figures）」というもの。文字通り、「古いタイプの数字」という意味です。では古くないタイプの数字は何かというと「ライニング数字（Lining Figures）」と言います。 ライニング数字さっそく、この「ちょっと見づらくすら感じる」でこぼこした数字がなぜ存在しているのか、その答えを紹介します。それは、 違和感をなくすため 多くの文字のデザインの目的は、ロゴに使われたり、おしゃれに見えたりすることではなく、「ストレス無く読め
JaLC IRDB Crossref DataCite NDL NDL-Digital RUDA JDCat NINJAL CiNii Articles CiNii Books CiNii Dissertations DBpedia Nikkei BP KAKEN Integbio MDR PubMed LSDB Archive 極地研ADS 極地研学術DB 公共データカタログ ムーンショット型研究開発事業
第24回プログラミングおよびプログラミング言語ワークショップ（PPL 2022， https://jssst-ppl.org/workshop/2022/index.html ）にて招待講演として発表させて頂いた際のスライドです． 以下のページでも閲覧可能です： https://gfngfn.github.io/ja/posts/2022-05-11-slides-ppl2022-invited/Read less
NGK2022S発表資料です https://ngk2022s.connpass.com/event/233520/ yagisan-reportsのWebサイト https://www.denkiyagi.jp/yagisan-reports/Read less
この記事はQiita Advent Calendar 2021の12日目の記事で、Qiita株式会社 CX向上グループの綿貫（@xrxoxcxox）が担当します！ この記事の概要 Webの組版を現実的な手法で綺麗に整えるためのやり方をまとめました。 同じ内容の文章でも組版次第で読みやすさは変わります。 実は、意識していないとWebサイトの文章は余白がガタガタとかになりやすいんですね。 DTPに比べるとどうしても劣ってしまいますが、HTMLとCSSだけでできるだけ綺麗になるようにした & ステップバイステップで説明していますので良ければ真似てみてください！ ちなみに今回載せているコードは全てこちらのリポジトリにあります。 解決したいこと（≒よくあるWebの組版） 余白がガタガタ 見出しや本文のジャンプ率が適切でなく目が滑る 禁則処理がほぼ何も無い あまり意識したことは無いかもしれませんが、こ
日本のWEBに革命をもたらす BudouX で自動文字組みを行う。しかも、Web Componentとして
WEB 開発において日本語が抱える問題 日本語を使った WEB 開発は常に「改行問題」を抱えています。例えば、👇 の様に 記事 という単語の 記 と 事 で改行されていたら読みにくいです。 見た目重視の WEB サイトだと、「この改行を手動で美しく見えるように修正して欲しい。」 という声も無視できません。 いわゆる「文字組み」です。例えば、👇 の様に改行を入れてやります。 しかし、この方法は解決になっていません。なぜなら、WEB ブラウザ の幅はレスポンシブに可変するからです。ちょっと画面幅を狭めるだけで 👇 の様に崩壊します。 これに対応するためには、メディアクエリをくしして画面幅に応じた<br>タグを仕込むか、改行したくない文字列を手書きで<span style="display:inline-block;"></span>で囲む必要がありました。👇 の様に... <span
アカベコ @akabekobeko 指摘されているようにプログラマー的にはリファレンスや仕様をあたるものだが、CSS 組版として文書を作りたいだけのユーザーにとっては確かにとっつきにくいかも #vivliostyle 2021-11-14 13:37:31
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vivliostyleで市販書籍とそっくりに組んでみよう | gihyo.jp
GigaViewer for AppsにVivliostyle.jsが採用されました
CSS Text Level 4 を読む（抄訳）
なんとなく使っていませんか？ 括弧の種類と使い分け｜モリサワ note編集部
Vivliostyleでなにができるの？ | gihyo.jp
Markdownで技術同人誌のPDFが生成できるOSSを公開しました - Qiita
段落の字下げを行う理由を知ろう｜モリサワ note編集部
文字組版の連載、スタートします！｜モリサワ note編集部
多言語の組版ルール【繁体字編】第１回 繁体字の基本と組版｜モリサワ note編集部
文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦
コードハイライト付きの書籍をこれまでずっと作っていた - kmuto’s blog
欧文で「〜」は使いません。ハイフンとダーシの話｜しじみ ｜デザインを語るひと
原作と翻訳絵本を比べたら書体がローカライズされていた話｜モリサワ note編集部
【検証】スマホ用の縦読みマンガ漫画（webtoon）を印刷すると何メートルになるのか？
『週刊少年ジャンプ』の歴史からひも解く、マンガ雑誌の文字とデザイン
CSS組版 with Vivliostyleでゼロから版面設計をやってみよう
納品ドキュメントの作成にMarkdown+Vivliostyleを採用した話 - Qiita
Typst: Compose papers faster
本の原稿のバージョン管理を始めて20年たちました - golden-luckyの日記
縦書きHTMLにおける文字の向きはどのように定まるか - ドワンゴ教育サービス開発者ブログ
富士通電子出版システム FUJITSU IPS/Lite
写植で培った“文字を見る目”をInDesignに活用し、美しい文字組みのノウハウを伝える大石十三夫さんの職人魂
なぜ「でこぼこした数字」があるのか？ “オールドスタイル数字”｜しじみ ｜デザインを語るひと
昭和初期の書物本文組版についての考察 : 夏目漱石『吾輩は猫である』再刊本を中心に | CiNii Research
PPL 2022 招待講演： 静的型つき函数型組版処理システムSATySFiの紹介
Webブラウザ上で動作する帳票エンジンを作る話
読みやすい＝理解しやすい Webの組版を整理してより良い文章を届けよう - Qiita
文章を読むスピードが最大2倍。「読書アシスト」無償公開
CSS組版 Vivliostyle ユーザーと開発者の集い 2021秋