flexbox レイアウトで内容がはみ出す理由: Days on the Moon
「flex box layoutで中に長いテキストなどを含む幅可変要素のレイアウト - くらげだらけ」という記事が興味深いです。過去に「長い英単語を途中で折り返したいときの CSS の指定方法」にて、word-wrap: break-word と display: inline-block などの組み合わせには注意が必要 (word-wrap の指定が効かないように見えることがある) と述べたのですが、似たようなことが display: flex にも言えるようです。 この挙動は認識していなかったので CSS Flexible Box Layout Module Level 1 (flexbox 仕様草案、2016 年 4 月 2 日時点のもの) を見てみたところ、「4.5. Implied Minimum Size of Flex Items」(flex アイテムの暗黙的な最小サイズ)
JLREQとCSS（1）
こちらのエントリは、JAGAT XMLパブリッシング準研究会で今期の研究テーマとして、W3C文書「日本語組版処理の要件」（JLREQ）と、これに関連してVivliostyleの村上真雄さんたちが提出したW3Cメンバーサブミッション「Web技術を用いた日本語組版の現状」を取り扱っていることに伴い、会員以外の方の意見を広く求めるとともに、記録を残しておく目的で議事録をベースに補足したものを公開するものです。 間違い、補足などございましたらご意見いただければ幸いです。なお、当ブログはコメント許可制を取っているため、反映に時間がかかります。あらかじめご理解ください。 方針としましてはW3C文書「日本語組版処理の要件」（JLREQ）を先頭から読んでいき、各要素に対応するCSSが存在するのか、存在するとして実用段階なのか、InDesignなどの組版ソフトではどういった形で機能を実現しているのか（いない
CSS組版による書籍『CSSシークレット』刊行のお知らせ
株式会社オライリー・ジャパンは、株式会社ビブリオスタイル（Vivliostyle）と共同制作した書籍『CSSシークレット 47のテクニックでCSSを自在に操る』（本体価格3,400円＋税）を2016年7月23日より全国書店・Web書籍取扱いサイト他にて発売いたします。 本書は数千行のCSSと1万行あまりのHTMLで作成された「CSS Secrets」（O'Reilly Media, Inc.）の翻訳書です。 原書のコンセプトにもとづき、Vivliostyle社の全面協力のもと、原書のデータをもとに日本語用のCSSを作成しました。原書で使用されたソースを日本語版でも再現するため、Vivliostyle社が制作システム「Heracles（仮称）」を開発し、CSS組版・PDF生成エンジン「Vivliostyle Formatter」により、原書で使われた膨大なCSSに対応させることに成功しました
CSSのvw, calc()を使用した、レスポンシブ対応のフォントサイズを指定するこれからのテクニック
本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精
TypeSquareのWebフォントをCSSで指定するときは、フォント名を２つ書くとダメ
概要 ▶ TypeSquareでは、Webフォントを指定する時に「日本語」「英字」のフォント名を２つ指定する必要はありません（というか、するな）。どちらかだけでOK。 割と間違っている人は多いのかも？ モリサワのWebフォントサービス「TypeSquare」を最近ようやく使い始めて、これは便利だと思い始めている今日この頃、みなさんいかがお過ごしでしょうか。 TypeSquare ●目次 ダメなCSSの書き方 日本語名と英字のフォント名を並べて書くのは普通では？ フォントファイルが２回読み込まれているだと…？ 答えはTypeSquareのページに TypeSquareのWebフォントを指定する時の正しいCSSの書き方 ●ダメなCSSの書き方 さて、既にタイトル落ちしている気もしますが、TypeSquareでは、 font-family: "リュウミン R-KL","Ryumin Regula
縦書きWeb普及委員会
日本語の組版において 「縦書きと横書きの選択肢がある」 ということは極めて自然ですが、 世界的にはマイナーな 書字方向でもあります。 一方、東アジアでは 縦書きを利用している国が 一定数あり、横書きの文化圏においても 縦書きを利用するケースが 「珍しい」というほど 少なくないことも事実です。 横書きの文字組が中心だった Webの世界において、 縦書きの知見を取り込み、 縦と横の文字組を自由に デザインできるようになることで、 Webデザインは更なる自由と 高い表現の可能性を 獲得できると言えます。 私たち『次世代Webブラウザの テキストレイアウトに関する 検討会（縦書きWeb普及委員会）』は、 縦書きレイアウトの 国際標準化活動を推進し、 縦書きWebコンテンツの 普及促進に取り組んでいます。 The concept of being able to choose between a h
Vivliostyleのベータ版をリリースしました!
Vivliostyle 最初のベータ版をリリースしました! 今回はVivliostyle.jsおよびChrome拡張に加え、Vivliostyle Formatterもリリースします。 サンプルおよびベータ版ダウンロード Vivliostyle.js 0.2.0 今回のリリースでは、CSS Paged Media Module Level 3で定義されているPage-based countersおよびPage-Margin Boxesに対応しました。これらの機能を使うと、書籍などの組版に欠かせないページ番号（ノンブル）を各ページに出力することができます。実際にページ番号が入った新しいサンプルを公開していますので（下記参照）、参考にしながらお試しください。 また、ビューアーのUIも一新しました。以前のビューアーは、ページ送りボタンのみがあるシンプルなものでしたが、新しいビューアーには文字の拡
CSS での OpenType 機能の構文
この機能は、一連の字形を「合字」と呼ばれる 1 つの字形に置き換えます。合字は、タイポグラフィの目的で好んで使用されます。この機能を有効にすると、通常の状況ではデザイナーやベンダーの審査に使用するような合字が挿入されます。 この合字機能は、デフォルトで有効です。そのため、通常は CSS を記述しなくても動作します。ただし、Chrome ではデフォルトで有効になりません。また、Safari（Mac または iOS）では無効にできません。Chrome と Firefox の一部のバージョンでは、スペースを含む合字で問題が発生します。 .class { font-variant-ligatures: common-ligatures; -moz-font-feature-settings: "liga", "clig"; -webkit-font-feature-settings: "liga"
vivliostyleを使う - Qiita
vivliostyleって？ ビブリオスタイル社の提供するcss組版システムです。 例えばhtmlをだらーっと書いてvivliostyleに通すとA4サイズのページに整形されて出てきてpdfで保存、そのまま印刷できたりします。 まだアルファ版なので長い目で見ようと思ってたらこいつが現状でも他ツールでできないことをバカスカやってのけるモンスターだったんですよ。 しかも筆者ライアーノーズは趣味でDTPもどきを色々やっては挫折してきたのですが、vivliostyle(+pandoc markdown)はちゃんとしたドキュメントがほぼ無い現状でも、挫折することなくなんとか公開できるくらいのpdfを作ることができたので相当学習コスト・導入コストが低いツールであると断言できると思います。 [参考]これまでの挫折遍歴 vivliostyleと受け持つ範囲が違うツールもありますが。 MS PowerPoi
『電書ラボ制作仕様見出しCSSテンプレート』を公開
Firebrand Technologies社「FlightDeck」オープンβ版公開 Firebrand Technologies社から、EPUB電子書籍ファイルの構文エラーチェッカー「 記事を読む 2014/09/10（水）電書ラボ全体会を開催しました 昨日、2014/09/10（水）18:00〜、国立情報学研究所セミナー室にて、電書ラボ全体会を開催し 記事を読む CTEより、IDML変換ツール_ベータDEMO版 が公開 CTEより、IDML変換ツール_ベータDEMO版が公開されました。 IDMLを読み取り、文字情報を電 記事を読む facebookの「電書ラボ・意見交換グループ」に参加ください facebookのグループとして「電書ラボ・意見交換」を公開しています。 現在メンバーは40人です。 記事を読む リーダー表示テスト用epub、8ファイル 更新 リーダー表示テスト用epubフ
感嘆符・疑問符の後の全角空白は本当にJIS由来？ 中の人に聞いてみたよ - 電書ちゃんねるBlog
こんにちは、ろす（@lost_and_found）です。 先日、いつも勉強させて頂いている株式会社LIGさんのサイトに載ったこんな記事が話題になりました。 感嘆符・疑問符の後に全角空白（スペース）が必要になる理由と、Webメディアの表記ルールについて | 株式会社LIG 日本語の表記ルール「！」「？」の後ろの空きをめぐって、さまざまなメディアや規格を調査・考察した素晴しい記事です。僕のような浅い人間は「ああ立派だなあ」と感心するのが精一杯のリアクションでした。 JIS X4051:2004を読んだけどわからない ところが次の記述に疑問を呈する声が聞こえてきます。 そして、JISX4051では、同様に全角スペースを、疑問符や感嘆符の後に和字間隔をあけることに用いると定めているため、“「感嘆符（！）」と「疑問符（？）」の後には全角スペースを空ける”がJIS、すなわち日本の国家標準、と言えるので
text-spacingが待ち遠しい
日本語文中の英数で日本語の文字との間に半角スペースを入れるか入れないかという話があります。検索すると色々議論されていたりして面白いです。 このブログでは場所によって半角スペースを入れたり入れなかったりしていますが（2020年1月追記：現在は入れていません）、『日本語組版処理の要件』に合わせてユーザーエージェントがいい感じに処理してほしいなーとか思います。 そこで「それCSSでできるよ」と言える（ようになるかもしれない）プロパティを紹介してみます。 これがまさに日英数が混在する文章で、英語や数字と日本語の間に4分の1スペースを自動で追加したり、全角括弧で生じる大きなスペースをトリムしたりできるプロパティです。 text-spacingは元々text-trimとtext-autospaceという別々のプロパティを統合したものです。これは2011年9月1日版のチェンジログに載っています。 統合に
CSS組版とその周辺 第3回勉強会 (2014/10/19 13:30〜)
お知らせ 【重要なお知らせ】iOSアプリの運用および提供を2024年6月3日(月)を以て終了いたします。詳細は お知らせをご覧ください。 お知らせ connpassではさらなる価値のあるデータを提供するため、イベントサーチAPIの提供方法の見直しを決定しました。2024年5月23日(木)より 「企業・法人」「コミュニティ及び個人」向けの2プランを提供開始いたします。ご利用にあたっては利用申請及び審査がございます。詳細はヘルプページをご確認ください。
組版の価値。組版と画面表示（レンダリング）の相違を考える。 | 電子書籍、電子出版のCAS-UBブログ
先日、思いつきをTweetしましたが[1]、以下、その続きを少し考えてみました。 組版という言葉は、Wikipediaでは次のように定義されている。 「印刷の一工程で、文字や図版などの要素を配置し、紙面を構成すること。組み付けとも言う。」 印刷においては「版」を複製のために用いる。複製した結果は冊子や書籍の形式に製本される。こうして、「版」のレイアウトは永続的な物体化される。「版」が生み出すものが永続的であるが故に、きれいなレイアウトの「版」を創るのにコストを懸ける意味があり、また、複製する数量が多いときは、頁の数を減らすための努力がコスト削減という価値を生み出す。つまり「版」は印刷に利用されて大きな価値を生む。 組版はDTPの専門家の仕事であるが、このようにDTPは印刷と切り離しにくい。 自動組版で作る版面は、DTP専門家によるそれと比べると複雑さは劣るが、それでも細かい調整がだいぶでき
W3C日本語組版ノートとCSS - JAGAT
私はW3CのCSSワーキンググループでエディターをしている。今日はJLREQ（日本語組版処理の要件）の出版記念ということで、ここまでの経緯をまとめてみた。 10年前の1993年が日本語組版にとってエポックメーキングな年であり、その年にJLREQの前身であるJIS X4051が発刊されている。 同じ年に、JISとほぼ同時だったのでJISの取り込みには間に合っていないが、Word6.0が日本語ワープロとしては初めて、約物の詰めとか、きちんと組版ルールを組み入れたワープロとして発売されている。 1995年には、Wordはほとんどマイナーチェンジされたが、これがOutlookに入ったということで、この時点ではまだJISのような組版が、メールクライアントで使えるようになった。1997年に、Word97でJISと合わない部分やバグフィックスを入れた。JIS準拠という明確な基準はなかったが、作っている側
CSS3のルビ機能を考える - ちくちく日記
昨年来日し、CSS3の日本語組版について楽しいディスカッションを提供してくれたCSS3のエディターfantasaiさんが今年も来日されました。 去年、fantasaiさんを囲んでの食事会ということで居酒屋に集まって穏やかに親睦を深めるだけのつもりがfantasaiさんから「日本語縦中横の横幅はどうあるべきか」という楽しいお題がだされてしまった結果、集まった皆がfantasaiさんをほっぽらかして大激論をやる、という盛り上がりを見せてしまったため、今年は「それなら最初から議論するつもりで集まった方がいいんじゃないか」と主催の方が考えたのかどうかはわかりませんが、とにかく今年は「CSS3が開く日本語組版の未来」と銘打ち、会議室をかりての勉強会開催となりました。 告知が開催二日前という直前だったにも関わらず、なかなかに濃いメンツが顔を揃えたのはさすがというか。（参加者リスト） ここから当日話され
InDesignとCSSの行組版の違い - overprint
InDesignを使っているDTP関係者がCSSで組版をやろうとすると、細かな違いに戸惑うことがあります。今回は行送りの扱いの違いをまとめてみました。 ※ここでは問題をシンプルにするために、日本語の文字組で、すべて同サイズの文字を組む場合を前提にしています。 用語説明 まずは組版の基礎知識として、行間、行送り、文字サイズの用語から。「日本語組版の要件」*1によると 行送り（line feed） 隣接する行同士の基準点から基準点までの距離．（JIS Z 8125） 行間（line gap） 隣接する行の文字の外枠間の距離． 文字サイズ（character size） 文字の大きさ．通常，文字の行送り方向の外枠の長さ． とあります。「[図36]: 基本版面を行送りで指定する方法」の図を見れば一目で分かるかと思います。 [図36]: 基本版面を行送りで指定する方法より 行送り方向の版面サイズ 版
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
出版のワークフローは、ブラウザベースのCSS組版エンジンで変わるか？ その１ 発表の概要紹介 | 電子書籍、電子出版のCAS-UBブログ
BLOGOS サービス終了のお知らせ
Second Announcement & CFP