Text-indent on all first lines: is it possible?

Workarounds and usability notes.

Text-indent on all first lines: is it possible?

Postby John Robin Dove » Thu Feb 13, 2025 8:28 am

Hi Clifton,
I have been trying unsuccessfully to do this for a while. I think it is probably not possible. I can indent the first line of text in a field (div or textarea) but not after any other line-breaks. I have also tried using text-indent in a span but this does not seem possible either. I suppose it doesn't really matter but I would prefer to indent all first lines if it were possible. Thanks for your time.
John
John Robin Dove
 
Posts: 538
Joined: Thu Jan 23, 2014 4:35 am

Re: Text-indent on all first lines: is it possible?

Postby Clifton » Thu Feb 13, 2025 8:35 am

Use a <p> tags and set the text-indent style instead of <span> tags and you should be able to accomplish what you want.
Clifton
Site Admin
 
Posts: 781
Joined: Tue Jan 14, 2014 1:04 am

Re: Text-indent on all first lines: is it possible?

Postby John Robin Dove » Thu Feb 13, 2025 11:34 am

Thanks Clifton,
This is the best I have managed so far:

objs = sharedActions.obj2.getElementsByTagName('span');
for (let i = 0; i < objs.length; i++)
{
if (!(objs[i].textContent))// the only spans that don't have textContent correspond to the line-breaks
{
objs[i+1].innerHTML= '<p style="float:left;clear:none;indent-left:15px">  ' + objs[i+1].textContent +' </p>'; //spaces are unbreakable ansi 160
}
}

The problem is that float and indent-left are incompatible so the indent-left instruction is ignored. I have to use float:left;clear:none; to prevent an empty line, which I I don't want, being created. I have tried using div instead of p but the result is the same. The extra spaces solution is not too bad.
John Robin Dove
 
Posts: 538
Joined: Thu Jan 23, 2014 4:35 am

Re: Text-indent on all first lines: is it possible?

Postby Clifton » Thu Feb 13, 2025 1:39 pm

If an empty space is created, then try:
<p style="margin: 0 0 0 0;"></p> and see if that helps.

You can also try to add "display:inline;" to for the <p> tag to act like a <span> but with all the other benefits.
Clifton
Site Admin
 
Posts: 781
Joined: Tue Jan 14, 2014 1:04 am

Re: Text-indent on all first lines: is it possible?

Postby John Robin Dove » Fri Feb 14, 2025 5:16 am

Thanks for your suggestion. The example I sent you yesterday was rather stupid :oops: I thought about it during the night and realised that the <p> element was superfluous. I could just as well have put the spaces in the span element. I tried with margins 0,0,0,0 but the 'empty line' above the paragraph still appears. But I have just made a breakthrough :) This seems to be the solution:
objs[i+1].innerHTML= '<span><p style="float:left;clear:none;">  </p>' + objs[i+1].textContent +'</span>' i.e. putting unbreakable spaces in the <p> tag and removing the text-indent instruction.
I am working towards a radical change in my 'animated reading' system. I think I can use your spans like this:
const span = document.getElementById('syspageFrame').contentWindow.document.getElementById(40)
span.style="background-color:blue;color:white"
so that instead of selecting text in the textarea I can change the style of each span in the div which produces the same result and solves certain other complicated problems but I won't bore you with all the details.
John Robin Dove
 
Posts: 538
Joined: Thu Jan 23, 2014 4:35 am


Return to General Discussion

Who is online

Users browsing this forum: No registered users and 0 guests

cron