CSS Typesetting 最新 Web 標準技術により、電子出版や Web 出版のための 新しい組版システムを作るオープンソース・プロジェクト

この回答にも書きましたが、「指定の HTML 要素を Canvas に描画して、それを画像データに変換すること」でいけます。 さすがに2回目なので、なにか html2canvas ライブラリを使用して、動くサンプルコード書きますね。 以下のコードでは、「Take a shot」 ボタンを押すと、画像の生成と、ダウンロードボタンを生成します。 function screenshot( selector) { var element = $(selector)[0]; html2canvas(element, { onrendered: function(canvas) { var imgData = canvas.toDataURL(); $('#screen_image')[0].src = imgData; $('#download')[0].href = imgData; $('#do
日本語組版において、縦書きと横書きの選択肢があるということは極めて自然なことですが、Webサイト制作の中で自由な組版を実装するための技術はこれまで標準化されておらず、縦書きの実装はJavaScript等による強引な手段でしか実現できないという問題を抱えていました。 私たち『縦書きWeb普及委員会』は、縦書きと横書きが混在する日本語組版の文化をWebに継承し、自由な組版を実装するための規格をWeb標準とすべく、Webに関連する各種技術の国際標準化団体であるW3Cと協議を重ねながら、CSSにおける新たな組版規格である〝Writing Modes〟の標準化に向け、様々な取り組みを行なっています。 『たてよこWebアワード2017』は、こうした取り組みのひとつとして、CSS Writing Modesを用いた縦書き実装の指標となるような優れたWebサイトを表彰することを目的としたアワードです。 縦
はじめに 自己紹介 1990年ごろ、テキスト整形ツール「XTR」を開発しフリーソフトウェアとして公開。 それがきっかけで、組版とマークアップ言語(SGML~XML/HTML)、スタイルシート言語(XSL/CSS)に関心を持つ。 1999年、XML/CSS自動組版ソフトの開発を、アンテナハウスに企画提案。Antenna House Formatterとして製品化。 W3C CSS仕様とその実装に携わり、その関係で電子書籍フォーマットEPUB3(縦書き対応)の標準化にも関わった。 2014年8月、次世代CSS組版ツールを開発するため、株式会社ビブリオスタイルを設立(アンテナハウスが出資)。 CSS組版=HTML(またはXML)+CSSで組版 組版とは、印刷の一工程で、文字や図版などの要素を配置し、紙面を構成すること。…… 画面上での編集を前提とした WYSIWYG の DTP に対し本来の組版
Microsoftは6月25日(米国時間)、「Vertical writing mode improvements in IE11 - IEBlog - Site Home - MSDN Blogs」において、2014年6月に実施したIE11のアップデートによって縦書きモードのレイアウトを改善したことを伝えた。センターベースラインやふりがなポジション関連などが改善されている。記事ではこうした機能改善によって日本などにおける出版物やインタラクティブテキストブックなどにおいてより豊かな表現が可能になると説明している。 日本のように横書きと縦書きという2つの異なる方向性を持つテキストが混在している市場は世界的に見ても珍しい。PCやスマートフォン、タブレット端末といった電子機器とインターネットの普及などもあり、日本においても横書きが広く扱われるようになったが、新聞、書籍、雑誌、教科書、漫画などさま
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
(追記2012-02-04)Twitterでの議論まとめ(随時更新中。ハッシュタグは #UTR50) UTR#50(Unicodeの縦書きの文字の向き)の話題 「電子書籍、電子出版のCAS-UBブログ」 のほうで、CSSの縦書きとUnicodeの議論 UTR#50: Unicode Properties for Vertical Text Layout (Proposed Draft) がホットです(by小林社長): 縦組みにおける英数字正立論―まとめ 全角英数と半角英数の使い分けの煩わしさをなくす100年1回のチャンスが来ています! ラテンアルファベットと数字を縦にするか、横にするか?UTR#50とCSSの関係 縦組みのPC雑誌における英数字の方向 縦組み書籍における英数字の使われ方―その2 縦組み書籍における英数字の使われ方 未来の縦書き文字の表示はどうなるの? CSSの縦書きとUni
ウェブ実装技術が支える電子書籍「読書体験」のデザイン - HTML5・CSS3 でつくった EPUB 3.0 ファイルで実感してみよう EPUB 3.0 の仕様が5月23日に固まり、あとは正式公開を見守るだけという段階になりました。先週末まで開催されていた国際電子出版エキスポの様子からも、出版・印刷各社が本気で電子書籍・EPUB に注力しているのがうかがえます。 EPUB とはなにか・EPUB 3.0 でなにができるのかは、以前このブログにディレクタの内藤が書いた記事(1・2)などで確認していただくとして、今日は、EPUB 電子書籍の制作とウェブデザインとの関連をテーマにしてお話ししたいとおもいます。 EPUB も 3.0 から HTML5 ベース(XHTML5)となり、ウェブページの表現や設計実装に起きている大きな変化の流れに一層寄り添うことが決まりました。 今後、ウェブ制作業界は、HT
フォントのサイズの単位に何を使ってますか? px? em? それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
Adobe Systemsは米国時間3月8日、雑誌のようなレイアウトのウェブページをより簡単に作成できるという新しい標準「CSS Regions」(PDF)をWorld Wide Web Consortium(W3C)に提案した。Adobeはこの技術を、シリコンバレーで開催のCSS Working Groupのミーティングでも説明している。 雑誌風のレイアウトはAdobeの「InDesign」ソフトウェアの中心的な部分だ。各種ウェブ標準の機能が改善されれば、AdobeはInDesignユーザーに対し、ウェブ向けのデザインを作成する機能を容易に提供できるようになる。 Adobeがその方向に進んでいることを示すものがいくつかある。同社は今週、「Flash」コンテンツをCSS、JavaScript、HTMLを用いたウェブコンテンツに変換するツール「Wallaby」を発表している。また、先週リリー
CSS Text Module Level 3 Editor’s Draft, 3 October 2024 More details about this document This version: https://drafts.csswg.org/css-text-3/ Latest published version: https://www.w3.org/TR/css-text-3/ Previous Versions: https://www.w3.org/TR/2023/CRD-css-text-3-20230903/ Implementation Report: https://test.csswg.org/harness/results/css-text-3_dev/grouped/ Test Suites: http://test.csswg.org/suites/cs
CSS Writing Modes Level 3 Editor’s Draft, 28 August 2023 More details about this document This version: https://drafts.csswg.org/css-writing-modes-3/ Latest published version: https://www.w3.org/TR/css-writing-modes-3/ Previous Versions: https://www.w3.org/TR/2019/REC-css-writing-modes-3-20191210/ Test Suite: http://test.csswg.org/suites/css-writing-modes-3_dev/nightly-unstable/ Feedback: CSSWG Is
CSS: current status and future directions for global languages for EPUB EGLS Sapporo F2F 2010-08-03 MURAKAMI Shinyu (Antenna House, W3C CSSWG) General What is CSS2.1 and when will it be completed? What is CSS3 and when will each module is expected to be completed? W3C process (editor's draft, working draft, CRs, Proposed RECs, REC, etc.) Why is CSS development so slow? Overview of CSS3 modules: wh
EPUB や CSS と日本語レイアウト HTML5 と電子書籍 アンテナハウス 村上 真雄 @MurakamiShinyu 2010-07-14 「第8回HTML5とか勉強会」での講演資料 [HTML5プレゼンツールNerine版もあります] 村上 真雄 (@MurakamiShinyu) 自己紹介 Twitterで公開しているプロフィール: XML/HTML+XSL/CSS 自動組版ソフト Antenna House Formatter 開発者 アンテナハウス取締役 W3C会員としてXSLとCSS3仕様に関わる HTML5 IG JP共同議長 JEPA EPUB研究会員 世界標準仕様(特にHTML+CSSとその応用のEPUB)で、まともな日本語組版を可能にしたい Antenna House Formatter 1999年、当時W3Cドラフトだった XSL (Extensible Sty
function applyCSS(doc, cssfile, overwrite) { if (typeof overwrite == "undefined") overwrite = 0; // デフォルト:CSSの追加 // 既存のCSSを削除 if (overwrite && doc.styleSheets.length >= 1) { var links = doc.getElementsByTagName("link"); for (var i = 0 ; i < links.length ; i++) { if (links[i].rel == "stylesheet") links[i].parentNode.removeChild(links[i]); } } // CSS追加 if (document.all) { doc.createStyleSheet(cssfil
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く