Text-Box

Description#

<text-box></text-box>

The text-box component is responsible for displaying character dialogs, narrator text, and NVL (Novel) mode content. It contains the character name, side image (expression), and the dialog text itself.

Source Code: https://github.com/Monogatari/Monogatari/tree/develop/src/components/text-box

Structure#

The text-box component renders the following structure:

<text-box data-component="text-box">
    <div data-content="name">
        <span data-ui="who" data-content="character-name"></span>
    </div>
    <div data-content="side-image">
        <img data-ui="face" alt="" data-content="character-expression">
    </div>
    <div data-content="text">
        <type-writer data-ui="say" data-content="dialog"></type-writer>
    </div>
</text-box>

In NVL mode, the <type-writer> element is not included in the initial render, as dialogs are appended dynamically.

Properties#

Data Attributes#

Methods#

show(): void#

Shows the text-box element using CSS grid display.

const textBox = document.querySelector('text-box');
textBox.show();

checkUnread(): void#

Checks if there is content in the text box that the player hasn’t scrolled to see. If there is unread content (overflow), adds the unread CSS class to the text-box.

This is automatically called by the Dialog action after writing NVL dialogs.

const textBox = document.querySelector('text-box');
textBox.checkUnread();

setProps(props: object): void#

Update component properties. Used to switch between modes:

const textBox = document.querySelector('text-box');
textBox.setProps({ mode: 'nvl' });

content(name: string): DOM#

Access named content areas within the component:

const textBox = document.querySelector('text-box');
const dialogArea = textBox.content('dialog');
const nameArea = textBox.content('name');

CSS Classes#

Content Areas#

Display Modes#

ADV Mode (Adventure)#

The default mode. Displays one dialog at a time with character name, optional side image, and text. When a new dialog is shown, the previous one is replaced.

NVL Mode (Novel)#

Displays multiple dialogs on screen simultaneously, scrolling as new dialogs are added. Each dialog entry includes the speaker’s name (if not narrator) and the dialog text.

In NVL mode:

• Side images are not displayed
• Dialogs are appended rather than replaced
• The text area is scrollable
• The unread class indicates when new content is below the visible area

Styling#

The text-box component can be styled using CSS. Key selectors:

/* Main text-box container */
text-box {
    /* Your styles */
}

/* ADV mode specific */
text-box[data-speaking] {
    /* Styles when a character is speaking */
}

/* NVL mode specific */
text-box[mode="nvl"] {
    /* NVL mode styles */
}

/* Character name */
text-box [data-ui="who"] {
    /* Character name styles */
}

/* Side image */
text-box [data-ui="face"] {
    /* Expression/side image styles */
}

/* Dialog text area */
text-box [data-content="text"] {
    /* Text container styles */
}

/* Unread indicator */
text-box.unread {
    /* Show scroll indicator */
}
text-box.unread::after {
    content: '▼';
    /* Position indicator */
}

Related#

• Dialog Action - The action that controls text-box content
• Type Writer - The component that handles text animation
• Centered Dialog - Alternative display for centered text