# Display and scale text size from .csv file

**URL:** <https://discourse.processing.org/t/display-and-scale-text-size-from-csv-file/11633>\
**Category:** Coding Questions\
**Created:** [May 27, 2019, 4:37pm UTC](https://discourse.processing.org/t/display-and-scale-text-size-from-csv-file/11633 "2019-05-27T16:37:15Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Darius](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@Darius](https://discourse.processing.org/u/Darius)\
**Post date:** [May 27, 2019, 4:37pm UTC](https://discourse.processing.org/t/display-and-scale-text-size-from-csv-file/11633/1 "2019-05-27T16:37:15Z")

</div>

Hi there, I am stuck again…

I am building a small program using a .csv file to display the text information of each row. The program display one row/line of text for each mouse click…so far so good. I then tried to adapt the type size of each line of text based on the relationship between the number of words of each line of text and the area of the rectangle where the sentence is drawn.

This seems not working as the only sentence I visualize is the name of the csv file, “test1.csv”.  
I think that the problem is on this line: sentence = filename.split(" ");

Any suggestion?? Thanks!

```auto
String filename= "test1.csv";
String [] sentence;
PFont f;
int n;
float currentSize = 5;
float bestSize = 5;
float sizeIncrement = 0.5;

void setup() {
  size(600, 600);
  pixelDensity(displayDensity());
  colorMode(RGB);
  f = createFont("Helvetica", 40);
  sentence=loadStrings(filename);
}

void draw() {
  
  background(#1D1D1B);
  String i = sentence[n];
  
  sentence = filename.split(" ");
  
    boolean searching = true;  
    while(searching){
    if(testFontSize(currentSize)){
    bestSize = currentSize;
    currentSize += sizeIncrement;
    }else{
      searching = false;
    }
  } 
  
  textFont(f);
  textSize(bestSize);
  textAlign(CENTER);
  rectMode(CENTER);
  text(i, width/2, height/2,width/2, height/2);
  noFill();
  //rect(width/2, height/2,width/2, height/2);
  
}
boolean testFontSize(float s) {
  textSize(s);
  // calculate max lines
  int currentLine = 1;
  int maxLines = floor( height/2 / g.textLeading);
  boolean fitHeight = true;
  int nextWord = 0;
 
  while (fitHeight) {
    if (currentLine > maxLines) {
      fitHeight = false;
    } else {
      String temp = sentence[nextWord];
      // check if single word is already too wide
      if (textWidth(temp)>width/2)
        return false;
 
      boolean fitWidth = true;
      // add words until string is too wide  
      while (fitWidth) {
 
        if (textWidth(temp) > width/2) {
          currentLine++;
          fitWidth = false;
        } else {
          if (nextWord < sentence.length -1) {
            nextWord++;
            temp += " "+sentence[nextWord];
          } else
            return true;
        }
      }
    }
  }
 
  return false;
} 

void mousePressed() {
   n = (n+1) % sentence.length;
   redraw();
}

```

---

<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:** [May 27, 2019, 5:11pm UTC](https://discourse.processing.org/t/display-and-scale-text-size-from-csv-file/11633/2 "2019-05-27T17:11:12Z")

</div>

the idea is:

- `sentence=loadStrings(filename);` --\> sentence is now an array with multiple lines from the csv
- in a for-loop you analyze each line of sentence OR you use the loop of draw() itself as you do: `sentence[n]`
- Then you have this line: `String i = sentence[n];` --\> `i` IS YOUR current line !!!
- This is wrong: `sentence = filename.split(" ");` --\> you want `String[] oneLineSplitted = i.split(" ");` instead
- `oneLineSplitted[0]` is the first column in the nth row, `oneLineSplitted[1]` is the 2nd column in the nth row…

**Remark**

have you looked into the csv with notepad?

I guess it’s separated by commas

so:

`oneLineSplitted = i.split(",");`

**Remark**

since it’s an csv look into loadTable instead of loadStrings

Chrisir

---

<div class="post-metadata">

**Author:** ![Darius](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@Darius](https://discourse.processing.org/u/Darius)\
**Post date:** [May 27, 2019, 5:19pm UTC](https://discourse.processing.org/t/display-and-scale-text-size-from-csv-file/11633/3 "2019-05-27T17:19:59Z")

</div>

Hi Chrisir,

thanks a lot for the reply. I am a bit confuse about the oneLineSplitted, as the program then says that the local value is not use?

---

<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:** [May 27, 2019, 5:25pm UTC](https://discourse.processing.org/t/display-and-scale-text-size-from-csv-file/11633/4 "2019-05-27T17:25:04Z")

</div>

this is just a message, not an error

you just have to use the array

---

<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:** [May 27, 2019, 5:29pm UTC](https://discourse.processing.org/t/display-and-scale-text-size-from-csv-file/11633/5 "2019-05-27T17:29:25Z")

</div>

there is another version of `split()` also:

[https://www.processing.org/reference/split\_.html](https://www.processing.org/reference/split_.html)

---

<div class="post-metadata">

**Author:** ![Darius](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@Darius](https://discourse.processing.org/u/Darius)\
**Post date:** [May 27, 2019, 5:33pm UTC](https://discourse.processing.org/t/display-and-scale-text-size-from-csv-file/11633/6 "2019-05-27T17:33:17Z")

</div>

The program works but than then the type size does not change dimension based on the length of the sentence.

---

<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:** [May 27, 2019, 6:26pm UTC](https://discourse.processing.org/t/display-and-scale-text-size-from-csv-file/11633/7 "2019-05-27T18:26:21Z")

</div>

post your entire code please

**How to post code**

Point 1: hit ctrl-t prior to copy/paste in processing : auto format of indents

Point 2: after paste select the entire code section with the mouse and click the `</>` sign in the small command bar

---

<div class="post-metadata">

**Author:** ![Darius](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@Darius](https://discourse.processing.org/u/Darius)\
**Post date:** [May 27, 2019, 6:36pm UTC](https://discourse.processing.org/t/display-and-scale-text-size-from-csv-file/11633/8 "2019-05-27T18:36:52Z")

</div>

````auto
String filename= "test1.csv";
String [] sentence;
PFont f;
int n;
float currentSize = 5;
float bestSize = 5;
float sizeIncrement = 0.5;

void setup() {
  size(600, 600);
  pixelDensity(displayDensity());
  colorMode(RGB);
  f = createFont("Helvetica", 40);
  sentence=loadStrings(filename);
}

void draw() {
  
  background(#1D1D1B);
  String i = sentence[n];
  
  sentence = filename.split(" ");
  
    boolean searching = true;  
    while(searching){
    if(testFontSize(currentSize)){
    bestSize = currentSize;
    currentSize += sizeIncrement;
    }else{
      searching = false;
    }
  } 
  
  textFont(f);
  textSize(bestSize);
  textAlign(CENTER);
  rectMode(CENTER);
  text(i, width/2, height/2,width/2, height/2);
  noFill();
  //rect(width/2, height/2,width/2, height/2);
  
}
boolean testFontSize(float s) {
  textSize(s);
  // calculate max lines
  int currentLine = 1;
  int maxLines = floor( height/2 / g.textLeading);
  boolean fitHeight = true;
  int nextWord = 0;
 
  while (fitHeight) {
    if (currentLine > maxLines) {
      fitHeight = false;
    } else {
      String temp = sentence[nextWord];
      // check if single word is already too wide
      if (textWidth(temp)>width/2)
        return false;
 
      boolean fitWidth = true;
      // add words until string is too wide  
      while (fitWidth) {
 
        if (textWidth(temp) > width/2) {
          currentLine++;
          fitWidth = false;
        } else {
          if (nextWord < sentence.length -1) {
            nextWord++;
            temp += " "+sentence[nextWord];
          } else
            return true;
        }
      }
    }
  }
 
  return false;
} 

void mousePressed() {
   n = (n+1) % sentence.length;
   redraw();
}```
````

---

<div class="post-metadata">

**Author:** ![Darius](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@Darius](https://discourse.processing.org/u/Darius)\
**Post date:** [May 27, 2019, 6:39pm UTC](https://discourse.processing.org/t/display-and-scale-text-size-from-csv-file/11633/9 "2019-05-27T18:39:00Z")

</div>

Thanks Chrisir for looking into this!

---

<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:** [May 27, 2019, 6:49pm UTC](https://discourse.processing.org/t/display-and-scale-text-size-from-csv-file/11633/10 "2019-05-27T18:49:17Z")

</div>

**Remark**

are you serious?

you still have that:

sentence = filename.split(" ");

**Remark**

I guess you should repeat this a start of draw() currentSize = 5;

**Remark**

I am not sure what you want to achieve but in  
testFontSize() you are adding lines, not words within one line.

Do you want this?

---

<div class="post-metadata">

**Author:** ![Darius](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@Darius](https://discourse.processing.org/u/Darius)\
**Post date:** [May 27, 2019, 7:08pm UTC](https://discourse.processing.org/t/display-and-scale-text-size-from-csv-file/11633/11 "2019-05-27T19:08:12Z")

</div>

Yes, testFontSize() I think is fine, what I am trying to achieve is that each time I draw a sentence (or more) the rectangle is filled with the sentence(s) at the maximum point size possible without losing any word.

---

<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:** [May 27, 2019, 7:10pm UTC](https://discourse.processing.org/t/display-and-scale-text-size-from-csv-file/11633/12 "2019-05-27T19:10:21Z")

</div>

in testFontSize() you are adding / checking lines, not words within one line.

Do you want this?

Just find out what the error is

---

<div class="post-metadata">

**Author:** ![Darius](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@Darius](https://discourse.processing.org/u/Darius)\
**Post date:** [May 27, 2019, 7:32pm UTC](https://discourse.processing.org/t/display-and-scale-text-size-from-csv-file/11633/13 "2019-05-27T19:32:29Z")

</div>

I am sharing the source of the initial code, as I would like to have the same result but using sentences coming from a .csv, where everytime you click on the canvas the senses change from row to row adapting the size to the rectangle area.

````auto
String str ="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.";
int x = 20;
int y = 20;
int w = 250;
int h = 290;
 
String[] words;
float currentSize = 5;
float bestSize = 5;
float sizeIncrement = 0.5;
 
void setup() {
  size(400, 400);  
 
  words = str.split(" ");
 
  boolean searching = true;  
  while(searching){
    if(testFontSize(currentSize)){
      bestSize = currentSize;
      currentSize += sizeIncrement;
    }else{
      searching = false;
    }
  }
  println("Best size: "+ bestSize);
 
  textSize(bestSize);
  fill(0);
  text(str, x, y, w, h);
  noFill();
  rect(x, y, w, h);
}
 
boolean testFontSize(float s) {
  textSize(s);
  // calculate max lines
  int currentLine = 1;
  int maxLines = floor( h / g.textLeading);
  boolean fitHeight = true;
  int nextWord = 0;
 
  while (fitHeight) {
    if (currentLine > maxLines) {
      fitHeight = false;
    } else {
      String temp = words[nextWord];
      // check if single word is already too wide
      if (textWidth(temp)>w)
        return false;
 
      boolean fitWidth = true;
      // add words until string is too wide  
      while (fitWidth) {
 
        if (textWidth(temp) > w) {
          currentLine++;
          fitWidth = false;
        } else {
          if (nextWord < words.length -1) {
            nextWord++;
            temp += " "+words[nextWord];
          } else
            return true;
        }
      }
    }
  }
 
  return false;
} ```
````

---

<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:** [May 27, 2019, 7:47pm UTC](https://discourse.processing.org/t/display-and-scale-text-size-from-csv-file/11633/14 "2019-05-27T19:47:29Z")

</div>

it’s as I said. I just made a running version:

In the function you are checking the array sentence. False.

But in fact you want to check words with words being `words = split(sentence, " ");`  
or `words = sentence[n].split(" ");`

---

<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:** [May 27, 2019, 7:49pm UTC](https://discourse.processing.org/t/display-and-scale-text-size-from-csv-file/11633/15 "2019-05-27T19:49:36Z")

</div>

also as I said repeat

```auto
  currentSize = 5;
  bestSize = 5;
  sizeIncrement = 0.5;

```

at start of draw()

---

<div class="post-metadata">

**Author:** ![Darius](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@Darius](https://discourse.processing.org/u/Darius)\
**Post date:** [May 27, 2019, 9:04pm UTC](https://discourse.processing.org/t/display-and-scale-text-size-from-csv-file/11633/16 "2019-05-27T21:04:27Z")

</div>

Thanks a lot, will check all the code again tomorrow and see if I understood properly all the changes.  
👌

---

<div class="post-metadata">

**Author:** ![Darius](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@Darius](https://discourse.processing.org/u/Darius)\
**Post date:** [May 27, 2019, 9:27pm UTC](https://discourse.processing.org/t/display-and-scale-text-size-from-csv-file/11633/17 "2019-05-27T21:27:42Z")

</div>

> [@Darius](#):
>
> " "+words[nextWord];

it does work! thanks again