## Citation Characters

Citation and reference markup for attributing sources.

### Basic Citation

As mentioned in The Elements of Typographic Style by Robert Bringhurst, typography is the craft of endowing human language with a durable visual form.

HTML

    <p>
                As mentioned in
                <cite>The Elements of Typographic Style</cite>
                by Robert Bringhurst, typography is the craft of endowing human
                language with a durable visual form.
            </p>

### Citation with Blockquote

> "Design is not just what it looks like and feels like. Design is how it works."

HTML

    <blockquote
                style="
                    border-left: 4px solid var(--color_fill_primary);
                    padding: 20px 24px;
                    margin: 0;
                    background: var(--color_fill_secondary);
                    border-radius: 0 8px 8px 0;
                "
            >
                <p
                    style="
                        margin: 0 0 12px;
                        font-size: 18px;
                        font-style: italic;
                        line-height: 1.6;
                    "
                >
                    "Design is not just what it looks like and feels like. Design
                    is how it works."
                </p>
                <footer style="font-size: 14px; opacity: 0.8">
                    —
                    <cite>Steve Jobs</cite>
                    , in an interview with The New York Times, 2003
                </footer>
            </blockquote>

### Academic Citation Formats

APA Style

Bringhurst, R. (2004). The elements of typographic style (3rd ed.). Hartley & Marks.

MLA Style

Bringhurst, Robert. The Elements of Typographic Style . 3rd ed., Hartley & Marks, 2004.

Chicago Style

Bringhurst, Robert. The Elements of Typographic Style . 3rd ed. Point Roberts, WA: Hartley & Marks, 2004.

HTML

    <div style="display: flex; flex-direction: column; gap: 20px">
                <!-- APA Style -->
                <div
                    style="
                        padding: 16px;
                        background: var(--color_fill_secondary);
                        border-radius: 8px;
                    "
                >
                    <span
                        style="
                            font-size: 12px;
                            opacity: 0.6;
                            text-transform: uppercase;
                        "
                    >
                        APA Style
                    </span>
                    <p style="margin: 8px 0 0; font-size: 14px">
                        Bringhurst, R. (2004).
                        <cite style="font-style: italic">
                            The elements of typographic style
                        </cite>
                        (3rd ed.). Hartley & Marks.
                    </p>
                </div>
                <!-- MLA Style -->
                <div
                    style="
                        padding: 16px;
                        background: var(--color_fill_secondary);
                        border-radius: 8px;
                    "
                >
                    <span
                        style="
                            font-size: 12px;
                            opacity: 0.6;
                            text-transform: uppercase;
                        "
                    >
                        MLA Style
                    </span>
                    <p style="margin: 8px 0 0; font-size: 14px">
                        Bringhurst, Robert.
                        <cite style="font-style: italic">
                            The Elements of Typographic Style
                        </cite>
                        . 3rd ed., Hartley & Marks, 2004.
                    </p>
                </div>
                <!-- Chicago Style -->
                <div
                    style="
                        padding: 16px;
                        background: var(--color_fill_secondary);
                        border-radius: 8px;
                    "
                >
                    <span
                        style="
                            font-size: 12px;
                            opacity: 0.6;
                            text-transform: uppercase;
                        "
                    >
                        Chicago Style
                    </span>
                    <p style="margin: 8px 0 0; font-size: 14px">
                        Bringhurst, Robert.
                        <cite style="font-style: italic">
                            The Elements of Typographic Style
                        </cite>
                        . 3rd ed. Point Roberts, WA: Hartley & Marks, 2004.
                    </p>
                </div>
            </div>

### Inline Citations

Typography has been described as "the craft of endowing human language with a durable visual form" [1] . This definition emphasizes the relationship between language and visual representation. Recent studies have shown that good typography can improve reading comprehension by up to 20% [2] .

References:

[1] Bringhurst, R. (2004). The Elements of Typographic Style

[2] Smith, J. (2020). Typography and Reading Comprehension Study

HTML

    <p style="line-height: 1.8">
                Typography has been described as "the craft of endowing human
                language with a durable visual form"
                <cite
                    style="
                        font-size: 13px;
                        vertical-align: super;
                        color: var(--color_fill_primary);
                    "
                >
                    [1]
                </cite>
                . This definition emphasizes the relationship between language and
                visual representation. Recent studies have shown that good
                typography can improve reading comprehension by up to 20%
                <cite
                    style="
                        font-size: 13px;
                        vertical-align: super;
                        color: var(--color_fill_primary);
                    "
                >
                    [2]
                </cite>
                .
            </p>
            <div
                style="
                    margin-top: 16px;
                    padding-top: 16px;
                    border-top: 1px solid var(--color_line_secondary);
                    font-size: 13px;
                "
            >
                <p style="margin: 0 0 4px"><strong>References:</strong></p>
                <p style="margin: 0; opacity: 0.8">
                    [1] Bringhurst, R. (2004). The Elements of Typographic Style
                </p>
                <p style="margin: 0; opacity: 0.8">
                    [2] Smith, J. (2020). Typography and Reading Comprehension
                    Study
                </p>
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!