# Is there an easy way to bold individual words while using text()?

**URL:** <https://discourse.processing.org/t/is-there-an-easy-way-to-bold-individual-words-while-using-text/27645>\
**Category:** Coding Questions\
**Created:** [February 7, 2021, 3:50am UTC](https://discourse.processing.org/t/is-there-an-easy-way-to-bold-individual-words-while-using-text/27645 "2021-02-07T03:50:27Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [February 7, 2021, 3:50am UTC](https://discourse.processing.org/t/is-there-an-easy-way-to-bold-individual-words-while-using-text/27645/1 "2021-02-07T03:50:27Z")

</div>

I want to print

> My **name** is Bassam.

on the canvas.

This is the code I had to write:

```auto
function setup() {
  const x = 50,
    y = 100;
  let xpos;
  createCanvas(400, 400);
  background("white");
  textSize(28);

  text("My", x, y);
  xpos = textWidth("My");
  textStyle(BOLD);
  text(" name", x + xpos, y);
  xpos = xpos + textWidth(" name");
  textStyle(NORMAL);
  text(" is Bassam.", x + xpos, y);
}

```

[Link](https://editor.p5js.org/Bassam/sketches/MP6HpdJJ_)

Is there an easier way to do this?

Thanks!

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [February 7, 2021, 2:55pm UTC](https://discourse.processing.org/t/is-there-an-easy-way-to-bold-individual-words-while-using-text/27645/2 "2021-02-07T14:55:43Z")

</div>

interested …

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [February 7, 2021, 4:24pm UTC](https://discourse.processing.org/t/is-there-an-easy-way-to-bold-individual-words-while-using-text/27645/3 "2021-02-07T16:24:45Z")

</div>

this in java mode

```auto
String t_str;

void setup() {
  fullScreen();
 
  textAlign(CENTER);
  textSize(70);
  t_str = "add your text";
  textSize(12); // To create a "text width factor",
  float twf = width/textWidth(t_str);
  int f = 4; // Empericaly found 
  textSize(f*twf); // Making it proportional for other screen resolutions
text(t_str, width/2, height/2);
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 7, 2021, 5:40pm UTC](https://discourse.processing.org/t/is-there-an-easy-way-to-bold-individual-words-while-using-text/27645/4 "2021-02-07T17:40:49Z")

</div>

> [@Wrap the text and Change the specific word colour in a text file](https://discourse.processing.org/t/wrap-the-text-and-change-the-specific-word-colour-in-a-text-file/14814/3):
>
> Because of the way text works in Processing, formatting individual words is hard in the general case. Here is an example of formatting words in a text box: SentenceColoredText. It uses a “bricklaying method” to fill the space with text units. [https://forum.processing.org/two/discussion/comment/87679/#Comment\_87679](https://forum.processing.org/two/discussion/comment/87679/#Comment_87679) Also, a small markup language for text formatting from @Chrisir : [https://forum.processing.org/two/discussion/comment/120813/#Comment\_120813](https://forum.processing.org/two/discussion/comment/120813/#Comment_120813)

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [February 7, 2021, 6:00pm UTC](https://discourse.processing.org/t/is-there-an-easy-way-to-bold-individual-words-while-using-text/27645/5 "2021-02-07T18:00:32Z")

</div>

Hi,

Interesting question! 😉

Ideally the most flexible way to do this is to use HTML and CSS to style your text since it’s more powerful and it was made for that.

Now if you want to do this in p5js using only the `text()` and `textStyle(BOLD)` functions, you can get inspiration from the [Markdown syntax](https://www.markdownguide.org/basic-syntax#bold) :

`I just love **bold text**.` → I just love **bold text**.

So using two asterisks between some portion of text indicate that we want this to be bold.

What if we could have a function to do that automatically for us?

This is my take on this :

```auto
function splitByBold(text) {
  const result = [];
	
  let previousIndex = 0;
  
  // Indicate wether we are currently in a bold text
  let isCurrentBold = false;
	
  // Go through every character
  for (let i = 0; i < text.length; i++) {
    // True if there's two asterisks from the current index
    const isTwoAsterisks = (text[i] == '*') && (i < text.length - 1) && (text[i + 1] == '*');
    
    // True if we are at the end (useful to get the last letter)
    const isLastIndex = i == text.length - 1;

    // We detected two asterisks
    if (isTwoAsterisks || isLastIndex) {
      
      // The last index to take
      const lastIndex = isLastIndex ? i + 1 : i;
			
      // Add that piece of text
      result.push({
        text: text.slice(previousIndex, lastIndex),
        bold: isCurrentBold
      });
			
      // The previous index becomes the new one, add 2 if two asterisks
      previousIndex = isTwoAsterisks ? i + 2 : i;
      
      // Invert the current state
      isCurrentBold = !isCurrentBold;
    }
  }

  return result;
}

```

Here are the results :

```javascript
console.log(splitByBold("My **name** is Bassam."));

// 0: Object { text: "My ", bold: false }
// 1: Object { text: "name", bold: true }
// 2: Object { text: " is Bassam.", bold: false }
// length: 3

console.log(splitByBold("This is **bold even** inside **yeah!**."));

// 0: Object { text: "This is ", bold: false }
// 1: Object { text: "bold even ", bold: true }
// 2: Object { text: "inside", bold: false }
// 3: Object { text: " yeah!", bold: true }
// 4: Object { text: ".", bold: false }
// length: 5

```

Now you can take the result of this function to make the drawing part, it shouldn’t be too hard 🙂

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [February 7, 2021, 11:59pm UTC](https://discourse.processing.org/t/is-there-an-easy-way-to-bold-individual-words-while-using-text/27645/6 "2021-02-07T23:59:56Z")

</div>

I was curious about this too. Expanding on @josephh 's css idea I made a paragraph overlay on the canvas

[https://editor.p5js.org/micuat/sketches/JqrmYejJm](https://editor.p5js.org/micuat/sketches/JqrmYejJm)

upside is basically you can do everything you want with html/css but downside is you cannot edit pixels of the text or overlay contents on the text (unless you make another transparent canvas on top of the paragraph)

---

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [February 8, 2021, 2:26am UTC](https://discourse.processing.org/t/is-there-an-easy-way-to-bold-individual-words-while-using-text/27645/7 "2021-02-08T02:26:51Z")

</div>

Very useful all. Thanks.

My use case is quite unique and I think I need to bold only 1 word on a page so I think doing it the hard way might be the best option for me.

---

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [February 8, 2021, 2:58am UTC](https://discourse.processing.org/t/is-there-an-easy-way-to-bold-individual-words-while-using-text/27645/8 "2021-02-08T02:58:41Z")

</div>

> [@Bassam](#):
>

And you speak the truth @micuat 🙂