Peter
Peter

Reputation: 1919

Multi-lines string in Dart

I'm still working on Dart. I just want to output my string defined in .dart to my html. I look into the documentation on https://sites.google.com/site/dartlangexamples/learn/variables/strings

I understand that I need to use the """.

When I print my query, I got the good result, but when I output it in html, They are side to side.

There it is:

.dart :

    var symbole = """
      *          
      *** 
    *****  
  ******* 
*********""";
  var element03 = query('#exercice03');
  element03.innerHTML = symbole;
  print(symbole); 
}

The Print give me exactly what I set into my var symbole BUT, in my HTML i got this:


My html is :

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>HelloWorld</title>
    <link rel="stylesheet" href="HelloWorld.css">
  </head>
  <body>
    <div id="container">
      
      <p class="question">Exercice : Pritn the * : <span id="exercice03"></span></p>
    </div>
  
    <script type="application/dart" src="web/HelloWorld.dart"></script>
    <script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
  </body>
</html>

I don't understand why in my output html I dont get the same result as my Print in my dart editor, can some one help me to figure this out?

Upvotes: 42

Views: 41369

Answers (2)

Kai Sellgren
Kai Sellgren

Reputation: 30212

I'm not sure if I follow you here -- do you want this?

    var symbole = """
      *<br />
      ***<br />
    *****<br />
  *******<br />
*********<br />""";
var element03 = query('#exercice03');
element03.innerHTML = symbole;

I just added the break lines

So as Matt B said, the output of print() is differently formatted than HTML on the browser.

Upvotes: 50

Matt B
Matt B

Reputation: 6312

This is because HTML is not whitespace sensitive. That is, a new line in html does not display when parsed. You need to use a line break <br> or you need to wrap it in a preformated <pre> tag

Upvotes: 4

Related Questions