Typesetting with CSS

by typora.io

日本語 (ja)

This article explains common style preferences for your typesetting based on Custom CSS.

To use this, please read Custom CSS first.

Outline

Page Setting

Change Background

To change the background of your writing area, see https://support.typora.io/Backgound/.

Change Width of Writing Area

To change the width of your writing area, see https://support.typora.io/Width-of-Writing-Area/.

Text & Font

Change Font

To change font color, font family and font size, see https://support.typora.io/Custom-Font/.

Uppercase Headers

For example, to make Heading 1 uppercased, you can use:

h1 {
  text-transform: uppercase;
}

You can partially make some text uppercased by inputting HTML directly in Typora:

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

Small-cap Headers

For example, to make Heading 4 small-caped, you can use:

h4 {
  font-variant: small-caps;
}

You can partially make some text in small-caps by inputting HTML directly in Typora:

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

Ligature

You can change font ligatures by

#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> */
}

Paragraph & Alignment

Justify Alignment

#write {
  text-align: justify;
}

Center alignment

For example, center align Heading 4, you can use

h4 {
  text-align:center;
}

You can partially make a paragraph with centered texts by inputting HTML directly in Typora:

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

Right to Left Writing

RTL (right-to-left) support is limited, see https://support.typora.io/RTL/.

Vertical Writing

Vertical writing support is limited.

#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;
}

For known issues, see https://github.com/typora/typora-issues/issues/1121.

Center / Do not Center Image

In default theme, if one paragraph it nothing but one image, Typora will center align it.

To change this behavior, or center align multiple images, see https://support.typora.io/Images/#align-images.

Components

List Styles

See https://support.typora.io/List-Style/

Auto Numbering for Headings / Outline / TOC

See https://support.typora.io/Auto-Numbering/.

Control TOC Levels

See https://support.typora.io/TOC-levels/.

Change Color Themes for Code Fences / Source Code Mode

See https://support.typora.io/Code-Block-Styles/.

“Erase” Completed Tasks

See https://support.typora.io/Task-List/#erase-completed-tasks.

Styles for Diagrams

See https://support.typora.io/Draw-Diagrams-With-Markdown/#sequence-diagrams-options and https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid-options.

Editing

Change Styles for Focused / Unfocused Text in Focus Mode

See https://support.typora.io/Change-Styles-in-Focus-Mode/.

Change Writing Direction

See https://support.typora.io/RTL/.

Do not Hide Markdown Syntax

You could check the https://theme.typora.io/theme/Monospace/ theme.

In short, it uses CSS to prevent markdown syntax from hiding:

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