in-browser-notepad

refresh page

∕∖ /\ ╱ ╲ ◯ ● ⏺ • · ⏹ ⬝ 🢒 ⋮ ⋯ ⋰ ⋱ 𝜙≈1.6180339887… 𝛼 𝛽 𝛾 𝛿 𝜀 𝜃 𝜅 𝜆 𝜇 𝜋 𝜌 𝜎 𝜏 𝜑 𝜒 𝜓 𝜔=𝖽𝜽∕𝖽𝘵
←(&#x2190;, &larr;) ↑(&#x2191;, &uarr;) → ↓ ↔ ↕ ↖ ↗ ↘ ↙(&#x2199;) wide: 🡐 🡑 🡒 🡓 🡔 🡕 🡖 🡗 🡘 🡙

Print styles for web console editing - use more "!important"s if needed

+---------------------------------------------------+
| Explanatory note (foot-, end-, content-,...):     |
+---------------------------------------------------+

Inline number for note goes after -- & no space between -- the nearest, next punctuation mark (if long dash, number goes before).
E.g. after comma: "if this",<sup><b>[1]</b></sup> (...)
E.g. after period: (...) "then that".<sup><b>[1]</b></sup>

1) citation for electronic, online reference work:
<p style="margin-top: -8px; padding: 5px; border-top: 1px solid #888; font-size: 15px!important; line-height: 1.3!important;">
<sup><b>[1]</b></sup> author, "articlename", <em>source</em> (issue, date), p. 20. Online: 
</p>

2) citation for hardcopy reference work:
<sup><b>[1]</b></sup> Henry A. Giroux, <em>Education and the Crisis of Public Values, 2nd edition</em> (New York: Peter Lang, 2015).

+---------------------------+
| Citation block            |
+---------------------------+

<span style="display:block;margin:0 0 25px;padding:5px;font-family:arial,helvetica,sans-serif;font-size:13px;line-height:1.2;border:1px dashed #bbb;">
Author. (Date).  Title.  <span style="font-style:italic;">Source</span>.
Retrieved </span>

Internet Archive-retrieved source? Try this:
<span style="display:block;margin:0 0 25px;padding:5px;font-family:arial,helvetica,sans-serif;font-size:13px;line-height:1.2;border:1px dashed #bbb;">
Author. (Date).  Title.  <span style="font-style: italic;">Source</span>.  Retrieved _dayMonthYear from the <span style="font-style: italic;">Internet Archive</span>: url (_dayMonthYear).
</span>

+---------+
| Images  |
+---------+

(1) Base64-encode/decode

Online encoders (and decoders):
a) base64.guru/converter/encode/image <--local & online imgs, all file types)
b) www.askapache.com/online-tools/base64-image-converter <--local & online imgs, jpg & png only(?)
c) codebeautify.org/image-to-base64-converter <--local imgs only
d) www.base64-image.de <--local imgs only
e) search for "image to base 64", "base 64 image converter", "base 64 image encoder decoder", ...

Example 1: converted .jpg inserted inline:
	<img src='data:image/jpeg;base64,pwZ2Y+Cjwvc3ZnPgo=' />

Example 2: converted .png as background-image for some .box:
	.box { background-image: url('data:image/png;base64,pwZ2Y+Cjwvc3ZnPgo='); background-repeat: no-repeat; }

...(\1)

(2) Full-width textbox, image centered:

<div class="wrapLg">
<img src="" class="imgLg">
<div class="captionLg">
Caption
</div>
</div>

...(\2)

(3) Float-right textbox, image full-width:

<div class="wrapSm">
<img src="" class="imgLg">
<div class="captionSm">
Caption
</div>
</div>

...(\3)

(4) Full-width textbox, image float-right (inline css):

<span style="display: block; overflow: auto; width: 100%; height: auto; margin: 0 0 10px; padding: 5px; font-family: arial,sans-serif; font-size: 14px; line-height: 1.3; border: 1px solid #999; border-radius: 2px;">
<img src="" alt="" style="display: block; float: left; margin: 0 10px 10px 0; width: 100px; height: auto;">
Author. (Date).  Title.  <span style="font-style: italic;">Source</span>.  Retrieved from 
</span>

...(\4)

+---------------------------+
| Videos                    |
+---------------------------+

Most times, it's best to replace the embedded video with its splash image & add a link to the video in a caption:

<span style="display:block;break-inside:avoid;margin:20px auto;padding:0;width:480px;height:auto;font-family:verdana,sans-serif!important;font-size:14px !important;line-height:1.3 !important;">
<img src="https://img.youtube.com/vi/0123456789a/0.jpg" alt="" style="display:block;width: 100%;height:auto;margin: 0;padding:0;">
[Embedded YouTube video: "<a href="https://www.youtube.com/watch?v=0123456789a">Title</a>", 5:00-min.]
</span>

A quicker way that doesn't use an image:

<span style="display: block; margin: 20px 0; padding: 5px; font-size: 15px; line-height: 1.3; background-color: #f5f5f5; border: 1px solid #d8d8d8;">
[Embedded video, "Title" (5:00-min.), is here in this page online and on <a href="https://www.youtube.com/watch?v=0123456789a">YouTube here</a>]
</span>

+---------------------------+
| Links                     |
+---------------------------+

+---------------------------+
| Fonts                     |
+---------------------------+