Whitespace and Tab Size Practice


by Jeremy Caudle
notes

While I have been doing these daily code practices, I've been disappointed with how the code displays in the HTML, CSS, and JS sections. I wanted to investigate some ways that I can clean it up and make it more readable. Unfortunately I got a bit distracted with a few other properties.

This text does not have any particular formatting.
This	text	uses	tabs	instead	of	spaces.
This	text	uses	tabs	instead	of	spaces	and	has	a	custom	tab-size.
This text does not have any particular formatting, but I want to manipulate the word spacing.

View the code:

HTML and JS 
<div class="codedoodle-block">
        <pre>This text does not have any particular formatting.</pre>
        <pre>This	text	uses	tabs	instead	of	spaces.</pre>
        <pre class="tab-size">This	text	uses	tabs	instead	of	spaces	and	has	a	custom	tab-size.</pre>
        <pre class="word-spacing">This text does not have any particular formatting, but I want to manipulate the word spacing.</pre>
    </div>
CSS 
/* Variables */

        :root {
            --bodybg: black;
            --main: #444444;
            --secondary: #33228f;
        }

        /* Code Block styles  143px by 198px */

        body {
            tab-size: 1em;
						-moz-tab-size: 1em;
        }

        div.codedoodle-block {
            background-color: transparent;
            margin: 3rem auto;
            padding: 1rem;
            width: 429px;
            height: 594px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            border-radius: .5rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
        }

        .tab-size {
            white-space: pre-wrap;
            -moz-tab-size: 0;
            tab-size: 0;
        }

        @keyframes wordup {
            from{
                word-spacing: auto;
            }
            to{
                word-spacing: 3em;
            }
        }

        .word-spacing {
            white-space: normal;
            animation: wordup 3s ease-in-out 1s infinite alternate;
        }

Tags