Archive for the ‘HTML’ Category
Posted by jpluimers on 2025/07/24
Very cool web site that I only discovered last year, with the clever name: [Wayback/Archive] Wakamai Fondue, the tool that answers the question “what can my font do?”
Drop a font!
Fonts aren’t uploaded,
they stay on your computer
Back then I used it to investigate some properties of SMuFL (Standard Music Font Layout) fonts as sometimes editing a PDF is easier than manually entering/transcribing it in MuseScore.
Of course you can use local font tools, but this is far easier for occasional use.
The beta can do even more at the risk of bumping into bugs: [Wayback/Archive] Wakamai Fondue, the tool that answers the question “what can my font do?”
Note the colour matching of the text around the circle with the fondue background image.
Oh: it is open source too, written mainly in JavaScript, CSS and a tiny bits of HTML and Python, based on Vue.js and npm, and available as parts in the repositories of [Wayback/Archive] Wakamai Fondue · GitHub:
Read the rest of this entry »
Posted in CSS, Development, Font, HTML, JavaScript/ECMAScript, npm, Python, Scripting, Software Development, Vue.js, Web Development | Leave a Comment »
Posted by jpluimers on 2025/07/10
Not being a front-end web-developer, I hadn’t seen¹ the figure element in HTML code before, so here are some links:
TL;DR – figure it is like a div element, but context specific: it groups elements that logically for one figure, including an optional description in the figcaption.
The group can be moved outside the main content flow without changing the meaning of that flow.
Query: [Wayback/Archive] what is a html figure for – Google Search
--jeroen
¹ I surely am not the only one, as the figure element isn’t even on the element usage graph in the [Wayback/Archive] HTML Study – AWR SEO Guide.
Posted in Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2025/06/05
For a, I wanted to a HTML ul list the SQL keywords in multiple columns I was afraid this would be a tough CSS job, but in practice it was way easier than even explained in the below Stack Overflow answers that made me find
[Wayback/Archive] columns – CSS: Cascading Style Sheets | MDN
The columns [Wayback/Archive] CSS shorthand property sets the number of columns to use when drawing an element’s contents, as well as those columns’ widths.
TL;DR:
- I used
<ul style="columns:3">...</ul>
- For setting column width, this failed in Chrome
<ul style="column-count: 2; column-width: 15em;">...</ul>
but this worked: <ul style="column-count: 2; width: 480px;">...</ul>
Here are the answers:
Read the rest of this entry »
Posted in Conference Topics, Conferences, CSS, Development, Event, HTML, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2025/03/05
I originally searched for the tables below to see if I could get the visualisations of TeX and LaTeX right for infinite loop in “LaTeX: A Document Preparation System” by Leslie Lamport, printed in 1994..
Didn’t work, neither did using plain html super and subscript. The only thing that worked was using CSS styles (I chose to embed them, as separate CSS files are a huge premium over the WordPress plan), which also preserves actual meaning for screen readers:
Read the rest of this entry »
Posted in accessibility (a11y), CSS, Development, HTML, Power User, Software Development, Unicode, URL Encoding, User Experience (ux), Web Development | Leave a Comment »
Posted by jpluimers on 2025/02/18
It’s almost
Goal of the current post amend the above posts with information so I can later write a bookmarklet or web-page with JavaScript that – from a x.com or twitter.com – tweet URL can get the JSON, then the images and/or videos in all sizes, then generate a web-page from it for Wayback Machine archival.
Read the rest of this entry »
Posted in Development, HTML, JavaScript/ECMAScript, Scripting, SocialMedia, Software Development, Twitter, Web Development | Tagged: 128, 32392, 7473, 7476, LaTeX | Leave a Comment »
Posted by jpluimers on 2025/01/29
Posted in Blogging, BlueSky, Development, Fediverse, HTML, Mastodon, Python, Scripting, SocialMedia, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2024/12/31
A while ago, browser tabs were overflowing again so I first mad the list of links with quotes below, then discovered there is a template for many browser tabs open at [Wayback/Archive] To many browser tabs open Meme Generator – Imgflip
One of the reasons is that the WordPress “Press This” bookmarklet is very slow and also flaky at escaping HTML (for instance the below html – Why shouldn’t &apos; be used to escape single quotes? – Stack Overflow sometimes becomes html – Why shouldn’t <code>'</code> be used to escape single quotes? – Stack Overflow in [Wayback/Archive] Press This – WordPress plugin | WordPress.org especially when running it from Archive Today archived pages).
So here we go: Read the rest of this entry »
Posted in Bookmarklet, Development, HTML, HTML5, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Browsers, Web Development | Leave a Comment »
Posted by jpluimers on 2024/12/17
Finally an easier way to convert Office documents (and other formats) to markdown: [Wayback/Archive] GitHub – microsoft/markitdown: Python tool for converting files and office documents to Markdown. (after Google added a Markdown export feature to Google Docs about half a year ago, and basic Markdown formatting about 2 years ago – see below):
There are quite a few dependencies in [Wayback/Archive] markitdown/pyproject.toml at main · microsoft/markitdown · GitHub, so be prepared for that.
Supported formats (added links for clarity):
The MarkItDown library is a utility tool for converting various files to Markdown (e.g., for indexing, text analysis, etc.)
It presently supports:
- PDF (.pdf)
- PowerPoint (.pptx)
- Word (.docx)
- Excel (.xlsx)
- Images (EXIF metadata, and OCR)
- Audio (EXIF metadata, and speech transcription)
- HTML (special handling of Wikipedia, etc.)
- Various other text-based formats (csv, json, xml, etc.)
Google was first though:
- [Wayback/Archive] Google Workspace Updates: Compose with Markdown in Google Docs on web
- [Wayback/Archive] Google Workspace Updates: Import and export Markdown in Google Docs
There is speculation on why Microsoft introduced it just now ranging from “they need it for AI training” to “just late to the game”. I’m with the latter. Apple is even later, so if you want to convert Apple Notes to markdown, then you can use [Wayback/Archive] Import from Apple Notes – Obsidian Help.
Via various sources, including:
Read the rest of this entry »
Posted in CSV, Development, Excel, HTML, HTML5, JSON, Lightweight markup language, MarkDown, Office, PDF, Power Point, Power User, Software Development, Word, XML/XSD | Tagged: MarkDown, Python | Leave a Comment »
Posted by jpluimers on 2024/12/17
Probably not fully the direction I need to search to (main goal is to interactively edit img tag attributes (basic and style) to manipulate the appearance of pictures in my blog), but should do for now:
Read the rest of this entry »
Posted in Bookmarklet, CSS, Development, HTML, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Browsers, Web Development | Leave a Comment »
Posted by jpluimers on 2024/12/11
[Wayback/Archive] How To Scale and Crop Images with CSS object-fit | DigitalOcean helped me to crop the picture in Florian Haas on Twitter: alias kubectl=”TZ=Etc/UTC kubectl”; You’re welcome.
The picture itself is 800 * 800 pixels (width * height), but the interesting bits are 400 * 200 around the center. Also it is a lot larger than I wanted.
So I embedded it using this HTML
<img class="alignnone size-full" style="width: 200px; height: 100px; object-fit: cover; object-position: 0 50%;" src="https://archive.ph/frSNu/0f0ebeeb5a4edf048577be89adb866344b303394.jpg" alt="" />
The width made it 25% the original size (because of [Wayback/Archive] object-fit value cover), and half the height so I had to move the [Wayback/Archive]object-position up 50%.
I found this via [Wayback/Archive] image inline css to crop top and bottom – Google Search.
That also found [Wayback/Archive] html – while display image crop Top and Bottom of image using css – Stack Overflow with an example at [Wayback/Archive] Edit fiddle – JSFiddle – Code Playground which is similar to the above solution.
--jeroen
Posted in CSS, Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »
The Wiert Corner - irregular stream of stuff 