Description
Currently, when a metadata field accepts multiple values (e.g., "Related Dataset" or "Data Source"), the Dataverse frontend renders them inline, separated by a semicolon and a space (;). For fields containing long textual references, links, or complex citations, this inline rendering makes the metadata block difficult to read and visually cluttered.
If users try to bypass this by injecting block-level HTML tags like
in the metadata text to force line breaks, the hardcoded semicolon gets stranded on its own line, creating awkward vertical gaps in the UI.
Solution
Instead of concatenating multiple values with a hardcoded ;, the frontend representation (JSF/XHTML view) should iterate over the values and render them as an HTML unordered list using Bootstrap's .list-unstyled class (or similar CSS).
This would wrap each value in an
, providing clean, natural line breaks and proper block spacing without exposing raw punctuation marks between blocks.
Alternatives
An alternative would be replacing the semicolon with a
tag during the UI rendering loop, but semantically, an unordered list is the most accessible and standard HTML approach for a collection of multiple distinct items.
Additional context
Please see the attached screenshot illustrating the UI issue. I would be happy to contribute and submit a Pull Request for this UI adjustment if the maintainers agree this is a valid enhancement.
Description
Currently, when a metadata field accepts multiple values (e.g., "Related Dataset" or "Data Source"), the Dataverse frontend renders them inline, separated by a semicolon and a space (;). For fields containing long textual references, links, or complex citations, this inline rendering makes the metadata block difficult to read and visually cluttered.
If users try to bypass this by injecting block-level HTML tags like
in the metadata text to force line breaks, the hardcoded semicolon gets stranded on its own line, creating awkward vertical gaps in the UI.
Solution
Instead of concatenating multiple values with a hardcoded ;, the frontend representation (JSF/XHTML view) should iterate over the values and render them as an HTML unordered list using Bootstrap's .list-unstyled class (or similar CSS).
This would wrap each value in an
Alternatives
An alternative would be replacing the semicolon with a
tag during the UI rendering loop, but semantically, an unordered list is the most accessible and standard HTML approach for a collection of multiple distinct items.
Additional context
Please see the attached screenshot illustrating the UI issue. I would be happy to contribute and submit a Pull Request for this UI adjustment if the maintainers agree this is a valid enhancement.