-
-
Notifications
You must be signed in to change notification settings - Fork 6.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Sequence Diagrams with messageAlign smash text with <br>
#3011
Comments
… 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. |
@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: left
config 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:
Desktop (please complete the following information):
The text was updated successfully, but these errors were encountered: