Skip to content

[BUG]-Help window text wobbly #46

Description

@hizclick

Describe the problem
The Help/text window (.textViewContent) renders "wobbly" in the Edition Example: long lines do not break at the right border of the window, and the indentation/layout shifts when clicking a table-of-contents (TOC) link. The same Help window renders correctly in the Weber Klarinettenquintett edition.

The root cause is that the Edition Example ships no text CSS and its prefs.xml has no additional_css_path entry, so .textViewContent falls back to the frontend's default styling, which lacks side margins, word-wrapping, and width constraints. Editions that provide their own text-style.css (e.g. the Klarinettenquintett) mask this default behavior; editions without one expose it.

To Reproduce
Steps to reproduce the behavior:

  1. Open the Edition Example in Edirom Online.
  2. Open a text document in the Help/text window (e.g. the preface / "Vorwort" or the TEI test file).
  3. Observe that long lines (e.g. long URLs or paragraphs) do not wrap at the right border of the window.
  4. Click a link in the table of contents (TOC).
  5. See the indentation / CSS layout shift.

Expected behavior
Text content in the Help window should wrap at the right border, keep stable indentation, and not change layout when a TOC link is clicked — regardless of whether the edition supplies its own CSS. The frontend's default .textViewContent styling should include sensible side margins, word-wrap: break-word, and a max/percentage width so editions without custom CSS render consistently.

Edirom-Online information

  • Version of Edirom-Online: Release v1.0.0-beta.4 (Emeritus) / branch fix-237-help-window-css-wobbly
  • Comparison: Klarinettenquintett edition registers additional_css_pathresources/css/main.css (which imports text-style.css) and renders correctly; the Edition Example has neither the CSS files nor the additional_css_path entry.

Environment information

  • Browser: reproduced in Chrome and Firefox (macOS)
  • Version of MEI files: 5.0 (Edition Example), 4.0.1 (Klarinettenquintett)
  • Note: bug is independent of MEI version; it stems from missing text CSS in the edition and the frontend's default .textViewContent rules.

Screenshots

  • After opening the Help window: long lines overflow past the right border.
  • After clicking a TOC link: indentation/CSS layout shifts.
    (See attached screenshots in the issue thread.)

Additional context

  • The text-style.css from the Klarinettenquintett that stabilizes the view:
    .textViewContent { margin-right: 3em; margin-left: 3em; }
    dt { word-wrap: break-word; }
    figure.figure, div.figure { width: 80%; }
    dl { display: grid; grid-template-columns: minmax(80px, max-content) auto; }

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions