[docs/formats] Add Formats documentation

docs/formats/ansi.md

@@ -0,0 +1,44 @@
+---
+title: "ANSI - Formats - Picharsso"
+description: "The ANSI format"
+---
+
+# ANSI
+
+This format supports [ANSI Escape Codes](https://en.wikipedia.org/wiki/ANSI_escape_code).
+
+!!! info "Default"
+    Since it can be used to create **plain text documents**,
+    this format is chosen as the **default**.
+
+## Procedure
+
+This format is implemented by the [`AnsiFormatter`][picharsso.format.ansi.AnsiFormatter].
+
+--8<-- "docs/snippets/references/formatting.md"
+
+### Translation
+
+This format doesn't require any translation.
+
+??? abstract "Source"
+    Refer to the [`translate` function][picharsso.format.ansi.AnsiFormatter.translate]
+    for more information.
+
+### Colorization
+
+Using the [`sty` Python library](https://sty.mewo.dev/),
+color is applied to the elements of the `text_matrix`.
+
+??? abstract "Source"
+    Refer to the [`color` function][picharsso.format.ansi.AnsiFormatter.color]
+    for more information.
+
+### Unification
+
+Elements of each row of the `text_matrix` are joined to form
+lines, which are further joined to form one huge string of text.
+
+??? abstract "Source"
+    Refer to the [`unify` function][picharsso.format.ansi.AnsiFormatter.unify]
+    for more information.

docs/formats/html.md

@@ -0,0 +1,43 @@
+---
+title: "HTML - Formats - Picharsso"
+description: "The HTML format"
+---
+
+# HTML
+
+This format supports [HTML](https://en.wikipedia.org/wiki/HTML).
+
+## Procedure
+
+This format is implemented by the [`HtmlFormatter`][picharsso.format.html.HtmlFormatter].
+
+--8<-- "docs/snippets/references/formatting.md"
+
+### Translation
+
+This format requires some characters to be translated
+to their equivalent [HTML character entities](https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references).
+
+??? abstract "Source"
+    Refer to the [`translate` function][picharsso.format.html.HtmlFormatter.translate]
+    for more information.
+
+### Colorization
+
+Color is applied to each element in the `text_matrix` by
+wrapping it in a styled `<span>` element.
+
+??? abstract "Source"
+    Refer to the [`color` function][picharsso.format.html.HtmlFormatter.color]
+    for more information.
+
+### Unification
+
+Elements of each row of the `text_matrix` are joined to form
+lines.
+All lines are wrapped in a `<div>` elemen each.
+The entire text output is wrapped in a `<div>` element.
+
+??? abstract "Source"
+    Refer to the [`unify` function][picharsso.format.html.HtmlFormatter.unify]
+    for more information.

docs/formats/index.md

@@ -0,0 +1,81 @@
+---
+title: "Formats - Picharsso"
+description: "An overview of the output formats of Picharsso"
+---
+
+# Formats
+
+After an `image` is coverted to a `text_matrix`,
+it must be formatted before it can be output.
+
+## Procedure
+
+There are steps involved in this process that are common to
+all `formatters`.
+Picharsso defines a [`BaseFormatter`][picharsso.format.base.BaseFormatter]
+that abstracts this general procedure.
+
+### Initialization
+
+This step assigns values to the parameters for the algorithms.
+
+#### Color
+
+The `colorize` parameter controls whether the output text must include the colors from the image.
+
+Consider the following image:
+
+--8<-- "docs/snippets/embed/subjects/instagram.html"
+
+Here's what it should look like:
+
+--8<-- "docs/snippets/chunks/format/colorize.md"
+
+#### Vectorization
+
+The `vcolor` attribute is a vectorized version of the `color` method.
+
+### Translation
+
+The elements of the `text_matrix` are encoded in the Unicode standard.
+
+Depending on the output format, these characters must be translated accordingly.
+
+??? abstract "Source"
+    Refer to the [`translate` function][picharsso.format.base.BaseFormatter.translate] for more information.
+
+### Colorization
+
+Colors are pooled from the original `image` by resizing it to the dimensions of the output text.
+This ensures that each character has a unique pixel, and thus, a unique color.
+
+With the vectorized `color` method, `vcolor`, the elements of the `text_matrix`
+are transformed into strings of text that represent
+the original character as well as its color.
+
+<div align="center">
+    <img alt="Text matrix colorization" src="/assets/images/diagrams/formats/overview/colorization.webp">
+</div>
+
+??? abstract "Source"
+    Refer to the [`color` function][picharsso.format.base.BaseFormatter.color] for more information.
+
+### Unification
+
+Finally, the `text_matrix` is unified into a single string of text.
+This text, when viewed through a means supporting the particular format,
+should look like the original image.
+
+??? abstract "Source"
+    Refer to the [`unify` function][picharsso.format.base.BaseFormatter.unify] for more information.
+
+## Varities
+
+All the following formats are implemented by a `formatter` 
+which inherits from the [`BaseFormatter`][picharsso.format.base.BaseFormatter].
+
+### ANSI
+:   The [ANSI format](/formats/ansi/) is implemented by the [`AnsiFormater`][picharsso.format.ansi.AnsiFormatter].
+
+### HTML
+:   The [HTML format](/formats/html/) is implemented by the [`HtmlFormater`][picharsso.format.html.HtmlFormatter].

docs/snippets/references/formatting.md

@@ -0,0 +1,3 @@
+!!! question "Formatting"
+    Refer to the [procedure](/formats/#procedure) outlined in the Formats documentation
+    for an overview of the **steps common to all formats**.