cardmaker icon indicating copy to clipboard operation
cardmaker copied to clipboard

FormattedText Margins Updates

Open nhmkdev opened this issue 2 years ago • 10 comments

  • Add debug lines for the defined margins (if they differ from the element border)
  • Support center/right alignment.
  • Support justified alignment

nhmkdev avatar Dec 05 '21 16:12 nhmkdev

  • Vertical alignment is currently not supported for margins (other than top)

nhmkdev avatar Dec 05 '21 20:12 nhmkdev

Is there any possibility for making automatic indentation or reverse indentation possible? For example, specifying a <paragraph_start=x> which would put an extra x pixels after each
or a <paragraph_body=x></paragraph_body> which would allow for an extra x-offset for any lines defined between the start and end of that tag? (Tag names can be changed, these suggested names are pretty terrible but instructive.)

MarkVabulas avatar Mar 28 '24 10:03 MarkVabulas

A traditional <p> style tag might be nice. 👍

Have you tried out <xo> , <push>, and <px>?

push is probably the best for a simple indent for the start of a paragraph at this time.

<push=40>Start of a long string that can wrap lines but the first line will be indented.

nhmkdev avatar Mar 29 '24 02:03 nhmkdev

I have tried those, and they work for the purposes of drawing text as pages, but I'm trying to emulate a reverse flow, where the header is at x=0, and the sub-header lines are at x=50 (for example). Then when that flow stops, at the next <br> (or possibly</p>) then it kicks back to x=0. I can't model this with multiple layout elements because the vertical flow means they won't track each other vertically properly, but I do need the y-flow for proper presentation vertically.

Here's what we've got right now and what I'd prefer: bad_indent preference: good_indent

MarkVabulas avatar Mar 29 '24 11:03 MarkVabulas

Technically, a <p> tag pair could just be used to push/pop the current state of the offsets/margins/alignments/line spacing onto some sort of stack? That would really simplifying the cognitive burden while also hopefully making the coding easier? everything inside a <p> tag pair would have one state, above the default. Obviously there's undefined behavior if you start running more commands inside nested <p> but that's the current functionality so its not a loss, but could still be a strong gain of functionality. And fixing the interplay later would still be possible.

MarkVabulas avatar Mar 29 '24 11:03 MarkVabulas

If you have a rough idea of where it would need to be implemented and how, mind giving me the 5-minute overview and letting me go try to implement it?

MarkVabulas avatar Mar 30 '24 05:03 MarkVabulas

Using Existing

For the example image you provided I have generally done something like this in the past:

<b>Header</b><br><xo=20>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</xo><br><b>Header</b><br><xo=20>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Result

headers

Admittedly there is a minor bug in using x-offset in that it overdraws the edge of the element (easy hack fix is to just make the element less wide by the x-offset amount).

Related: Styling via defines with parameters

I really like this approach because the header can also be configured in a define (with parameter) and treated kind of like a css value. See table below.

Define Value
ruleheader <fs=40><b>{1}</b></fs>
rulebullet <spc=3>

Element definition:

@[ruleheader,Phases]<br>
@[rulebullet]a) Perform 3 actions

^^ the above defines/definition doesn't include more <br> tags but easily could making things even simpler in the definition. Also, the rulebullet could use the xo tag to maintain the indent across lines.

Adding a new Tag

Even with the above existing solution a <p> tag could be nice. This is what I could work on adding (unless you really want to make the the change):

<p=[overall indent];[first line additional indent]>

Example:
<p=45;15>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

[overall indent] - the indent of the text/otherwise within this block [first line indent] - how many additional characters/pixels(**) the first line should indent (can be negative to create the different indent you wanted)

** (up for argument) I think the input parameters should be based on the width of the current font character as opposed to pixels... hmm or allow both.

Additionally:

  • Closing the tag would force a new line (maybe...)
  • Don't bother to support <p> within another <p> (though it might just work)

As for code references and information: FormattedTextProcessData - active state of the FormattedText as it goes through each tag DrawFormattedText.processMarkupDefinition - high-level looping through the tags and processing XDrawOffsetMarkup - good starting point for the basic offset style tag - also shows how a tag closing is responsible for undoing any adjustment made to FormattedTextProcessData.

Let me know what you think and I'll plan accordingly! 👍

nhmkdev avatar Mar 30 '24 13:03 nhmkdev

Well I had some time and figured I could look into adding paragraph like functionality. Added here

Examples

paragraph_examples

Definition for first element:

-Before Paragraph-<p=12;2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>-After Paragraph-

Definition for second element:

<b>Lorem ipsum</b>(-Before Paragraph-)<p=4;4>dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>-After Paragraph-

New snippet added to manual: paragraph_manual

I highly suspect there might be a couple of hidden bugs/crashers with this one... so be careful.

nhmkdev avatar Mar 30 '24 23:03 nhmkdev

Immediately checking this badboy out!

MarkVabulas avatar Apr 02 '24 13:04 MarkVabulas

I tried to break it and failed to break it. It's working amazingly well and solves exactly what I had hoped for! image

MarkVabulas avatar Apr 02 '24 14:04 MarkVabulas