Styling paragraphs/lines?

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9389
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Styling paragraphs/lines?

Post by richmond62 » Sat Apr 13, 2024 8:21 am

Are you wedded to using the border-whatevers?
Personally, after Zak's OP, I am not 'wedded', but I am 'in a relationship', as it does seem a good thing, if it is at all possible. 8)

Zax
Posts: 475
Joined: Mon May 28, 2007 10:12 am
Location: France
Contact:

Re: Styling paragraphs/lines?

Post by Zax » Sat Apr 13, 2024 8:21 am

I tried again using numToChar(11) and it seems to work.

Code: Select all

on mouseup
   replace cr with numToNativeChar(11) in fld 1
   set the borderwidth of paragraph 1 to 4 of fld 1 to 3 -- > ok
end mouseup
But we have to replace all CRs typed/pasted by users, and it add complexity.

Field script:

Code: Select all

on returnInField
   put numToNativeChar(11) into the selection
end returnInField
dunbarx wrote:
Fri Apr 12, 2024 2:57 pm
I am thinking about using an overlay and modifying its properties to fit. Maybe a field with just the right backColor, borderColor, borderWidth and blendlevel? That way it is a single control not subject to the line and paragraph constraints you are seeing. You can easily size and locate it to fit.
I don't understand your proposal Craig. Could you explain?

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9389
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Styling paragraphs/lines?

Post by richmond62 » Sat Apr 13, 2024 8:26 am

But we have to replace all CRs typed/pasted by users, and it add complexity.
Doesn't that mean that your border will go round all the text, not just the paragraphs you want?

Zax
Posts: 475
Joined: Mon May 28, 2007 10:12 am
Location: France
Contact:

Re: Styling paragraphs/lines?

Post by Zax » Sat Apr 13, 2024 8:48 am

richmond62 wrote:
Sat Apr 13, 2024 8:26 am
Doesn't that mean that your border will go round all the text, not just the paragraphs you want?
Oops! Right, that would involve placing CRs in the desired locations, and that would definitely be too complex and not robust enough. :oops: :(

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9389
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Styling paragraphs/lines?

Post by richmond62 » Sat Apr 13, 2024 5:52 pm

One of the things that interests me as an English teacher is what, in LiveCode constitutes a paragraph.

In English a paragraph can be represented in 2 distinct ways:

1. Each new paragraph is represented by a carriage return and an indentation (Tab key).

2 Each new paragraph is represented by a double carriage return (i,e, an empty line between each paragraph).

I made a stack with 2 fields with exactly the same text with the 2 styles of border:

Code: Select all

on mouseUp
   set the borderColor of paragraph 2 of fld "f1" to red
   set the borderColor of paragraph 2 of fld "f2" to red
   set the borderwidth of paragraph 2 of fld "f1" to 4
   set the borderwidth of paragraph 2 of fld "f2" to 4
end mouseUp
-
borders1.jpg
-

Code: Select all

on mouseUp
   set the borderColor of paragraph 2 to 3 of fld "f1" to green
   set the borderColor of paragraph 2 to 3 of fld "f2" to green
   --
   set the borderwidth of paragraph 2 to 3 of fld "f1" to 4
   set the borderwidth of paragraph 2 to 3 of fld "f2" to 4
   end mouseUp
-
borders2.jpg
-
Obviously it is better to stick to method #1 of representing paragraphs.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9389
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Styling paragraphs/lines?

Post by richmond62 » Sat Apr 13, 2024 6:17 pm

Code: Select all

on mouseUp
 put paragraph 2 to 3 of fld "f1" into PARAS1
   delete paragraph 2 to 3 of fld "f1"
   replace cr with numToNativeChar(11) in PARAS1
   put cr & PARAS1 & cr after paragraph 1 of fld "f1"
   set the borderwidth of paragraph 2 of fld "f1" to 4
   set the bordercolor of paragraph 2 of fld "f1" to "purple"
   end mouseUp
-
borders3.jpg
-
I think I'll just pop outside and bang my head against the wall for a bit. 8)

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9670
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: Styling paragraphs/lines?

Post by dunbarx » Sun Apr 14, 2024 11:55 pm

Zax.

I threw this stack together. It places an overlay between any two lines that you click on. It is hardly polished, in that it does not use typical field properties to set spatial parameters (as it ought), rather, I just jury-rigged some stuff into place.

It is a kludge, in that it sidesteps all that paragraph and return stuff. This may not be a grown-up way to do this.

Craig
MakeOverlay.livecode.zip
(1.18 KiB) Downloaded 12 times

Zax
Posts: 475
Joined: Mon May 28, 2007 10:12 am
Location: France
Contact:

Re: Styling paragraphs/lines?

Post by Zax » Mon Apr 15, 2024 7:25 am

Thanks Craig, that’s a smart solution :)

However, if I want to be a perfectionist, placing a semi-transparent element on top of text decreases the contrast of the text and it is no longer black.
This is the difference with the concept of background, where the color is placed in a layer lower than the text.
What you are proposing is more highlighting, which can be very interesting in certain cases.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9389
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Styling paragraphs/lines?

Post by richmond62 » Mon Apr 15, 2024 10:09 am

A simpler way to put borders round whatever text you want works like this:
-
SShot 2024-04-15 at 12.08.15.png
-

Code: Select all

on mouseUp
   put the selectedText into SELEX
   replace cr with numToNativeChar(11) in SELEX
   delete the selectedText
   put SELEX after the selectedText
   set the borderwidth of the selectedText to 4
   set the bordercolor of the selectedText to "red"
   select after fld "f1"
end mouseUp
Last edited by richmond62 on Mon Apr 15, 2024 11:34 am, edited 1 time in total.

Zax
Posts: 475
Joined: Mon May 28, 2007 10:12 am
Location: France
Contact:

Re: Styling paragraphs/lines?

Post by Zax » Mon Apr 15, 2024 11:13 am

Nice :)

This is a simplified version:

Code: Select all

on mouseUp
   put the selectedText into savedText
   replace cr with numToNativeChar(11) in savedText
   put savedText into the selectedText
   
   set the borderwidth of the selectedText to 4
   set the bordercolor of the selectedText to "red"
end mouseUp

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9670
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: Styling paragraphs/lines?

Post by dunbarx » Mon Apr 15, 2024 2:19 pm

However, if I want to be a perfectionist, placing a semi-transparent element on top of text decreases the contrast of the text and it is no longer black.
I only colorized the backGround because one or more of the previous posts showed that. You do not have to.

Craig

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4003
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: Styling paragraphs/lines?

Post by bn » Mon Apr 15, 2024 2:53 pm

Hi Zax,

I used Dunbarx stack and modified it a bit.

I used the field "overlay" to mark text. I made it scrollable (see script of main field) also you can put the overlay field in front of main field or behind the main field (obviously not when the main field is opaque.

If the overlay is in front of the main field I set the "ink" to "blendDarken". This way the text of the main field is always crisp irrespective of the blend level of field overlay.

See the options and scripts.

It is still a hack and has its limitations.
Attachments
MakeOverlay_2.livecode.zip
(1.81 KiB) Downloaded 11 times

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9670
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: Styling paragraphs/lines?

Post by dunbarx » Mon Apr 15, 2024 3:29 pm

Bernd.

The scrolling is nice.

I was never satisfied with the method of selecting the start and end lines. Your update does not have this feature at all.

But I like the following, modifying "our" makeOverlay button script:

Code: Select all

on mouseUp
   put word 2 of the selectedlines into tStartLine
   put word 4 of the selectedLines into tEndLine
   put the formattedRect of line tStartLine to tEndLine of field fText into tRect
   set the rect of field "overlay" to tRect
   ## set a custom property of field "overlay" to reference it 
   ## in script of field "fText" for scrolling
   set the uStartLine of field "overlay" to tStartLine
   set the uEndLine of field "overlay" to tEndLine
end mouseUp
Now all the user has to do is select some lines of the text of the field, and the button will set that up. Needs a little houseKeeping, though.

Craig
MakeOverlay_3.livecode.zip
(1.84 KiB) Downloaded 8 times

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4003
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: Styling paragraphs/lines?

Post by bn » Mon Apr 15, 2024 3:38 pm

Craig,

that looks nice and all your script needs is a "select empty" after getting the formattedRect.

Kind regards
Bernd

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9670
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: Styling paragraphs/lines?

Post by dunbarx » Mon Apr 15, 2024 6:13 pm

Bernd.

Test, test, test. Anyway, this sure beats working.

Had to modify the button script since if the user selects only a single line, the "format" of the "selectedLines" changes:

Code: Select all

on mouseUp
   put the selectedlines into tSelectedLines
   put word 2 of tSelectedLines into tStartLine
   if tSelectedLines contains "to" then put word 4 of tSelectedLines into tEndLine --"to" only appears with multi-line selections
   else put word 2 of tSelectedLines into tEndLine  --same line
   
  ....
Craig
MakeOverlay_4.livecode.zip
(1.91 KiB) Downloaded 10 times

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”