.. DO NOT EDIT.
.. THIS FILE WAS AUTOMATICALLY GENERATED BY SPHINX-GALLERY.
.. TO MAKE CHANGES, EDIT THE SOURCE PYTHON FILE:
.. "auto_examples/plot_09_visualize_custom_style.py"
.. LINE NUMBERS ARE GIVEN BELOW.

.. only:: html

    .. note::
        :class: sphx-glr-download-link-note

        :ref:`Go to the end <sphx_glr_download_auto_examples_plot_09_visualize_custom_style.py>`
        to download the full example code.

.. rst-class:: sphx-glr-example-title

.. _sphx_glr_auto_examples_plot_09_visualize_custom_style.py:


.. _custom_visualisation_stylesheet:

Customise the alignment visualisation with CSS
==============================================

If you want, then you can change the appearance of the alignment visualisation by applying custom CSS.
This will override the default style sheet completely, so if you want to just update parts of the styling, you should copy the default style sheet, add your updates and then supply the entire updated style sheet.
You can see the the default style sheet by calling :func:`stringalign.visualize.create_alignment_stylesheet`, or by reading the source code on GitHub, `here <https://github.com/yngvem/stringalign/blob/main/python/stringalign/assets/stylesheet.css>`_.
Below is an example where we modify the style sheet to change the colors used, the font size and to use ``*`` instead of ``-`` to signify inserted and deleted tokens.

.. GENERATED FROM PYTHON SOURCE LINES 12-71

.. code-block:: Python


    import stringalign
    from stringalign.evaluate import AlignmentAnalyzer

    reference = "Hello world!"
    predicted = "Helo w0rld!!"

    tokenizer = stringalign.tokenize.GraphemeClusterTokenizer()
    analyzer = AlignmentAnalyzer.from_strings(reference=reference, predicted=predicted, tokenizer=tokenizer)

    css = """

    .alignment {
        font-family: monospace;
        text-align: left;
        --kept: #49B6FF;  /* Updated colour */
        --replaced: #CAD49D;  /* Updated colour */
        --inserted: #E6C0E9;  /* Updated colour */
        --neutral: #fff;
        font-size: 24px;  /* Updated font size */
    }

    .alignment-chunk, .alignment-labels {
        display: inline-block;
        min-width: 1em;
    }
    .alignment-chunk.spaced {
        margin-left: 0.5em;
    }

    span.reference, span.predicted {
        white-space: pre;
        display: block;
        text-align: center;
    }
    .kept.reference, .kept.predicted {
        background-color: var(--kept);
    }
    .deleted.reference {
        background-color: var(--inserted);
    }
    .deleted.predicted::after, .inserted.reference::after {
        content: "*";  /* Updated character size */
    }
    .inserted.predicted {
        background-color: var(--inserted);
    }
    .replaced.reference, .replaced.predicted{
        background-color: var(--replaced);
    }
    """
    stringalign.visualize.create_alignment_html(
        alignment=analyzer.raw_alignment,
        reference_label="Gold standard:",
        predicted_label="Model estimate:",
        space_alignment_ops=False,
        stylesheet=css,
    )






.. raw:: html

    <div class="output_subarea output_html rendered_html output_result">
    <style>

    .alignment {
        font-family: monospace;
        text-align: left;
        --kept: #49B6FF;  /* Updated colour */
        --replaced: #CAD49D;  /* Updated colour */
        --inserted: #E6C0E9;  /* Updated colour */
        --neutral: #fff;
        font-size: 24px;  /* Updated font size */
    }

    .alignment-chunk, .alignment-labels {
        display: inline-block;
        min-width: 1em;
    }
    .alignment-chunk.spaced {
        margin-left: 0.5em;
    }

    span.reference, span.predicted {
        white-space: pre;
        display: block;
        text-align: center;
    }
    .kept.reference, .kept.predicted {
        background-color: var(--kept);
    }
    .deleted.reference {
        background-color: var(--inserted);
    }
    .deleted.predicted::after, .inserted.reference::after {
        content: "*";  /* Updated character size */
    }
    .inserted.predicted {
        background-color: var(--inserted);
    }
    .replaced.reference, .replaced.predicted{
        background-color: var(--replaced);
    }
    </style><div class="alignment"><div class="alignment-labels"><span class="reference label">Gold standard:</span><span class="predicted label">Model estimate:</span></div><div class='alignment-chunk'><span class="kept reference">H</span> <span class="kept predicted">H</span></div><div class='alignment-chunk'><span class="kept reference">e</span> <span class="kept predicted">e</span></div><div class='alignment-chunk'><span class="deleted reference">l</span> <span class="deleted predicted"></span></div><div class='alignment-chunk'><span class="kept reference">l</span> <span class="kept predicted">l</span></div><div class='alignment-chunk'><span class="kept reference">o</span> <span class="kept predicted">o</span></div><div class='alignment-chunk'><span class="kept reference"> </span> <span class="kept predicted"> </span></div><div class='alignment-chunk'><span class="kept reference">w</span> <span class="kept predicted">w</span></div><div class='alignment-chunk'><span class="replaced reference">o</span> <span class="replaced predicted">0</span></div><div class='alignment-chunk'><span class="kept reference">r</span> <span class="kept predicted">r</span></div><div class='alignment-chunk'><span class="kept reference">l</span> <span class="kept predicted">l</span></div><div class='alignment-chunk'><span class="kept reference">d</span> <span class="kept predicted">d</span></div><div class='alignment-chunk'><span class="inserted reference"></span> <span class="inserted predicted">!</span></div><div class='alignment-chunk'><span class="kept reference">!</span> <span class="kept predicted">!</span></div></div>
    </div>
    <br />
    <br />

.. GENERATED FROM PYTHON SOURCE LINES 72-73

If you want to use the visualization in an existing application with a separate CSS, you can even remove the styling from the html completely and add your own styling separately.


.. rst-class:: sphx-glr-timing

   **Total running time of the script:** (0 minutes 0.004 seconds)


.. _sphx_glr_download_auto_examples_plot_09_visualize_custom_style.py:

.. only:: html

  .. container:: sphx-glr-footer sphx-glr-footer-example

    .. container:: sphx-glr-download sphx-glr-download-jupyter

      :download:`Download Jupyter notebook: plot_09_visualize_custom_style.ipynb <plot_09_visualize_custom_style.ipynb>`

    .. container:: sphx-glr-download sphx-glr-download-python

      :download:`Download Python source code: plot_09_visualize_custom_style.py <plot_09_visualize_custom_style.py>`

    .. container:: sphx-glr-download sphx-glr-download-zip

      :download:`Download zipped: plot_09_visualize_custom_style.zip <plot_09_visualize_custom_style.zip>`


.. only:: html

 .. rst-class:: sphx-glr-signature

    `Gallery generated by Sphinx-Gallery <https://sphinx-gallery.github.io>`_