# P5 text() and console.log treat multiline strings differently

**URL:** <https://discourse.processing.org/t/p5-text-and-console-log-treat-multiline-strings-differently/45452>\
**Category:** Coding Questions\
**Created:** [December 11, 2024, 2:26pm UTC](https://discourse.processing.org/t/p5-text-and-console-log-treat-multiline-strings-differently/45452 "2024-12-11T14:26:13Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ger](https://avatars.discourse-cdn.com/v4/letter/g/cc9497/32.png) [@ger](https://discourse.processing.org/u/ger)\
**Post date:** [December 11, 2024, 2:26pm UTC](https://discourse.processing.org/t/p5-text-and-console-log-treat-multiline-strings-differently/45452/1 "2024-12-11T14:26:13Z")

</div>

Hello! I am trying to print some ASCII art to my p5 sketch and am having a lot of trouble. When it prints to the console, the padding on the art is correct and it looks good in the console. But when I use the text(art,0,0) to try to print it to the sketch screen, the padding messes up entirely. I’m wondering why that is and how to fix that. Thank you!

> let art= `Here’s some ASCII art:
> 
> ```
> _______
> / \  
> | ___ | 
> | |___| | 
> | | 
> \ ______ / 
> |
> 
> ```
> 
> [========]  
> | | | |  
> / | \ /  
> /_ **|** _|
> 
> And here’s some more text. `;
> 
> function setup() {  
> createCanvas(400, 400);  
> background(220);  
> text(art,20,20);  
> console.log(art);  
> }
> 
> function draw() {
> 
> }

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/d/4df689164c6a2c01e9e8891014e74bc22662d4ed.png)

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [December 11, 2024, 4:15pm UTC](https://discourse.processing.org/t/p5-text-and-console-log-treat-multiline-strings-differently/45452/2 "2024-12-11T16:15:13Z")

</div>

Your editor and the console are probably using a fixed-width font, while `text()` is using a proportional font. Set a fixed-width font for p5 and it should match.

---

<div class="post-metadata">

**Author:** ![ger](https://avatars.discourse-cdn.com/v4/letter/g/cc9497/32.png) [@ger](https://discourse.processing.org/u/ger)\
**Post date:** [December 11, 2024, 5:57pm UTC](https://discourse.processing.org/t/p5-text-and-console-log-treat-multiline-strings-differently/45452/3 "2024-12-11T17:57:45Z")

</div>

> [@scudly](#):
>
> Set a fixed-width font for p5 and it should match.

Thank you so much for this tip! I changed the font using textFont(‘Courier New’); (According to Google, Courier New is a monospaced font) and I still have the same issue. Any other tips?

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [December 11, 2024, 7:48pm UTC](https://discourse.processing.org/t/p5-text-and-console-log-treat-multiline-strings-differently/45452/4 "2024-12-11T19:48:29Z")

</div>

The next problem is that you are using backslashes which act as an escape character. You can get around this by declaring your string as “raw”:

```auto
let art= String.raw`Here’s some ASCII art:

     _______
    / \  
   | ___ | 
   | |___| | 
   | | 
    \ ______ / 
        |
 [=========]
  | | | |
 / | \ /
/ _____|_____ \|

And here’s some more text. `;

```

---

<div class="post-metadata">

**Author:** ![ger](https://avatars.discourse-cdn.com/v4/letter/g/cc9497/32.png) [@ger](https://discourse.processing.org/u/ger)\
**Post date:** [December 11, 2024, 8:55pm UTC](https://discourse.processing.org/t/p5-text-and-console-log-treat-multiline-strings-differently/45452/5 "2024-12-11T20:55:43Z")

</div>

Thank you so much! This now works in an isolated sketch (the one shared above), but when I try to incorporate it into my bigger project, where the ASCII message is stored as a variable and starts and ends with 3x` (```), I am having trouble. Thank you so much for all your help so far!

Edit - printed in the console is the var currResp

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/c/fc2bda53da33a6aea74d8786dc1f8e024182a28b.png)

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [December 11, 2024, 10:50pm UTC](https://discourse.processing.org/t/p5-text-and-console-log-treat-multiline-strings-differently/45452/6 "2024-12-11T22:50:20Z")

</div>

Since I can’t see the rest of your code, I don’t know where it goes wrong. Obviously something is removing leading whitespace characters. Try to keep all the strings as `String.raw` to preserve all of the characters as you typed them.

---

<div class="post-metadata">

**Author:** ![ger](https://avatars.discourse-cdn.com/v4/letter/g/cc9497/32.png) [@ger](https://discourse.processing.org/u/ger)\
**Post date:** [December 11, 2024, 11:09pm UTC](https://discourse.processing.org/t/p5-text-and-console-log-treat-multiline-strings-differently/45452/7 "2024-12-11T23:09:07Z")

</div>

I’m relatively sure that the issue is in the code above, because when I print the art from each stage of the currResp# variable, it all prints correctly in the console. So the whitespace is always there, in some form. How would I get the initial string from an api call, so I can cast it as a String.raw like I do above, but would doing that earlier in the code help me? It seems like it looks right to the console all throughout.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/a/ba0f7966720b090a433a791d5d3173f4a5e690f0.png)

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [December 12, 2024, 12:45am UTC](https://discourse.processing.org/t/p5-text-and-console-log-treat-multiline-strings-differently/45452/8 "2024-12-12T00:45:21Z")

</div>

[https://github.com/processing/p5.js/blob/main/src/core/p5.Renderer.js#L233](https://github.com/processing/p5.js/blob/main/src/core/p5.Renderer.js#L233) has the code for the `text()` function which, potentially, does a lot of manipulation to the text to support word wrapping. I’m not sure if it somehow detects raw text to avoid that or not.

I would suggest starting with the simple example you posted that you know works and then gradually add the addition features you want in your full version, testing as you go, to see what causes the problem. At this point, I have no other ideas.

Edit: my final guess would be that performing string manipulation on a raw text string causes it to lose its “rawness”, reverting to a normal text string which p5 then tries to word-wrap. I leave it to you to search the javascript docs on the web about raw text and how to preserve it.

---

<div class="post-metadata">

**Author:** ![ger](https://avatars.discourse-cdn.com/v4/letter/g/cc9497/32.png) [@ger](https://discourse.processing.org/u/ger)\
**Post date:** [December 12, 2024, 7:29am UTC](https://discourse.processing.org/t/p5-text-and-console-log-treat-multiline-strings-differently/45452/9 "2024-12-12T07:29:49Z")

</div>

Solved:  
It was the bounding box parameters (optional parameters, in bold below) that were messing up the line spacing. The fix was to use a monospaced font + take out those optional bounding box params. The raw string was helpful for the copy and pasting I did from one sketch to another, but it ultimately wasn’t needed when working all within 1 sketch. Thanks for all your help @scudly !

text(currResp, width / 2+20, currHei,**width/2-30, currHei+300)**;

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [December 12, 2024, 2:50pm UTC](https://discourse.processing.org/t/p5-text-and-console-log-treat-multiline-strings-differently/45452/10 "2024-12-12T14:50:41Z")

</div>

Raw text may still needed if you have any back-slashes in your picture as javascript will try to interpret them as special characters. For instance, two in a row will probably get replaced by a single one. Or it might not, but be sure to test it.

Glad you got it working.