Page 1 of 1

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

PostPosted: Thu Feb 13, 2025 8:28 am
by John Robin Dove
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

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

PostPosted: Thu Feb 13, 2025 8:35 am
by Clifton
Use a <p> tags and set the text-indent style instead of <span> tags and you should be able to accomplish what you want.

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

PostPosted: Thu Feb 13, 2025 11:34 am
by John Robin Dove
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.

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

PostPosted: Thu Feb 13, 2025 1:39 pm
by Clifton
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.

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

PostPosted: Fri Feb 14, 2025 5:16 am
by John Robin Dove
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.