Skip to content

Justification

Jump to bottom
cibboy edited this page Sep 3, 2018 · 5 revisions

Justification

Introduction

Default justification is left, but Paper allows for the full range of justifications: left, right, center and justified.

Justification applies only to text, so it makes sense to apply it to text-based tags. It is also inherited, so you can apply it to any tag in order to propagate a specific justification to all text that is contained in that tag, regardless of its depth in the DOM tree. Overriding a value is simply a matter of specifying a different justification style.

Usage

Justification is considered a specialization (see Basic concepts - Specialization), so it is handled through classes.

Justification classes

  • Left justification

    Left justification is applied using the left class.

    Example
    <p class="left">This is a left-aligned paragraph</p>

  • Right justification

    Right justification is applied using the right class.

    Example
    <p class="right">This is a right-aligned paragraph</p>

  • Center justification

    Center justification is applied using the center class.

    Example
    <p class="center">This is a center-aligned paragraph</p>

  • Justified

    Justified style is applied using the justify class.

    Example
    <p class="justify">This is a justified paragraph</p>

Inheritance

Inheritance allows to propagate a justification style to all children.

Example
<p>This is a standard paragraph, by default it is left-aligned</p>
<div class="justify">
  <p>This paragraph is justified through inheritance</p>
  <p class="left">This is a left-aligned paragraph</p>
</div>
Example

In this example all text in the page is right-aligned, unless overridden.

<body class="right">
  <p>This paragraph is right-aligned through inheritance</p>
</body>

Live examples

Live examples

Clone this wiki locally