CSS による組版

by typora.io

English Original Version Help Improve the Translation

この記事では、カスタム CSS に基づく組版 (タイプセット) の一般的なスタイル設定について説明します。

これを使うには、まず カスタム CSS をお読みください。

目次

ページ設定

背景を変更する

書き込み領域の背景を変更するには、https://support.typora.io/Backgound/ を参照してください。

書き込み領域の幅を変更する

書き込み領域の幅を変更するには、https://support.typora.io/Width-of-Writing-Area/ を参照してください。

テキストとフォント

フォントを変更する

フォントの色、フォントファミリー、フォントサイズを変更するには、https://support.typora.io/Custom-Font/ を参照してください。

大文字のヘッダー

たとえば、見出し1 を大文字にするには、次のようにします。

h1 {
  text-transform: uppercase;
}

Typora に直接 HTML を入力することで、一部のテキストを部分的に大文字にすることができます。

<span style="text-transform: uppercase;">This text will be in uppercase</span>

スモールキャップ ヘッダー

たとえば、見出しレベル4 をスモールキャップ (背の低い大文字) にするには、以下のように指定します。

h4 {
  font-variant: small-caps;
}

Typora に直接 HTML を入力することで、一部のテキストをスモールキャップにすることができます。

<span style="font-variant: small-caps;">This text will be in small-caps</span>

リガチャー (合字)

フォント合字 は、以下の方法で変更できます。

#write {
  /* Keyword values */
  font-variant-ligatures: normal;
  font-variant-ligatures: none;
  font-variant-ligatures: common-ligatures;           /* <common-lig-values> */
  font-variant-ligatures: no-common-ligatures;        /* <common-lig-values> */
  font-variant-ligatures: discretionary-ligatures;    /* <discretionary-lig-values> */
  font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */
  font-variant-ligatures: historical-ligatures;       /* <historical-lig-values> */
  font-variant-ligatures: no-historical-ligatures;    /* <historical-lig-values> */
  font-variant-ligatures: contextual;                 /* <contextual-alt-values> */
  font-variant-ligatures: no-contextual;              /* <contextual-alt-values> */
  font-variant-ligatures: contextual;                 /* <no-historical-ligatures> <common-ligatures> */
}

訳注: 上記の大文字やスモールキャップの指定は、日本語フォントには作用しません。

段落と配置

両端揃え (均等割付)

#write {
  text-align: justify;
}

中央揃え (中央寄せ)

たとえば、見出しレベル4 を中央揃えにするには、以下の設定を使用します。

h4 {
  text-align: center;
}

Typora に直接 HTML を入力することで、テキストを中央に配置した段落を部分的に作成できます。

<center>This text will be center aligned</center>

RTL (右書き)

RTL (右書き) のサポートには制限があります。 https://support.typora.io/RTL/ を参照してください。

縦書き

縦書きのサポートには制限があります。

#write {
   writing-mode: vertical-rl; /*make it vertical rendering*/
   -webkit-writing-mode: vertical-rl;
  text-orientation: mixed;
  overflow-x: auto; /* This enables horizontal scrolling */
}

/* remove the default margin top */
#write > p:first-child, #write > ul:first-child, #write > ol:first-child, #write > pre:first-child, #write > blockquote:first-child, #write > div:first-child, #write > table:first-child {
    margin-top: 0;
}

既知の問題については、https://github.com/typora/typora-issues/issues/1121 を参照してください。

画像を中央に配置/配置しない

デフォルトのテーマでは、1つの段落が 1つの画像しかない場合、Typora はそれを中央揃えで表示します。

この動作を変更する場合、または複数の画像を中央揃えする場合は、https://support.typora.io/Images/#align-images を参照してください。

コンポーネント

見出し/アウトライン/目次の自動番号付け

https://support.typora.io/Auto-Numbering/ を参照してください。

目次レベルの制御

https://support.typora.io/TOC-levels/ を参照してください。

コードフェンス/ソースコードモードのカラーテーマを変更する

https://support.typora.io/Code-Block-Styles/ を参照してください。

完了したタスクの「消去」

https://support.typora.io/Task-List/#erase-completed-tasks を参照してください。

ダイアグラムのスタイル

https://support.typora.io/Draw-Diagrams-With-Markdown/#sequence-diagrams-optionshttps://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid-options を参照してください。

編集

フォーカスモード でフォーカスされたテキストとフォーカスされていないテキストのスタイルを変更する

https://support.typora.io/Change-Styles-in-Focus-Mode/ を参照してください。

Markdown 記法を非表示にしない

https://theme.typora.io/theme/Monospace/ テーマで確認することができます。

つまり、以下のような CSS を使用して、Markdown 記法が非表示になるのを防ぎます。

.md-meta,
.md-content {
  display: inline;
}