Bits of HTML experimentation.
How to handle Tweetsand Toots
Mathematics presentation on web pages.
Chemical structure presentation on web pages.
My Site's config
Image "alt" text to display as a tooltip "on hover"
Next section
Next section
End of document

HTML Experimentations

I've been using HTML since ... some time in the early 1990s, I forget when. But I've never really had a good use for it, apart from building websites of stuff that interests me. Running my own domain, hosting a website, etc - I just can't be bothered with. But I seem to have found a reasonable level with Blogger, and I'm learning HTML a little better. And this CSS thing too. Two overlapping systems ... that's not so much bad design as absence of design. We all know the system "just grew", like Topsy.

But I need to practice, and keep notes. So that's what happens here.

Tooting

A link to a tweet doesn't show much : https://twitter.com/kendrakf13/status/1007088771500830721

OK, I obviously need to do some housekeeping code around the raw url. Twitter's site will produce a code block for you, which wraps this up in a blockquote element.

I should have seen the point of the blockquote myself. "Hashtag Homer_Doh!"

I want to see what Twitter (this is Musk we're talking about - the talking, walking exudate from the anal glands of a Himalayan deer ; as the previous owners of Twitter know, with Musk you can trust as much as anyone else, but you absolutely must verify. Verify every bloody word that comes out of his mouth/ keyboard. Stripping off the angle brackets and wrapping in some CODE tags, the code Twitter prepares is this

blockquote class="twitter-tweet"    p lang="en" dir="ltr"
  Tweet text
  a href="https://t.co/0123456789ABCDEF" GT  pic.twitter.com/0123456789ABCDEF   /a   /p 
  — Tweet Author (@handle) 
  a href="https://twitter.com/author/status/12345678901234567890?ref_src=twsrc%5Etfw"
  TweetDAte    /a  
  /blockquote  
  script async src="https://platform.twitter.com/widgets.js" charset="utf-8"    /script

OK, that's Twitter's code. It contains

the URI of the tweet, obviously ; that's unavoidable
the text of the tweet ; again, unavoidable. Or is it? I suppose they could have hidden that in the "special sauce" in the Twitter JavaScript object. That would avoid having a myriad of copies of the Words of Chairman Elon scattered around on a myriad of websites. That'd create a lot of work for a veritable army of Winston Smiths to do when Musk wants to retcon history to his desired version of reality. Well, I'm sure the idea will occur to someone, one of these days . Or they'll have some other reason for changing their desired form of embedding.
The Tweet's author attribution. Again, reasonable enough. Same distribution issues too. does it show that I've just watched a film about a Holocaust denier?
Then a link to the tweet's screenshot, (or associated images - I'm going t have to think about this a bit). But for some reason there's a caret ("^") encoded i nthe middle of the URI as "%5e", which ... is there some database-fu going on in there too? ["My spider sense is tingling."]
A little more scenery code tidying thing up. Then …
A call to the twitter-hosted JavaScript file which puts these elements together.

I don't see anything obviously hostile in that, with the caveats that I'm not a strong coder, and I haven't looked at one line of the JavaScript code blob. One thing I really should do is look at the expiry date for that .JS file - which is the programmer's assertion that it will not change before that date. A change in that would attract a lot of attention to it. Is that me being suspicious or just paranoia? Ask my NoScript settings.

Well, here is how Musk's code puts together a tweet :

The Frederick lab has perfected disposal of used luminol-based ECL reagent. After the Western is developed, inject the ECL into a solution containing 10% bleach. Chemistry is awesome! pic.twitter.com/fa9z7XEQkl
— Dr. Kendra Frederick (@kendrakf13) June 14, 2018

quote

Which works.

Well, that was a merry little jaunt down into the depths of how Tweet embedding works. It's sunrise now, and I feel the need for a few hours sleep. Then back to do the actua interesting stuff - the chemistry in the tweet, and how to do "Toots".

Mastodon Web toot version

This iframe takes a few seconds to load, but gives several clikcable links within the iframe. It has a property of "allowfullscreen" which is all OK. Functionally it seems to be the same as for Twitter (given that I haven't looked into either of their JS codes).

Sengi App toot version.

OK, so here's the first thing - I don't think Sengi can load toots from before it was started. I had to do a search or it. Is that so odd?

The Sengi link

The link from Sengi is just a plain weblink. Which works, and gives you the toot and it's context, on the server of whichever server your account is on.

My Mastodon account

Back to List.

Mathematics presentation on web pages.

I use enough maths to need to do it a bit better than inline "1+2 = 3", so I need to work on this. The basic system is "MathML", and it's a bit complex. But the equation editor in LibvreOffice will produce both the equations and the MAthML to go with them, so that's good enough for my uses.

The MathML code from LibreOffice needs to be wrapped in a tag pair ' math xmlns="http://www.w3.org/1998/Math/MathML" display="[block | inline]" ' and closed with ' /math '. Code can be displayed inline like this binomial expression $C (n, k) = C_{k}^{n} = {}_{n}C_{k} = (\binom{n}{k}) = \frac{n!}{k! (n - k)!}$ (I've stripped most of the neatening whitespace from that code for compactness while I'm editing but it doesn't make it any the more readable. That's not actually LibreOffice code, but from some other source. LibreOffice has some "semantics" sections too, which try to make the logic of the expression available to machine tools, rather than concentrating on the presentation aspects which are here. But frankly, with the LibreOffice route, I don't really need to worry about that. I am developing a library od math snippets in /Study/Gnuplot_&_Maths, so I need to remember to dump the math there, once I've got it presentable.

The alternative to "inline" presentation like above (should be!) is "block" presentation, like this. (does this go outside the paragraph's closing brace, or inside? Try inside. $\int_{0}^{1} x^{x} ⅆ x = \sum_{n = 1}^{∞} {(- 1)}^{n + 1} n^{- n}$ It looks as if Blogger is tolerant of a block within a block like this. Which shouldn't surprise me.

BTW, this expression is the "Sophomore's Dream" because it makes integration easier, I think.

Writing MathMl from scratch is complex - you've got to build a semantic tree to express your expression, then read out the tree in an infix presentation. I remember doing that with storage of data in trees in CS2.0.1, and it was headache-inducing and prone to errors by hand. W3C recommend using tools to develop and produce MathML.

I'm not going to fight that.

Back to List.

Chemical structure presentation on web pages.

link

Having just had to paste a link to a Wikipedia SVG for a molecular structure (Luminol), I need to know about the Chemical equivalents to the mathematical expressions above. That's a new topic. I know there are such tools, because I've seen chemical expression manipulation programmes in the Linux package lists. Research to be done!

Wiki has a page on CML - Chemical Markup Language.

This page describes several different types of chemical representations. Their list is incomplete, and I indicate others :

Kekulé (a.k.a. Lewis) Structures - A Kekulé Formula or structural formula displays the atoms of the molecule in the order they are bonded. They don't say it, but with pipes and em-dashes you could build these with on a typewriter.
Condensed Formula -A condensed formula is made up of the elemental symbols. Condensed structural formulas show the order of atoms like a structural formula but are written in a single line to save space and make it more convenient and faster to write out. "CH₃CH₂OH", for example, complete with buggering around with sub tags.
Line Formula - Because organic compounds can be complex at times, line-angle formulas are used to write carbon and hydrogen atoms more efficiently by replacing the letter "C" with lines. Handling out-of-plane structures for steroisomers isn't covered, but really needs to be.
Space-filling models - constructed from the formula and interpretations for the electron clouds of average atoms and bonds. And lone pairs, and un-paired electrons.
Perspective views in a rotatable viewer.

What does wiki say on the subject? "Wikipedia:Manual of Style/Chemistry advises avoiding the tag chem and tag math chem markup methods when possible." These are derivatives of MathML. ... And then the only things they give as examples in the help files are tag chem objects. The Wiki Help Page talks mostly about using Tex outside the browser. Most of their examples for structures, they use images not a programmable markup. The Manual of Style isn't terribly helpful.

Here's a molecule display tool which understands 47 (if I counted right!) different molecular structure file formats. A lot of them are tied to particular imaging techniques, as if that helps. This doesn't bode well for finding a uniform molecular description language.

And that's as far as I've got. I've got other things to do.

MMMM Perhaps ... I should choose a phyllosilicate as an example. Such a mixture of covalent and ionic bonding should make life difficult in a world dominated by organic chemicals.

Blockquote

quote mark

P …

Back to List.

Problems with this site's configuration

For some reason my blockquote customisation is keeping the yellow overprint (good) but is putting the font size up a couple of notches.

The available options for "font-size:" include these "absolute" ones : "xx-small; , x-small; , small; , medium; , large; , x-large; , xx-large; xxx-large;" and these relative-size ones : "font-size: smaller; , larger;". So why isn't it working?

OK, I've found it. I'd put an example HTML comment in the "style" tag, which was breaking things. Hiding the HTML comment within an CSS comment (C-style) re-enabled the CSS header code.

So now, can I control the number of open tabs - say, one for Wiki, one for pages from my blog, and all the others create new tabs? That could get complicated, fast.

Back to List.

Using tooltips to display image ALT text.

link

I'd like to see what ALT text is associated with an image - part of checking that there is ALT text, for a start - so I need to put some CSS into IMG tags which will - any time an image is loaded - extract it's ALT data, put that into a tooltip (both of which are on W3Schools) and display the tooltip while mouse-hovering.

Back to List.

Article

link

Blockquote

quote mark

P …

Back to List.

Article

link

Blockquote

quote mark

P …

Back to List.

Article

link

Blockquote

quote mark

P …

Back to List.

End of Document
Back to List.

Footings

Blockquote

quote mark

P …

Tables & bits

Tables

Table with properties set - caption, width, border-style, border-width, border-coloUr, ... border-collapse, ...
Heading 1	Hdg 2	Heading 3
Row 1 CS 1 ; CP 11	R1 C2 CS 2; CP 3	R1 C3 CS 5 ; CP4
Row 2 CS 2 ; CP 12 …	R2 C2 CS 6; CP 6	R2 C3 CS 7 ; CP 8
Row 3 CS 3 ; CP 13	R3 C2 CS 9; CP 9	R3 C3 CS 9 ; CP 16

Sections
Heading
a
b
c …

Study Blog

2023-05-23

HTML notes

HTML Experimentations

Tooting

Mastodon Web toot version

Sengi App toot version.

Back to List.

Mathematics presentation on web pages.

Back to List.

Chemical structure presentation on web pages.

Back to List.

Problems with this site's configuration

Back to List.

Using tooltips to display image ALT text.

Back to List.

Article

Back to List.

Article

Back to List.

Article

Back to List.

End of Document
Back to List.

Footings

Tables & bits

Tables

No comments:

Post a Comment

Study Blog

2023-05-23

HTML notes

HTML Experimentations

Tooting

Mastodon Web toot version

Sengi App toot version.

Back to List.

Mathematics presentation on web pages.

Back to List.

Chemical structure presentation on web pages.

Back to List.

Problems with this site's configuration

Back to List.

Using tooltips to display image ALT text.

Back to List.

Article

Back to List.

Article

Back to List.

Article

Back to List.

End of Document Back to List.

Footings

Tables & bits

Tables

No comments:

Post a Comment

End of Document
Back to List.