Best method to align text in a textarea?

Hi I'm adding a cool copy to clipboard feature (first picture) to my web site and I'm having problems aligning the copied text. The second picture shows what I get. I'm putting spaces in the code but I know that will never work since the values will be changing. I think I need to use tables but I wanted to ask if they will work in a textarea before I spend 10 hours trying different things.

If It does work, can someone show me how to insert them into the textarea?

I would like the copied text to look like picture 3. I have tried to insert my code into this post using blockquote but it does not seem to be working in preview - in case it is not 4th picture is the code as I have it now....




Well it is going to be fun, but here is the basics of the format of a table, if this is going to work in a textarea or not i really have no clue so just give it a try and if not go back.

      <td>Content of first cell here</td>

So using that in your situation considering how you need to do things I would imagine it looking something like

<textarea id="myInput" dmx-bind:value="'<table><tbody><tr><td>Flour</td><td align=&quot;right&quot;>100%</td></tr><tr><td>Water</td><td>' + form1.hydration.value + '%</td></tr><tr><td>Yeast - ' + form1.yeasttype.value + '</td><td>' + form1.yeast.value + '%</td></tr><tr><td>Salt</td><td>' + form1.salt.value + '%</td></tr><tr><td>Oil</td><td>' + form1.oil.value + '%</td></tr><tr><td>Sugar</td><td>' + form1.sugar.value + '%</td></tr><tr><td>Item 1 - ' + form1.item1name.value + '</td><td>' + form1.item1.value + '%</td></tr><tr><td>Item 2 - ' + form1.item2name.value + '</td><td>' + form1.item2.value + '%</td></tr><tr><td>Item3 - ' + form1.item3name.value + '</td><td>' + form1.item3.value + '%</td></tr><tr><td colspan=&quot;2&quot;>&nbsp;</td></tr><tr><td>Pizza Size</td><td>' + form1.pizzasize.value + ' Inches</td></tr><tr><td>TF Value</td><td>' + + '</td></tr><tr><td>Date Mixed</td><td>' + form1.datemixed.value + '</td></tr><tr><td>Date Baked</td><td>' + form1.datebaked.value + '</td></tr><tr><td colspan=&quot;2&quot;>&nbsp;</td></tr><tr><td colspan=&quot;2&quot;>Notes:</td></tr><tr><td colspan=&quot;2&quot;>&nbsp;</td></tr><tr><td colspan=&quot;2&quot;>' + form1.notes.value + '</td></tr></tbody></table>'" rows="1" cols="2" style="position:absolute; top:0; left:-500px;"></textarea>

The only strange concepts you might find in the code are colspan which just means take X columns of space, rowspan means take X rows of space, &nbsp; is just a non breaking space to force the full space to be used, &quot; which just means double quotation marks (I need this every now and again because i need to use double quotes but do not want to break out of the double quotes the entire string of code is already in), align which i think i only need one cell set to right and it should do that entire column.

Anyway good luck, hope it works.

Yes, I looked it up before I posted and tried it but things went bad - the problem is I don't know if I just added in a typo that made it get messed up or if it just does not work in a textarea. So hard to do it in the code and I spent about 3 hrs today trying to figure out why nothing was working and it was the textedit Mac app changing quotes to curly quotes. Does everyone work in something like text wrangler or is there something better?

I tried what you provided but nothing goes to the clipboard. I commented out the stuff I typed in and pasted your example. BTW, how do you get the code to appear in the blockquote (in your post) - I tried and all I got was a blank box (and I tried it about 5 different ways.....)

Maybe to start just try a smaller part incase there are typos and lets see if that works, so just try the simplest piece and let me know please

<textarea id="myInput" dmx-bind:value="'<table><tbody><tr><td>Field 1</td><td>Field 2</td></tr></tbody></table>'" rows="1" cols="2" style="position:absolute; top:0; left:-500px;"></textarea>

Looks like everything in the double quotes is being treated as just plain text :frowning:

hmm, ok so it is not parsing the html, can you please try this then

<textarea id="myInput" dmx-html="'<table><tbody><tr><td>Field 1</td><td>Field 2</td></tr></tbody></table>'" rows="1" cols="2" style="position:absolute; top:0; left:-500px;"></textarea>

You just need to add ``` of those marks on a line by themselve then your code and then another 3 of those marks as another new line at the end

On a mac this is the key next to the left shift key

<textarea id="myInput" dmx-bind:value="'[table][tbody][tr][td]Field 1[/td][td]Field 2[/td][/tr][/tbody][/table]'" rows="1" cols="2" style="position:absolute; top:0; left:-500px;"></textarea>

Or maybe this please.

Tried them both, first one resulted in zero on the clip board second one did this…

That key looks to be the one under my “esc” key - but my keyboard is like 10 years old…


Just another country keyboard layout, it is often between the TAB and ESC key.

looks like i will have to test this more and come back to you on it, I assume the dmx-html should work as it is parsing the html i would think but I am not sure what your code looks like to get the value from the textfield, can you please show me that.

Also could you add back the dmx-html example and diect me to the page it is on so i can see what property or attribute you are going to need to get out of it.

There are two other parts

                        <button onclick="myFunction()" style="border-radius: 6px; font-weight: bold; text-align: center;">Copy to clipboard</button>

and this

function myFunction() {
  var copyText = document.getElementById("myInput");;
  alert("Copied To Clipboard: " + '\n' + copyText.value);

I’m doing everything local so as not to break my live pages but I can push up a new calculation page and give you the link to it (if that is what you mean). Not a problem since it will not be linkable from the live site but the copy I point you to will jump to the live site (which will not have this code if you switch to a different calculation method (like by ounces or by grams).

I hope that is not confusing - I may not have all the right terminology in my brain chassis yet…

PS. ``` key works great, thanks!

Use the formatters padEnd and padStart:

'Flour'.padEnd(20, ' ') + '100%'.padStart(5, ' ') + '\n' +
'Water'.padEnd(20, ' ') + '60%'.padStart(5, ' ')

And this is why Patrick exists, lol, much easier doing it like that, I was thinking of adding a \t for a tab but depending on length it could have become quite messy.

1 Like

@norcoscia, just checking you understand what Patrick is suggesting?

So go back to your original that you know works and add formatters to move elements where you need them to be to line up instead of multiple spaces you are adding space in a far far cleaner way.

1 Like

It looks like some writing I would find on an alien spacecraft : -)

But if I pound the keys long enough I will figure it out.

I must stop for a bit - I need a shower - time seems to have slipped away from me again…

Be back in a bit – smelling like daisies.

Thanks to you and Pat (again)… Power to the Pizza

1 Like

I don’t think this will work - one example – person A uses 65% water, person B uses 64.5% in their formula. With different decimal place values, there is no way to guarantee alignment. Is there a way to have certain values align right.

Also, when I get to yeast the variable (type) input by the user is placed between the word “Yeast” and the input value compounding the problems - I need the equivalent of a tab(s) :frowning:

Same with additional items… further down the list.




What would work best is if I could generate the equivalent of this

[td] [/td][td]Grams[/td][td]Ounces[/td]
[td]Flour (100%)[/td][td]309.970[/td][td]10.934[/td]
[td]Water (60%)[/td][td]185.982[/td][td]6.560[/td]
[td]Yeast (0.5%)[/td][td]1.550[/td][td]0.055[/td]
[td]Salt (2%)[/td][td]6.199[/td][td]0.219[/td]
[td]Oil (2%)[/td][td]6.199[/td][td]0.219[/td]
[td]Sugar (1%)[/td][td]3.100[/td][td]0.109[/td]
[td]Total (TF=0.09)[/td][td]513.000[/td][td]18.096[/td]
[td]Single Ball[/td][td]513.000[/td][td]18.096[/td]

If you want to have plain text then the pad formatter is the best way, also it will only correctly align with a monospaced font (fixed width). Also make sure that the length of the pad formatter is high enough to contain the longest text. Depending on where you paste it, an html table will probably not work correctly.

Can anyone tell me why this does not seem to work

<textarea id=“myInput” dmx-bind:value=" ‘Flour (100%)’ + form1.calcweight.value + ((calcweight.value * (flour1.value / 100)) * (1 + (bowlresidue.value / 100)) * 0.035274).round(2)

or this

<textarea id=“myInput” dmx-bind:value=" ‘Flour (100%)’ + form1.calcweight.value + {{((calcweight.value * (flour1.value / 100)) * (1 + (bowlresidue.value / 100)) * 0.035274).round(2)}}

I keep getting NaN (not a number?) in result for calculation…

Could you please open new topic for different issues you are having?
In this case if you are using form values for the formula, you are missing tonumber formatting added to them …