7

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

Phil D.
  • 251
  • 4
  • 17
Erik
  • 5,701
  • 27
  • 70
  • 119

3 Answers3

8

Don't know about \t but

style="padding-left: 4px;"

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

Jammer
  • 131
  • 1
  • 6
  • 2
    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;_ – Phil D. Jan 19 '17 at 01:38
  • https://stackoverflow.com/questions/779434/how-do-i-prevent-the-padding-property-from-changing-width-or-height-in-css – Kamil Kiełczewski May 30 '17 at 13:55
2

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.

Joshua Enfield
  • 17,642
  • 10
  • 51
  • 98
  • Here is my link: http://www.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. – Erik Jul 29 '10 at 04:27
  • 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. – Joshua Enfield Jul 29 '10 at 04:32
  • Thanks Josh... The "a"'s look like crap. The first character gets cut off. – Erik Jul 29 '10 at 04:37
  • 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. – Joshua Enfield Jul 29 '10 at 04:51
  • 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? – Joshua Enfield Jul 29 '10 at 04:53
2

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

text-indent: 2em;
MohammadReza Alagheband
  • 2,110
  • 13
  • 19
Alex
  • 21
  • 2
  • indeed... noticed the same thing on chrome 71.0.3578.80 (Official Build) so It is safe to use padding-left instead text-indent – Dulara Malindu Dec 07 '18 at 07:03