本文スタイルの反映(HTML, CSS)

ブログ出版局では、本文内の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


« Prev item - Next item »
--------------------------

Comments

コメントなし

Leave comment

このアイテムは閲覧専用です。コメントの投稿、投票はできません。