Simple html-question (break line)

Started by sinus, April 21, 2020, 10:17:45 AM

Previous topic - Next topic

sinus

Hi all
I post this here, though it is not directly related to a App.

I am quite sure, that this answer/question is basic, but nevertheless I want to ask it.  ;D

If I have some new lines in the metadata, these lines will be shown in the description of the metadata-panel of IMatch.
It is simply better readable ... like if you hit here in the text sometimes return.

If I copy this text into word (Ctrl  C - V) it works also nice, the lines are here.

But if I put the metadata-field (like here the description) with a variable in a App, all lines will be gone. The whole text is here, but not the lines.
Also e.g. in the "official" App "HTML Report demo App".
You will see it better and clear, if you look at my attachements.

Is there a way or trick, that I can see these empty lines also in the html-display?

Thanks!

Best wishes from Switzerland! :-)
Markus

bekesizl

In old times it was adding a <br> to insert a line break.

sinus

Quote from: bekesizl on April 21, 2020, 10:28:31 AM
In old times it was adding a <br> to insert a line break.

Thanks for this!
Yes, you are right, if I put this directly into the html, then it works.
But I have hundrets of files with "line breaks" in the metadata-fields and wants them to see also in html.

If I put the <br> in the metadata itself (from IMatch) and export it with an App, I get this:

Londoner Wembley-Stadion am 30. Juli 1966. <br> In der 101. Minute überwand Hurst den deutschen Torwart

At least Word takes these empty lines directly from IMatch, maybe there is another trick for html.
Best wishes from Switzerland! :-)
Markus

bekesizl

The last time I had to do with HTML was, when Firefox didn't even exist.
You should take a look at the source of the file. Maybe there is another structuring used inside.

When I had to understand something about HTML, these pages were useful to me to understand the syntax:
https://www.w3schools.com/html/
https://www.w3schools.com/html/html5_syntax.asp

Mario

Word interprets data you paste in  (more or less) smart way. Making the assumption that you want to convert carriage return / line feed.
HTML does not do that. In HTML CR and LF are ignored and meaningless.
If you want to produce a <br/> from a CR/LF, you must do that in the code in your app which processes the variable, doing a replace. Or let the variable replace crlr with <br/>.
This is not new, you have dealt with this many times over the years.
-- Mario
IMatch Developer
Forum Administrator
http://www.photools.com  -  Contact & Support - Follow me on 𝕏 - Like photools.com on Facebook

sinus

Thanks for your answers, bekeszil and Mario.

That with replace, Mario, is a good idea and I think, I could manage this.
The problem is, I cannot see, what "code" I have to replace.

Curious is, IMatch-Metadata-fields shows the correct break-lines.
In "Visual studio code" I see also the empty lines, but I cannot see the "codes" what creates this break lines. (Attachement 1)
If I could see them, like LF or something, I could replace it in the App.

Hm, one would think, this is easy, I create a line and that's it. This lines will be display everywhere.
Well, not in HTML, like Mario pointed out. (Attachement 2)

I will have to search more for this.
Best wishes from Switzerland! :-)
Markus

Mario

Have you bothered to look at the documentation for variables? https://www.photools.com/help/imatch/#var_basics.htm
The text for the replace function explains exactly that.
-- Mario
IMatch Developer
Forum Administrator
http://www.photools.com  -  Contact & Support - Follow me on 𝕏 - Like photools.com on Facebook

sinus

#7
Quote from: Mario on April 21, 2020, 01:20:05 PM
Have you bothered to look at the documentation for variables? https://www.photools.com/help/imatch/#var_basics.htm
The text for the replace function explains exactly that.

Thanks, Mario
I  will look at it, thanks!  :)

Boah, I completely missed this, not before, I have read this all several times (I love variables), but since I could not see a code ("Steuerzeichen für neue Linie"), I thought, than also the help cannot help.
Well, I think, I was wrong.

I will check this carefully, thanks, Mario, again.  :D
Best wishes from Switzerland! :-)
Markus

Jingo

Quote from: sinus on April 21, 2020, 02:09:29 PM
Quote from: Mario on April 21, 2020, 01:20:05 PM
Have you bothered to look at the documentation for variables? https://www.photools.com/help/imatch/#var_basics.htm
The text for the replace function explains exactly that.

Thanks, Mario
I  will look at it, thanks!  :)

Boah, I completely missed this, not before, I have read this all several times (I love variables), but since I could not see a code ("Steuerzeichen für neue Linie"), I thought, than also the help cannot help.
Well, I think, I was wrong.

I will check this carefully, thanks, Mario, again.  :D

Hint.. check out the processor code that I didn't use in the Keyword array... and just add to the description section but change to <CR><LF> and <BR>... then, call it by modifying the ForEach loop to something like:


    if (c.processor !== undefined) {
        params['varv' + index++] = c.processor(c.value);
                                }
                                else {
   params['varv' + index++] = c.value;
  }


I'm not on my dev machine so can't test it - but from looks of things, this should work (though might need a tweak or two..)... good chance to try out your new JS coding skills!   8)

sinus

Boah! Hey Jingo, thanks for jump also into this. Your code looks for me really sophisticated, ahem, and difficult to understand!  8)
But I will look into this for sure, thanks ... because the better I understand the code from you (timeline), the more I understand this JS.
I have tried on W3 (https://www.w3schools.com) and other sources, but I believe now, that for me it is best to work and check and think about and with examples. That is why I think, IMatch has a very cool help, a lot of examples.
And your timeline is of course almost the best scool, I understand much more now.

But I have to lern more, of course...  8)

This problem here was, if I or a another one wrotes some text in the description with one or more empty lines. And these lines will not be taken over automatically.
Hence I had this problem. But with the help of the help, means from Mario,  ;D , I could find the easiest way.

Simply replace the "code" for the new line with a variable. If I had knew the code, then I have been easy. But I found not out, what code represent a new line.
But now I found out and it is this variable, what solves my problem:

{File.MD.description|pereplace:{lf}==<br>}

Means the (not visible) "code" for a new line, entered in IMatch-metadata-panel is: {lf}

And this works perfect.

Thanks at all, again a problem solved
.... bekesizl: your old times seems to be not that old, because <br> is still correct  ;D


Best wishes from Switzerland! :-)
Markus

Jingo

You bet Markus... fun times when there are lots of ways to solve a problem!  Glad you got that all straightened out!