本文スタイルの反映(HTML, CSS)
- Posted by: gnn • 2010/03/01
ブログ出版局では、本文内のHTMLタグ、CSSによるスタイルの指定のほとんどが反映されます。例えば、文字の太字、斜体、色の指定、表組、境界線の指定等が本に反映されます。
絵文字
各ブログサービス独自の絵文字タグ([絵文字:mikan]のようなタグ)は、サポートしているブログサービスに限り書籍に反映します。絵文字のサポート状況は対応ブログサービス一覧をご覧下さい。
また、class="emoji"という属性が付けられたIMGタグは絵文字としてレイアウトされます(例: <img src="mikan.gif" class="emoji">)。絵文字の最大サイズは文字のサイズと同じに制限されます。上下の位置は行の中央になります(vertical-align: middle;)。
class="emoji"が指定されていない画像は、画像の配置(文中右、別段中央配置など)が設定できるレイアウトでは、絵文字と意図して使っているものであっても、位置が変わりますのでご注意ください。
外字
特殊な文字を画像として配置する場合(外字)は、IMGタグにclass="gaiji"という属性を付けてください。外字は絵文字と同様に配置されます。上下の位置は、中央よりも若干下(vertical-align: -.12em;)となり画像の下辺が、ほぼ文字の下に揃うように配置されます(若干のずれが生ずることはご了承ください)。
ルビ
「新・標準スタイル」「標準縦組」「縦二段組」では、ルビを振ることができます。ルビを振るには、HTMLのRUBYタグを使って、以下のように記述してください。
<RUBY><RB>漢字<RT>かんじ</RUBY>
または(ルビをサポートしないブラウザで、読み方を括弧付きで表示する場合)
<RUBY><RB>漢字<RP>(<RT>かんじ<RP>)</RUBY>
縦書きのスタイル
縦書きレイアウトでは、いわゆる「全角文字」が縦向きに配置されます。半角英数字は90度横倒しになります。なお、半角カタカナは縦向きになります。
また、単に本文が縦書きになるだけでなく、スタイルが90度回転されます。例えば、<div style="border-top: 1px solid">... のようにCSSで上に境界線が指定されたボックスがあった場合、縦書きレイアウトでは境界線は右側に表示されます。この規則はテーブルの境界線や、幅、高さ、マージン、パディング、にも適用されます。そのため、横書きのスタイル指定の趣旨を壊さずに、縦書きにすることが出来ます。
各CSSプロパティは、以下のとおりに読み替えられます。
横書き | 縦書き |
width | height |
height | width |
max-width | max-height |
max-height | max-width |
min-width | min-height |
min-height | min-width |
padding-top | padding-right |
padding-right | padding-bottom |
padding-bottom | padding-left |
padding-left | padding-top |
border-top-color | border-right-color |
border-right-color | border-bottom-color |
border-bottom-color | border-left-color |
border-left-color | border-top-color |
border-top-style | border-right-style |
border-right-style | border-bottom-style |
border-bottom-style | border-left-style |
border-left-style | border-top-style |
border-top-width | border-right-width |
border-right-width | border-bottom-width |
border-bottom-width | border-left-width |
border-left-width | border-top-width |
margin-top |
margin-right |
margin-right | margin-bottom |
margin-bottom | margin-left |
margin-left | margin-top |
top | right |
right | bottom |
bottom | left |
left | top |
上記の他、padding, border, border-color, border-style, border-width, marginプロパティも同様に影響を受けます。
page-break-after, page-break-beforeのleft, right指定は逆になります。
画像の方向とサイズは縦書きでも維持されるため、画像に対するwidth, height, min-width, min-height, max-width, max-heightの指定は影響を受けません。
その他
HTML 4.01, CSS 2.1によるスタイルがサポートされている他、以下のCSSプロパティが使用可能です(一部スタイルの反映が不完全なことがあります)。
- background-size
- block-progression
- text-align-last
- writing-mode
- word-wrap
- column-count
- column-width
- column-gap
- column-rule-style
- column-rule-color
- column-rule-width
- column-rule
- columns