The Wiert Corner – irregular stream of stuff

Jeroen W. Pluimers on .NET, C#, Delphi, databases, and personal interests

  • My badges

  • Twitter Updates

  • My Flickr Stream

  • Pages

  • All categories

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,860 other subscribers

Archive for the ‘HTML’ Category

Chrome Print dialogue not offering fit to page, landscape, other printing options ( I’m looking at you @OHRA )

Posted by jpluimers on 2021/12/08

Some sites manage to disable various printing options (including layout, so you cannot choose between landscape and portrait any more, or force landscape when portrait works better or vice versa).

Googling this got me into a web of things that didn’t help me (see links below), but those led me to this query [Wayback] chrome save as pdf layout missing portrait landscape – Google Search.

That returned a helpful result at [Archive.is/Wayback] Chrome Print dialogue not offering fit to page, landscape, other printing options – Google Chrome Community:

I found a solution.

1.  Install the Stylus Extension.
2.  Go into the Stylus extension and click on “Write new style”.
3.  Put the following code in:
​​​@page {
  size: auto;
}

4.  Give it a name (I called mine “Fix Orientation”) and save it.

5.  Reload the page you’re trying to print and the print dialogue should now have the “Layout” option and you should always get it for any page you print from now on.

It’s about the extension [Archive.is] Stylus – Chrome Web Store

Redesign the web with Stylus, a user styles manager. Stylus allows you to easily install themes and skins for many popular sites.

I reconfigured the OHRA Mijn Zorg site to force re-enabling of layout by adding @page { size: auto !important; } for https://mijn.ohrazv.nl/ (click the Save button to save this change permanently):

Read the rest of this entry »

Posted in Chrome, CSS, Development, Google, HTML, Power User, Software Development, Web Development | Leave a Comment »

The horrors of HTML email where there CSS

Posted by jpluimers on 2021/11/16

[Archive.is] Kat Maddox on Twitter: “Who’s the CEO of emails I need to talk to him… “:

This is why dreamweaver still exists.

[Archive.is] Kat Maddox on Twitter: “You don’t need a time machine to go back to the past. You just need to try to write HTML in emails. If I have to nest one more table, I’ll have gone back far enough to be able to warn people about the dot com bubble. Fuck it. I’m writing this newsletter in markdown”

Markdown with an HTML generator actually is quite a good way to get HTML emails going.

Another route is [Wayback] Foundation for Emails | A Responsive Email Framework from ZURB.

Oh remember this: [Archive.is] StuAngel on Twitter: “rule of thumb “the mail clients are about 5 years behind in HTML support” – that was like 10 years ago and they have never gotten any better… https://t.co/lVAW5YCubm”

–jeroen

Posted in Development, eMail, HTML, SocialMedia, Software Development, Web Development | Leave a Comment »

I love the way it shows “Duden Offline”

Posted by jpluimers on 2021/11/04

This does not happen often, and I found the way that [WayBack] Duden Offline is indicated hilarious!

It’s just a “basic” HTML page showing the meaning of “Wartung” (German word for Maintenance).

Duden is het German equivalent of the Oxford English Dictionary.

Not all of the huge site was gone. Part of the “Rechtschreibung” was still there, including the Wikipedia entry (:

I wonder what that one shows during maintenance (:

Links:

–jeroen

Read the rest of this entry »

Posted in CSS, Development, Fun, HTML, HTML5, Power User, Software Development, Web Development | Leave a Comment »

HTML cleanup tool & simplifier. For basic & clean HTML ðŸ”§

Posted by jpluimers on 2021/10/21

I have used other on-line HTML cleanup tools in the past (especially for including parts of web-pages in a blog post), but so far none beats HTML Washer: [Wayback] HTML cleanup tool & simplifier. For basic & clean HTML 🔧

An online tool that reduces HTML to basic tags and attributes. Removes scripts, CSS, and other non-basic elements like , , etc… Also, corrects errors and formats the HTML doc or a fragment.

–jeroen

Posted in Development, HTML, Power User, SocialMedia, Software Development, Web Development, WordPress | Leave a Comment »

Naughty naughty no alt: CSS style to clearly show which images lack an alt-text

Posted by jpluimers on 2021/10/05

The CSS from [WayBack/Archive.is] Naughty naughty no alt that shows the below red moving rendering of images that do not have an alt-text is simple:

Read the rest of this entry »

Posted in Bookmarklet, CSS, Development, HTML, HTML5, Power User, Software Development, Web Browsers, Web Development | Leave a Comment »

html – CSS Display an Image Resized and Cropped – Stack Overflow

Posted by jpluimers on 2021/08/25

[WayBack] html – CSS Display an Image Resized and Cropped – Stack Overflow (thanks [WayBack] roborourke!); see full answer link for runnable snippet and HTML (the WordPress editor keeps fucking up preformatted code blocks with html or XML in it).

You could use a combination of both methods eg.

    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }

You embed the img in a div with class .crop, or in-line the styles in the img and div tags.

--jeroen

 

Posted in CSS, Development, HTML, HTML5, SocialMedia, Software Development, Web Development, WordPress, WordPress | Leave a Comment »

html – How can I scale the content of an iframe? – Stack Overflow

Posted by jpluimers on 2021/08/19

I used [WayBack] html – How can I scale the content of an iframe? – Stack Overflow as starting point to scale some iframes.

In my case, I had to scale up (by a 25% so a factor 1.25) instead of scale down.

What I observed so far in recent Chrome versions is:

  1. The wrapping div is still needed, otherwise the outer size and inner size of the frame mismatches
  2. The wrapping div and the wrapped iframe need to have the same dimensions (so unlike the Stack Overflow answers, no need to scale the width/height of the div; keep the same values as the iframe)

The div uses class calendar_wrap.

The iframe uses class calendar_iframe.

This is part of my CSS:

body {
      margin: 0; /* override browser setting for body `margin: 8px;` */
      overflow: hidden; /* remove scroll bars; does not work for iframes  */
    }

    /* ... */

    iframe {
      border-width: 0; /* override browser setting for iframe `border-width: 2px; */
      height: 100vh;
      width:   50vw;
      overflow: hidden; /* remove scroll bars; does not work for iframes  */
    }

     /* wrap and iframe zoom as per https://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of-an-iframe */
    .calendar_wrap {
      float: left;

      height: 70vh;
      width:  35vw; /* calc(35vw / 1.25); */

      padding: 0;
      background-color: blue;
    }

    .calendar_iframe {
      float: left;

      width:  35vw;

      -ms-transform: scale(1.25);
      -moz-transform: scale(1.25);
      -o-transform: scale(1.25);
      -webkit-transform: scale(1.25);
      transform: scale(1.25);

      -ms-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }

    /* ... */

–jeroen

Posted in Chrome, CSS, Development, HTML, Power User, Software Development, Web Browsers, Web Development | Leave a Comment »

css color picker – Google Search

Posted by jpluimers on 2021/08/12

Probably old, but there is an embedded [WayBack] css color picker – Google Search that on each refresh switches colours:

–jeroen

Posted in Color (software development), CSS, Development, Google, GoogleSearch, HTML, Power User, Software Development, Web Development | Leave a Comment »

Simple iframe clock via Free Clocks for Your Website

Posted by jpluimers on 2021/08/11

Using [WayBack] Free Clocks for Your Website, I created this clock for a 1920×1080 web dashboard which is a web page hosted on [WayBack] raw.githack.com with an iframe hosted at www.timeanddate.com

I know that is a risk, but that is OK for now: that site has existed for a very long time and probably will last a while.

There is a truckload of options you can use, despite the clock being simple. Luckily the [WayBack] FAQ: Free Clocks for Your Website explains these options.

This is the gist of the above “this clock” page:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<style type="text/css">
body {
margin: 0; /* override browser setting for body `margin: 8px;` */
overflow: hidden; /* remove scroll bars; does not work for iframes */
}
.box {
float: left;
width: 100vw; /* Firefox/Chrome outside Mac OS X: force viewport-width */
overflow: hidden; /* remove scroll bars; does not work for iframes */
background-color: azure;
}
iframe {
border-width: 0; /* override browser setting for iframe `border-width: 2px; */
height: 100vh;
width: 50vw;
}
.clock_iframe {
float: right;
height: 30vh;
width: 16vw;
}
</style>
<title>Clock in frame</title>
</head>
<body>
<div class="box">
<iframe class="clock_iframe" src="https://freesecure.timeanddate.com/clock/i6xvy9ve/n16/szw300/szh300/hoc000/cf100/hgr0/fiv0/fas34/fdi74/mqv0/mhc000/mhs3/mhl20/mhw1/mhd84/mmv0/hhs1/hms1/hsc000/hss1&quot; frameborder="0" width="300" height="300">
<!– https://www.timeanddate.com/clocks/free.html –>
</iframe>
</div
</body>
</html>

–jeroen

Posted in CSS, Development, HTML, Power User, Software Development, Web Development | Leave a Comment »

HTML Div Table – Online Tools

Posted by jpluimers on 2021/02/02

[WayBack] HTML Div Table – Online Tools:

Free online tools to make Div Table composing a piece of cake! HTML table generator and converter with interactive source editor and much more!

I hope this still exists, as the first time it helped me convert HTML table based tables to div based tables.

They had these tools back then:

  • [WayBack] HTML Div Table Generator

    Generate HTML Div table grids for websites in just a few easy steps. Set the options then select the desired size. Adjust the options in the interactive editors

  • [WayBack] HTML Table to Div Converter

    Transform traditional HTML Tables to Div Tables. Copy and convert any visual table document to Div tables with a simple click of a button

  • [WayBack] HTML Table Styler 📅 CSS Generator

    Free online interactive HTML Table and structured div grid styler and code generator. Select a style from the gallery and adjust the settings to get the HTML and CSS codes.

–jeroen

Posted in Development, HTML, Software Development, Web Development | Leave a Comment »