Sequence Diagrams with messageAlign smash text with <br>
#3011
Comments
kevinawoo
added
Status: Triage
… messages and notes Previously, messages and notes that had multiple lines (via `<br>`-tags) were only displayed correctly when using the default `center` value for the `messageAlign` and `noteAlign` configuration options. Using `left` or `right` for the alignment options caused the text to collapse and become illegible, as outlined in issue mermaid-js#3011. This comes as a side-effect from how the internal `valign` text-rendering option was configured for messages and notes: ```js // Example from `sequenceRenderer.js: drawMessage()` textObj.anchor = conf.messageAlign; textObj.valign = conf.messageAlign; ``` Both the `anchor` option (which controls left-right alignment) and the `valign` option (which controls vertical top-down placement) were set to the same value, the user-provided `messageAlign` config option. While `left` and `right` are valid values for the `anchor` option, they were effectively no-ops for the `valign` option, which only supports `top`, `start`, `middle`, `center`, `bottom`, and `end`. To fix the issue, the `valign` property is now always set to `center` for notes and messages. Similarly, the `dominantBaseline` option of texts is now always set to `middle`, rather than setting it to either `text-{before,after}-edge`, which caused left-aligned multi-line text to always be "top-left" aligned inside a note (or "bottom-right" when attempting to right-align). Now, texts in messages and notes are always vertically centered and alignment options correctly apply for both single and multi-line content.
where is that documented, even google does not find it. that happens in my case |
|
@PackElend I found it from https://github.com/mermaid-js/mermaid/blob/37eb0454fd2698b5bf6083bc6c75b179761a2b7a/src/docs/Setup.md#messagealign as well as going through the source Line 274 in f63acea |
I asked to update the docs: #3500 by the way, what does your alignment looks like? |
|
You're right, it does look a little weird. Seems like Maybe we should open a new issue to maybe introduce |
|
If you could do it today, it would be great otherwise I'll do it tomorrow
(late)
Le mer. 21 sept. 2022 à 19:20, Kevin Woo ***@***.***> a
écrit :
… You're right, it does look a little weird.
Seems like messageAlign moved the message left, center, or right of the
connection line.
Maybe we should open a new issue to maybe introduce messageAlign:
centerLeft?
—
Reply to this email directly, view it on GitHub
<#3011 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AA3AYDZGLJBGXBRRL4L5C6DV7M7XPANCNFSM5VJD3AJA>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
|
eventually it is done #3594 |
Describe the bug
When create a sequence diagram with
messageAlign: leftconfig and the text contains<br>line breaks, all the lines gets smashed into the first line.To Reproduce
Steps to reproduce the behavior:
{ "sequence": { "messageAlign": "left"} }<br>in the messageExpected behavior
The diagram to have left aligned text with line breaks, as in #1315
Screenshots
You can see in the screenshot everything is smashed into the first line.
Code Sample
Live Editor example
Github Render:
%%{init: { 'sequence': {'messageAlign': 'left'} }}%% sequenceDiagram User->>Browser: Click hello Browser->>Server: Get /hello HTTP/1.1 <br> Host: example.com <br> Accept: text/html Server->>Browser: HTTP/1.1/ 200 OK <br> Content-Type: text/html <br> Content-Length: 42Desktop (please complete the following information):
The text was updated successfully, but these errors were encountered: