HTML Practice Thread

Subject: RE: HTML Practice Thread
From: Jack Campin
Date: 05 Nov 20 - 06:56 PM

Means "bird island". I was once on a plane going there that was mostly British oackage tourists going to "Koose-a-DAR-sey". Yuck.

Let's try something more ambitious.

???????

Subject: RE: HTML Practice Thread
From: Jack Campin
Date: 05 Nov 20 - 07:00 PM

That was Chinese for "Trump is an idiot".

Didn't work.

Subject: RE: HTML Practice Thread
From: GUEST,Grishka
Date: 06 Nov 20 - 06:14 AM

That was censorship; they try to steal the election!

Subject: RE: HTML Practice Thread
From: DaveRo
Date: 06 Nov 20 - 06:36 AM

Latin-1 supplement
u+00A0 to u+00FF

 ¡¢£¤¥¦§¨©ª«¬­­ ®¯
°±²³´µ¶·¸¹º»¼½¾¿
ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏ
ÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞß
àáâãäåæçèéêëìíîï
ðñòóôõö÷øùúûüýþÿ

(I added a space at AD)

Subject: RE: HTML Practice Thread
From: DaveRo
Date: 11 Mar 21 - 12:00 PM

From a recent thread:
the game’s 80th “anniversary” celebration

Eastern European characters:
    s g i o c n s z l z a e

Musical symbols:
? ? ? ? ? ? ?

Subject: RE: HTML Practice Thread
From: DaveRo
Date: 11 Mar 21 - 12:06 PM

Those were actually
    ş ğ ı ő ć ń ś ź ł ż ą ę
and
    ♩ ♪ ♫ ♬ ♭ ♮ ♯

Subject: RE: HTML Practice Thread
From: Reinhard
Date: 11 Mar 21 - 02:11 PM

You can also use named entities instead of code numbers:

ş ğ ı õ ć ń ś ź ł ż ą ę

for

ş ğ ı õ ć ń ś ź ł ż ą ę

Subject: RE: HTML Practice Thread
From: Reinhard
Date: 11 Mar 21 - 02:13 PM

Ditto ♪ ♭ ♮ ♯ for ♪ ♭ ♮ ♯

The other notes have no corresponding entity names.

Subject: RE: HTML Practice Thread
From: DaveRo
Date: 11 Mar 21 - 03:16 PM

Reinhard wrote: You can also use named entities instead of code numbers

My addon uses those for some cases.
https://mudcat.org/thread.cfm?threadid=159035#4078599

I noticed that Dick M pasted some text into the Monopoly thread which contained 'smart quotes' (as MS calls them) and that those were displayed properly. (Though some instances of the same characters on the page were encoded, which is curious.) I wondered if anything had changed, and whether those east European characters and musical symbols would now display OK in which case my addon's encoding would be unneccesary. Answer: no.

The conversion of those letters into near-homoglyphs is interesting. Where does that occur?

Subject: RE: HTML Practice Thread
From: GeoffLawes
Date: 14 Mar 21 - 04:50 AM

Exxx cxxxyyy -tttttt OREH    

Subject: RE: HTML Practice Thread
From: Stanron
Date: 30 Dec 22 - 07:12 AM

  
  /12 |............|  
  4/4 |1  2  3  4  |  
  6/8 |1 + a 2 + a |
  
  

Subject: RE: HTML Practice Thread
From: Stanron
Date: 30 Dec 22 - 07:17 AM

How come it works here but not in the thread it was aimed at?

Subject: RE: HTML Practice Thread
From: Joe Offer
Date: 31 Dec 22 - 02:47 AM

Well....I had to fix it here, and didn't see it in the other thread.... ;-)

Subject: RE: HTML Practice Thread
From: Stanron
Date: 31 Dec 22 - 03:31 AM

Thanks Joe.

It was in the 6/8 Hornpipe thread. I managed to get those three lines working with the "pre" tag. Is it possible to force regular spacing any other way?

Subject: RE: HTML Practice Thread
From: MudGuard
Date: 31 Dec 22 - 03:54 AM

Weird Cloud over Munich, Bavaria, Germany, Europe, Earth

Subject: RE: HTML Practice Thread
From: Joe Offer
Date: 31 Dec 22 - 03:59 AM

Hi, Stanron - the <tt>tag works to make monospaced characters</tt> but I'm not sure it works for spaces.

Subject: RE: HTML Practice Thread
From: MudGuard
Date: 31 Dec 22 - 04:00 AM

  <div style="font-family: Courier New, Lucida Console, Monospace; white-space:pre;">
    /12 |............|  
    4/4 |1  2  3  4  |  
    6/8 |1 + a 2 + a |
  </div>
  

will show this:

/12 |............|
4/4 |1 2 3 4 |
6/8 |1 + a 2 + a |

Subject: RE: HTML Practice Thread
From: MudGuard
Date: 31 Dec 22 - 04:02 AM

interesting. div allows style attribute, tt not (style="white-space:pre;" would handle the spaces ...)

Subject: RE: HTML Practice Thread
From: Joe Offer
Date: 31 Dec 22 - 04:05 AM

MudGuard, I don't understand the <div> tag. Can you explain what I can do with it?

Subject: RE: HTML Practice Thread
From: DaveRo
Date: 31 Dec 22 - 04:54 AM

With the pre tag:

    /12 |............|  
    4/4 |1  2  3  4  |  
    6/8 |1 + a 2 + a |
  

Using the Monospace button on my Mudcat Browser tools addon:

  /12 |............|  
  4/4 |1  2  3  4  |  
  6/8 |1 + a 2 + a |

That generates <span style="font-family:monospace"> ... </span>

Both are aligned, but different sizes here on mobile for some reason.

Note the important 'Monospace' fallback in Mudguard's code. This device does not have Courrier or Lucida fonts. So it won't look the same as in Windows. Just 'Monospace' is enough.

tt (teletype) is obsolete. Some mobile browsers don't support it, I've read, but I don't know if that's true.

Stanron: you posted [code] to the hornpipe thread.

Subject: RE: HTML Practice Thread
From: Joe Offer
Date: 31 Dec 22 - 05:11 AM

Thanks, Dave and MudGuard. You are way beyond me, and I sure am glad you are here to contribute your expertise. I've learned a lot from the both of you.
-Joe-

Subject: RE: HTML Practice Thread
From: MudGuard
Date: 31 Dec 22 - 05:14 AM

div is like span, an element with no special meaning - while span is "inline" (like a word), div is block (like a paragraph).

The style="font-family: Courier New, Lucida Console, Monospace; white-space:pre;"> has two CSS declarations.

First, the font family (I gave 2 common windows monospace fonts, plus the "generic" fallback monospace which causes browsers to use their default monospace font).

Second, the white-space:pre; which causes the browser to treat whitespace "as is" - it is the default value of the pre element.

Subject: RE: HTML Practice Thread
From: Stanron
Date: 31 Dec 22 - 05:23 AM

Thanks Joe Dave and Mudguard.

I've got Dave's browser ,tools. lets try

/12 |............|
4/4 |1 2 3 4 |
6/8 |1 + a 2 + a |

I highlighted the three lines and clicked monospace

It didn't work in the preview. What am I doing wrong?

Subject: RE: HTML Practice Thread
From: MudGuard
Date: 31 Dec 22 - 05:52 AM

a monospace font does not change the handling of spaces.

In HTML, usually, multiple spaces are reduced to one space.

The pre element and the text-area element are the only elements which (per default) keep spaces. (unless I forgot elements)

This can be influenced by CSS, here by using a style attribute with "white-space:pre;" in it - as I have demonstrated for the div element.

Subject: RE: HTML Practice Thread
From: DaveRo
Date: 31 Dec 22 - 06:17 AM

This is formatted using MBT - as was my last post:

  /12 |............|  
  4/4 |1  2  3  4  |  
  6/8 |1 + a 2 + a |

Previews OK.

The middle line has 2 spaces between the numerals. Did yours, Stanron?

The button also replaces spaces with non-breaking spaces, as described in the link to MBT.

Let's see what gets posted.

(It uses span and not div for historical reasons - the buttons were originally all inline styling, and the non-breaking spaces were added later. Though in practice a block is more likely - all the examples I've posted are blocks.)

Subject: RE: HTML Practice Thread
From: Stanron
Date: 31 Dec 22 - 06:44 AM

That looks spot on Dave. If the bar lines line up then it is correct.

Yes the second line has two spaces. The top line has none and the bottom line has single spaces.

In the thread some one posted a track where a jig was played over what sounded like 4/4 accompaniment.

This was part of an explanation of why it worked.

Subject: RE: HTML Practice Thread
From: Stanron
Date: 31 Dec 22 - 07:05 AM

I've tried looking up MBT online. No joy. What is it?

Subject: RE: HTML Practice Thread
From: DaveRo
Date: 31 Dec 22 - 07:14 AM

Sorry - Mudcat Browser Tools

Mudcat thread about it.

And a plug for my Simple Linkifier - because the Mudcat one is broken:
Simple Linkifier

Subject: RE: HTML Practice Thread
From: Newport Boy
Date: 31 Dec 22 - 07:15 AM

Stanron wrote: I've tried looking up MBT online. No joy. What is it?

That's Dave's Mudcat Browser Tools - well worth having for all sorts of uses.

Phil

Subject: RE: HTML Practice Thread
From: Stanron
Date: 31 Dec 22 - 08:04 AM

Thanks. I've actually got MBT installed. How do I use it to display the three lines?

Subject: RE: HTML Practice Thread
From: DaveRo
Date: 31 Dec 22 - 09:17 AM

I just copied the 3-line block into my post, hightlighted it, and pressed 'Monopspace'. If the bars line up on preview it should line up when posted.

You said it didn't line up on preview before, and it appears to me that line 2 had single spaces. Why that was I can't guess.

Copying and Pasting text doesn't work the same in every operating system and every program that you copy from or to. Sometimes you end up copying formatting as well. In particular there are ordinary (ascii) spaces, and non-breaking (unicode) spaces, as well as html non-breaking spaces: &nbsp; Only ordinary spaces get changed to html non-breaking spaces by the MBT Monospace button. If you copy and paste from mudcat itself you might get unicode non-breaking spaces.

None of that should matter. If the preview looks right it should post correctly. If necessary add or remove non-breaking spaces.

Subject: RE: HTML Practice Thread
From: Felipa
Date: 31 Dec 22 - 10:17 AM

Dave Ro

I don't always trust previews, because I've had some experiences of pasting in lyrics in Cyrilllic and in Hebrew (not typing, not using html) in which the text looked right in the preview but was all question marks ??? in the final post.

Therefore, I recently posted here first, rather than at the intended discussion thread. I had the strange experience of copying and posting lyrics in html code from the same source, using the same system, and getting a sample that worked and another that didn't.

Subject: RE: HTML Practice Thread
From: Stanron
Date: 31 Dec 22 - 10:18 AM

Thanks Dave. I make these displays in a text editor which appears to be named just 'Text Editor'. Linux Mint, Firefox browser. I copy and paste from the text editor into the Mudcat posting box.

The time it didn't work I probably copied it from an earlier mudcat posting. I'll try it again from scratch

/12|------------|
4/4|1  2  3  4  |
6/8|1 + a 2 + a |


This time it worked. Is nbsc stuff the non breakable space?

Subject: RE: HTML Practice Thread
From: DaveRo
Date: 31 Dec 22 - 11:42 AM

Stanron wrote: This time it worked. Is nbsc stuff the non breakable space?

Yes. If you started in a text editor he spaces will be simple ascii spaces and the Monospace font will replace each one with an html non-breaking space - &nbsp; - to preserve the layout.

The pre tag, and the white-space:pre style MudGuard suggested will also preserve the layout. Take your pick. But a single button is easiest, I contend.

Subject: RE: HTML Practice Thread
From: DaveRo
Date: 31 Dec 22 - 12:08 PM

Felipa wrote: I had the strange experience of copying and posting lyrics in html code from the same source, using the same system, and getting a sample that worked and another that didn't.

Hi Felipa. Yes, I saw that. I can't easily explain what happened. Are you using my Browser Tools addon?

It should convert Cyrillic
ОЙ, ЯК ЖЕ БУЛО ІЗПРЕЖДИ ВІКА Ой, як же було ізпрежди віка - Ой, дай Бо[г].

Subject: RE: HTML Practice Thread
From: DaveRo
Date: 31 Dec 22 - 12:28 PM

Or maybe Mudcat can now handle cyrillic without conversion to html &-codes?

??, ?? ?? ???? ???????? ???? ??, ?? ?? ???? ???????? ???? - ??, ??? ??[?]

Subject: RE: HTML Practice Thread
From: Joe Offer
Date: 31 Dec 22 - 12:58 PM

Nope. Not working now, Dave. We're on a virtual machine just now, and probably won't have all the bells and whistles until Max does the full rebuild.