#847 fix for case texts with multiple br tags, explanation in usage d…

…oc on how to avoid labels out of bounds.
mermaid-js · Jul 16, 2019 · 8e27318 · 8e27318
1 parent 976d16b
commit 8e27318
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -5,6 +5,12 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Mermaid Quick Test Page</title>
   <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+  <style>
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+  </style>
 </head>
 <body>
   <div class="mermaid">
@@ -127,7 +133,7 @@
     <div class="mermaid">
       graph TD
       A[Christmas] -->|Get money| B(Go shopping)
-      B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss}
+      B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
       C -->|One| D[Laptop]
       C -->|Two| E[iPhone]
       C -->|Three| F[Car]

diff --git a/docs/usage.md b/docs/usage.md
@@ -96,8 +96,14 @@ $(document).ready(function() {
 });
 ```
 
-Not doing so will most likely result in mermaid rendering graphs that have labels out of bounds. The default integration
-in mermaid uses the window.load event to start rendering.
+Not doing so will most likely result in mermaid rendering graphs that have labels out of bounds. The default integration in mermaid uses the window.load event to start rendering. Also note that when rendering the width of lebale sare calucated of what width it bening meassured at the time.
+
+If your page has other fonts in its body those might be used instead of the mermaid font. Specifying the font in your styling is a workaround for this. 
+```
+    div.mermaid {
+        font-family: 'trebuchet ms', verdana, arial;
+    }
+```
 
 ### Calling `mermaid.init`
 

diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
@@ -20,7 +20,7 @@ const sanitize = text => {
   let txt = text
   if (config.securityLevel === 'strict') {
     txt = txt.replace(/<br>/g, '#br#')
-    txt = txt.replace(/<br\S*\/>/g, '#br#')
+    txt = txt.replace(/<br\S*?\/>/g, '#br#')
     txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;')
     txt = txt.replace(/#br#/g, '<br/>')
   }