Indenting all lines inside textarea

Question

Is it possible to text indent each line in a textarea? I'm using a handwritten font and the first letter on each line is getting cut off slightly. I've already used padding and margin, but this does not work.

Many thanks.

Erik

Shrieval

Answer 1

Have you tried using \t? More details would be good are you programming this or are you typing it? You can also try alt codes if its the latter - Alt-012 is tab.

Edit I see your probably talking about the HTML input textarea. You might tag your question for HTML, though looking at it again it's fairly straight forward from the context.

Pianoforte

Here is my link: erikrp.com/contact.htm If you type in the "note" area, only the first line indents of course. is it possible to make every line indent or offset to the left to avoid the cut off text? Forgive me for being a perfectionist. many thanks. – Shrieval

What browser are you targeting with the cutoff? I noticed chrome seems to cut part of it off, but my firefox doesn't. Using Firebug, adding "padding-left: 5px;" worked for me. I'll check to see if it it works on chrome. – Pianoforte

Thanks Josh... The "a"'s look like crap. The first character gets cut off. – Shrieval

Tweaking it in Chrome I found 6px to be ideal, perhaps 7 px for good measure. I used the capital J as the cutoff was most pronounced, and easy to recognize. The original 2px I did notice some clear cutoffs. Your work looks great and very original. I would like to suggest for some of these little alignment issues using Firebug. You can tweak the CSS (amongst other things) in realtime using the inspect tool. There is a lite version for Chrome and very nice full featured one for Firefox (free of course.) You might be able to counter padding with a negative margin as well. – Pianoforte

I'm not getting a letter chopped off. At the worst it's parts of letters. My I.E. 8 does push the textarea of to the right quite a bit though. It might be acting up on your browser version. Perhaps someone else can confirm? – Pianoforte

Answer 2

Don't know about \t but

style="padding-left: 4px;"

would definitely work for all the rows of a text-area.

Consonance

And if the developer does not want the element width to grow with the additional padding, I'd suggest also using box-sizing: border-box; – Telega

#779934 – Confidential

Answer 3

in Chrome 69.0.3497.92, This gives indent only for the first line in textarea:

text-indent: 2em;

Precontract

indeed... noticed the same thing on chrome 71.0.3578.80 (Official Build) so It is safe to use padding-left instead text-indent – Clanton