突然ですが、質問です！ 以下の文章で、登場人物が実際に声に出して言っている部分と、心の中で思い浮かべている部分はどこでしょうか。 「みんなはね、ずいぶん走ったけれども遅れてしまったよ。ザネリもね、ずいぶん走ったけれども追いつかなかった」と言いました。 ジョバンニは、 （そうだ、ぼくたちはいま、いっしょにさそって出かけたのだ）とおもいながら、 「どこかで待っていようか」と言いました。 青空文庫 宮沢賢治『銀河鉄道の夜』 https://www.aozora.gr.jp/cards/000081/files/43737_19215.html 答えは簡単ですね。 「 」の中の言葉が声に出して言っている部分、（ ）の中の言葉が心の中で思い浮かべている部分です。 前後の文章からも読み取れると思いますが、括弧の使い分けがされていることで、より分かりやすくなっています。 このように括弧類は主に文章内で会
文字組版の教室 note版｜モリサワ note編集部
なんとなく使っていませんか？ 括弧の種類と使い分け 突然ですが、質問です！ 以下の文章で、登場人物が実際に声に出して言っている部分と、心の中…
欧文のルール｜しじみ ｜デザインを語るひと｜note
日本人は知らない欧文（主に英語）のルールというものがあります。これは英語の授業でも教えてくれません。それゆえか翻訳者からの原稿にも、このルールに則っていないものがすごく多くありま… もっと読む
こんにちは、以前 FlightBooksというサービスを立ち上げていたのですが、2年ほどメンテしていなかったため、ローカル動作するOSS版として公開することにしました。 OSS版を作るにあたり、エディタ部分はVSCodeなりお好きなエディタを使ってもらうとして、 MarkdownからHTMLを生成する部分 HTMLからPDFを生成する部分 を切り出して公開しました。 ほかのサービスや技術と何が違うの？ 技術書をマークアップテキストで書くプラットフォームとしては、Re:VIEW、Vivliostyleなどがありますが、FlightBooksは「出版やDTPに関する知識がなくても印刷所にだしたい」というエンジニア諸氏のために開発されました。 「商業印刷」にどこまで向き合うか ご家庭のプリンタに印刷を指示すると、ファイルの情報がプリンタドライバに送信され、そこでインクの出し方を制御するためのデー
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き
CSSでここまでできるとは驚いた！ CSSを活用した本作りのワークフローを徹底解説した良書 -CSS組版Vivliostyle入門
CSSの解説書というと、通常はWebサイトやスマホアプリを実装するための知識やテクニックですが、今回は『CSSによる本作り』の解説書を紹介します。 原稿の執筆から、本のデザインやレイアウト、データ入稿まで、CSSを活用した本作りのやり方を徹底解説した解説書です。 表紙に「未知の表現力！」とあるように、CSSでこんなこともできるのかと驚きの連続でした。 本書は技術書で評判が高いリブロワークスさんの最新刊。当ブログでもVS Codeの解説書やJavaScriptの解説書を紹介しましたが、今回はCSSによる組版、本作りの解説書です。 マークダウンで原稿を執筆し、それをCSSでレイアウトし、本に仕上げます。本はWeb上でも書籍にもでき、本書自体もCSSで作成されています。
新興組版システム typst のススメ
はじめに Typst とは、新しい組版ソフトウェアです。数式を多用する科学技術系の記事を書くのに向いています。 ローカル環境で PDF にコンパイルすることもできますし、 Overleaf のようなオンラインの執筆環境も提供されています。 この分野では LaTeX が歴史的にも非常に強く、なかなか代替のソフトウェアが出現しなかったのですが、ようやく注目にも値する品質のものが登場してきたという感じです。 そもそも組版システムとは そもそも Qiita や Zenn でも数式を埋め込むことができるこの時代、ドキュメントを書くための専用の言語を使う理由は何でしょうか。 LaTeX はオワコンではないのでしょうか。 組版システムというのは簡単には無くなりません。これは、ブログや Wiki などの Web の記事とは性質が異なるからです。 組版システムは紙に印刷することを最終的な目的にしたシステムで
上達のコツはやはり反復練習！ということで、第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といったクリエイティブアプリケーションに
Vivliostyle（ビブリオスタイル）はCSS組版を実現するオープンソースのライブラリ／アプリケーション群です。これから始まるこの連載は、そんなVivliostyleの魅力や可能性にさまざまな方向から迫ってみようという試み。まず第1回としてCSS組版とはなにか、そしてVivliostyleでどんなことが、どのようにしてできるのかをご紹介します。 CSS組版ってなに？ そもそも組版とはなんでしょう。一言でいえば文字・図版・写真などをページ上に配置することです。この記事では、とりわけCSSやHTMLといったWeb技術をつかうCSS組版を取り上げます。その最大の特徴はページ区切り（pagination）。ブラウザーではコンテンツをスクロールして読み進みますが、CSS組版ではページをめくることで読み進みます。結果として、CSS組版は印刷用データ（PDF）を作成する方法でもあります。現在CS
みなさんは日本語の文章を書くとき、段落の始まりはどのようにしていますか？ 大抵の方は「先頭を1字下げにする」と答えるのではないかと思います。 では、なぜこの1字下げを行うのでしょうか？ 段落の字下げは執筆者・出版社などの⽅針によってさまざまなルールがあり、表示する媒体（紙・Webなど）によっても変わります。 今回はこの段落の字下げについてご紹介します。 段落とは？段落の字下げについて語る前に「段落」について整理しておきます。 日本語の文章の構成要素は大きい順に「文章・段落・文・文節・単語」の5種類の区切りがあります。 それぞれが意味を持ち、内容を理解できるようになっており、それらをより理解しやすくし、受け⼿に伝えるのが組版の重要な役割でもあります。 日本語をあらわす「ことばの単位」この5種類の区切りは下図のような範囲・意味があります。 ことばの範囲例①単語 文法上の意味・機能をもった最小の
このたびモリサワのnote3周年を機に、文字組版に関する記事をアップしていくことになりました。 この連載を担当するのは、モリサワの中で文字や組版、印刷、制作などに関して、普段からお客様のお困りごとの解決を行っている技術サポートのエキスパートです！ 以下のような内容の連載を予定していますので、ぜひご期待ください。 文字サイズに関する単位の種類 禁則文字にはどんなものがあるの？ 文字間の調整と詰め組 日本語の中のアルファベットの扱い方 ルビの種類と組み方 など モリサワは「写真植字」を発明して以来、一貫して「文字の未来」をみつめて研究・開発を続けてきました。 モリサワと聞いて「フォント」のメーカーだとイメージする方は多いと思います。「フォント」ひいては「文字」は、なにかしらのことばや情報を表すために用いる材料のひとつでしかなく、相手に伝えるためには「文字」を並べて組む「組版」が必須です。 文字
GigaViewer for AppsにVivliostyle.jsが採用されました 小形 克宏 (理事、業務執行役員) 株式会社はてなは今年3月29日、自社のマンガビューワ「GigaViewer for Apps」が、「少年ジャンプ＋」（株式会社集英社）のアプリ版に採用されたことを発表しました。 はてなのアプリ専用マンガビューワを集英社が採用。2,700万ダウンロードを超える「少年ジャンプ＋」に提供開始（2024-03-29） これにともない「GigaViewer for Apps」に組み込まれた小説用ビューワのレイアウトエンジンとして、Vivliostyle.jsが採用されたことをお知らせします。 もしかしたら、「なぜマンガアプリにVivliostyleが？」と不思議に思われる方もいるかもしれません。じつは集英社はマンガ作品のノベライズにも力を入れており、「少年ジャンプ＋」もたくさんの
「約物」のアキと調整｜モリサワ note編集部
「日本語組版は難しい……」 こんな言葉を聞いたことがありますか？ その要になるのが「約物やくもの」と言われる記号類です。 例えば私達が当たり前のように使用している句読点。 縦組みでは「、。（テン・マル）」の組み合わせが使用されますが、横組みでは「，。（カンマ・マル）」や「，．（カンマ・ピリオド）」の組み合わせを使用することもあります 昭和26年（1951年）に国語審議会が定めた「公用文作成の要領」では、公文書において横書きでは「，。（カンマ・マル）」を用いるよう定められていました。 しかし令和4年（2022年）上記に代わって「公用文作成の考え方」が定められ「、。（テン・マル）」が横書きにおける句読点の原則となりました。 ※横書きでは「，（カンマ）」を用いてもよいとされていますが、一つの文書内でどちらかに統一する必要があります。 これら句読点は、文の区切りを示す役割を果たしています。私達にと
多言語の組版ルールをご紹介している本連載。今回からは、繁体字 はんたいじに関する知識を全２回にわたりお送りします。 繁体字と共通点も多い、簡体字の組版ルールはこちらからご覧ください。 繁体字の成り立ち繁体字は中国語の表記に使用される文字で、「正体字」とも言われます。漢字が簡体字として省略化される以前は、中国大陸でも使われていました。 一見すると日本の旧字体にも似た伝統的字形を持ちますが、両者は微妙に違います。 もともと木版印刷などが登場する以前、漢字は手書きでやり取りされていたため、ひとつの漢字に複数の異体字がありました。 しかし、活字を使うようになると、手書きで通用していた複数のバリエーション（異体字）をすべて網羅することが難しくなり、そこで、使用頻度の高い字形に集約されるようになったのです。 18世紀前半（清朝期）に編纂された『康熙字典 こうきじてん』は12集42巻から成り立っており、
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 に公開
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なんとなく使っていませんか？ 括弧の種類と使い分け｜モリサワ note編集部
Markdownで技術同人誌のPDFが生成できるOSSを公開しました - Qiita
文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦
Vivliostyleで市販書籍とそっくりに組んでみよう | gihyo.jp
Vivliostyleでなにができるの？ | gihyo.jp
段落の字下げを行う理由を知ろう｜モリサワ note編集部
文字組版の連載、スタートします！｜モリサワ note編集部
GigaViewer for AppsにVivliostyle.jsが採用されました
多言語の組版ルール【繁体字編】第１回 繁体字の基本と組版｜モリサワ note編集部
CSS Text Level 4 を読む（抄訳）