Difference between revisions of "Sandbox"

From Wiki at Neela Nurseries
Jump to: navigation, search
m (^ Wiki page section with background color highlighting)
m (^ Unicode text: - correct final glyph.)
 
(54 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
<center>
 +
[[css_elements|CSS elements]] &nbsp; :: &nbsp; [[sandbox|NN sandbox]]
 +
</center>
  
 
2021-10-07 - Starting page for local wiki syntax and formatting experimentation.
 
2021-10-07 - Starting page for local wiki syntax and formatting experimentation.
  
 
<!-- comment -->
 
<!-- comment -->
 +
 +
<span style="background:#e6ffcc;> &nbsp; &nbsp; &nbsp; </span><span style="background:#ffffcc;> &nbsp; &nbsp; &nbsp; </span><span style="background:#ffe6cc;> &nbsp; &nbsp; &nbsp; </span><span style="background:#ffb3b3;> &nbsp; &nbsp; &nbsp; </span> &nbsp;
 +
<font size="1"><span style="background:#e6ffcc;>&nbsp;</span><span style="background:#ffffcc;>&nbsp;</span><span style="background:#ffe6cc;>&nbsp;</span><span style="background:#ffb3b3;>&nbsp;</span></font>
  
 
== [[#top|^]] Wiki page section with background color highlighting ==
 
== [[#top|^]] Wiki page section with background color highlighting ==
  
{|-
+
Following wiki table syntax and example is an effort to make dynamic notes page mark-able in a visual, highlight way to quickly indicate sections having differing attributes.  The table cells provide color coding opportunity, given that each table cell may have its background color set to a given color.
 +
 
 +
Example 1 - table, single row two columns:
 +
 
 +
{|- style="cellpadding=30px;"
 +
|-
 +
| style="background:#e6ffcc; valign=top; padding:10px;" | <font color="#ffffff">1</font>
 +
| style="background:#f0f0f0; width:100%; padding:10px;" | cell 2 - Wiki table syntax wants one pipe symbol '&pipe;' to begin the first cell of a given table row, and two pipes '&pipe;&pipe;' between adjacent row cells whose formatting follows prior cell formatting.<br /> <br />A related task to creating formatted tables involves color selection.  W3C Schools has a [https://www.w3schools.com/colors/colors_picker.asp good HTML color picker] on their site.
 +
|}
 +
 
 +
Example 2 - table, two rows two columns:
 +
 
 +
{|- style="cellpadding=30px;"
 +
|-
 +
| style="background:#e6ffcc; valign:top; padding:10px;" | <font color="#ffffff">1</font>
 +
| style="background:#f0f0f0; width:100%; padding:10px;" | cell 2 - Content here in this wiki page section is up-to-date, indicated by green band (table cell) to the left.
 +
|-
 +
| style="background:#ffb3b3; valign:top; padding:10px;" | <font color="#ffffff">&nbsp;</font>
 +
| style="background:#f0f0f0; width:100%; padding:10px;" | cell 4 - Alternate colors left of doc sections can indicate parts of the document out-of-date, incomplete or needing other attention and or review.  By the way <span style="background:#ffe6cc;">a nice orange color is given by #ffe6cc;</span>.
 +
|}
 +
 
 +
== [[#top|^]] Wiki table syntax with edit blocks ==
 +
Example 3 - more a test, how does this table idea work with wiki editable document sections? . . .
 +
 
 +
{|- style="cellpadding=30px;"
 +
|-
 +
| style="background:#b3d1ff; padding:10px;" | <font color="#ffffff">1</font><!-- vertical-align:top; -->
 +
| style="background:#f0f0f0; width:100%; padding:10px;" |
 +
=== [[#top|^]] Wiki document section within table ===
 +
cell 2 - Content here in this wiki page section is up-to-date, indicated by green band (table cell) to the left.
 +
|-
 +
| style="background:#b3d1ff; vertical-align:top; padding:10px;" | <font color="#ffffff"><!--2-->&nbsp;</font>
 +
| style="background:#f0f0f0; width:100%; padding:10px;" |
 +
 
 +
=== [[#top|^]] Wiki document section 2 also within table ===
 +
cell 4 - Alternate colors left of doc sections can indicate parts of the document out-of-date, incomplete or needing other attention and or review.
 +
|}
 +
 
 +
Table with less content for copy and paste ease:
 +
{|- style="cellpadding=30px;"
 +
|-
 +
| style="background:#b3d1ff; valign:top; padding:10px;" | <font color="#ffffff">1</font>
 +
| style="background:#f0f0f0; width:100%; padding:10px;" |
 +
=== [[#top|^]] Wiki document section within table ===
 +
cell 2 -
 
|-
 
|-
| style="background:purple;" || cell 1
+
| style="background:#b3d1ff; valign:top; padding:10px;" | <font color="#ffffff"><!--2-->&nbsp;</font>
| style="background:#f0f0f0; width:100%" || cell 2 - entire paragraphs of content here.
+
| style="background:#f0f0f0; width:100%; padding:10px;" |
-}
+
=== [[#top|^]] Wiki document section 2 also within table ===
 +
cell 4 -
 +
|}
 +
 
 +
 
 +
Wiki syntax block for copy-and-paste purposes:
 +
 
 +
Simple table with no Wiki document sections, just text and user content:
 +
 
 +
<pre>
 +
{|- style="cellpadding=30px;"
 +
|-
 +
| style="background:#e6ffcc; valign:top; padding:10px;" | <font color="#ffffff">1</font>
 +
| style="background:#f0f0f0; width:100%; padding:10px;" | *** Your wiki page section content here ***
 +
|}
 +
</pre>
 +
 
 +
Wiki table with Wiki document sections
 +
 
 +
<!-- <i>( stub section )</i> -->
 +
 
 +
<!-- comment -->
 +
 
 +
== [[#top|^]] Copy and Paste Blocks ==
 +
 
 +
<pre>
 +
 
 +
{|- style="cellpadding=30px;"
 +
|-
 +
| style="background:#ffffcc; valign=top; padding:10px;" | <font color="#ffffff"></font>
 +
| style="background:#f0f0f0; width:100%; padding:10px;" |
 +
== [[#top|^]] Overview ==
 +
<i>Overview content . . .</i>
 +
 
 +
|-
 +
| style="background:#f0f0f0; valign=top; padding:10px;" | <font color="#ffffff"></font> <!-- vertical spacing row -->
 +
| style="background:#f0f0f0; width:100%; padding:10px;" |
 +
|-
 +
| style="background:#e6ffcc; valign=top; padding:10px;" | <font color="#ffffff"></font>
 +
| style="background:#f0f0f0; width:100%; padding:10px;" |
 +
== [[#top|^]] Section 2 ==
 +
<i>Section 2 content . . .</i>
 +
 
 +
|-
 +
| style="background:#f0f0f0; valign=top; padding:10px;" | <font color="#ffffff"></font> <!-- vertical spacing row -->
 +
| style="background:#f0f0f0; width:100%; padding:10px;" |
 +
|-
 +
| style="background:#e6ffcc; valign=top; padding:10px;" | <font color="#ffffff"></font>
 +
| style="background:#f0f0f0; width:100%; padding:10px;" |
 +
== [[#top|^]] Section 3 ==
 +
<i>Section 3 content . . .</i>
 +
 
 +
|}
 +
</pre>
 +
 
 +
 
 +
<!-- comment -->
 +
 
 +
== [[#top|^]] Mediawiki Sidebar experiments ==
 +
 
 +
Note Mediawiki sidebar mark up is interpreted in a manner that flattens or disables in-line CSS and other HTML formatting.  Unsure whether there is a work-around for this.
 +
<!--
 +
* Local annotations
 +
** sandbox|</pre><span style="background-color:#e6ffcc;">#e6ffcc</span>
 +
** sandbox|<span style="background-color:#fbff93;">yellow</span>  <! -- #efbff9 purple -- >
 +
** sandbox|<span style="background-color:#ffe6cc;">orange</span>
 +
** sandbox|<span style="background-color:#ffb3b3;">red</span>
 +
-->
 +
 
 +
<!-- comment -->
 +
 
 +
== [[#top|^]] Unicode text ==
 +
 
 +
Devanagari unicode info here:
 +
 
 +
*  https://www.anirdesh.com/gujarati/hindi-unicode.php
 +
*  https://codepoints.net/devanagari
 +
*  http://www.unicode.org/charts/PDF/U0900.pdf
 +
 
 +
- 2024-02-21 -
 +
 
 +
common commands - &#x0938;&#x093E;&#x092E;&#x093E;&#x0928;&#x094D;&#x092F; &#x0906;&#x0926;&#x0947;&#x0936;
 +
 
 +
Compare:
 +
 
 +
(1) common commands - &#x0938;&#x093E;&#x092E;&#x093E;&#x0928;&#x200D;&#x092F; - &amp;#x200D;<br />
 +
(2) common commands - &#x0938;&#x093E;&#x092E;&#x093E;&#x0928;&#x0970;&#x092F; - &amp;#x0970;<br />
 +
(3) common commands - &#x0938;&#x093E;&#x092E;&#x093E;&#x0928;&#x094D;&#x092F; - &amp;#x094D; for Devanagari sign `virama` suppresses inherent vowel
 +
 
 +
Phrase `git commit message` takes what appears to be always a verb, 'to commit' and makes this word into a noun. Google translate shows no such noun in its translations of `git commit message` into its understanding of the language of Hindi.  A semantic near translation is 'git committed message'.
 +
 
 +
git commited message - &#x092A;&#x094D;&#x0930;&#x0924;&#x093F;&#x092C;&#x0926;&#x094D;&#x0927;
 +
 
 +
(1) git commited message
 +
 
 +
<!-- odne komentar -->
 +
 
 +
== [[#top|^]] Text Formatting ==
 +
 
 +
*  https://www.w3schools.com/css/css_font_size.asp
 +
<!-- odne komentar -->
 +
 
 +
== [[#top|^]] References ==
 +
 
 +
HTML color pickers:
 +
*  https://www.w3schools.com/colors/colors_picker.asp
 +
 
 +
HTML cell padding attribute and related:
 +
*  https://www.quackit.com/css/css_cellpadding.cfm
 +
*  https://www.quackit.com/css/inline_style_sheets.cfm
 +
 
 +
*  https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellpadding
 +
 
 +
*  https://stackoverflow.com/questions/31395859/background-color-of-table-cells-using-css-and-html
 +
 
  
 
<!-- comment -->
 
<!-- comment -->

Latest revision as of 20:29, 28 February 2024

CSS elements   ::   NN sandbox

2021-10-07 - Starting page for local wiki syntax and formatting experimentation.


                              

^ Wiki page section with background color highlighting

Following wiki table syntax and example is an effort to make dynamic notes page mark-able in a visual, highlight way to quickly indicate sections having differing attributes. The table cells provide color coding opportunity, given that each table cell may have its background color set to a given color.

Example 1 - table, single row two columns:

1 cell 2 - Wiki table syntax wants one pipe symbol '&pipe;' to begin the first cell of a given table row, and two pipes '&pipe;&pipe;' between adjacent row cells whose formatting follows prior cell formatting.

A related task to creating formatted tables involves color selection. W3C Schools has a good HTML color picker on their site.

Example 2 - table, two rows two columns:

1 cell 2 - Content here in this wiki page section is up-to-date, indicated by green band (table cell) to the left.
  cell 4 - Alternate colors left of doc sections can indicate parts of the document out-of-date, incomplete or needing other attention and or review. By the way a nice orange color is given by #ffe6cc;.

^ Wiki table syntax with edit blocks

Example 3 - more a test, how does this table idea work with wiki editable document sections? . . .

1

^ Wiki document section within table

cell 2 - Content here in this wiki page section is up-to-date, indicated by green band (table cell) to the left.

 

^ Wiki document section 2 also within table

cell 4 - Alternate colors left of doc sections can indicate parts of the document out-of-date, incomplete or needing other attention and or review.

Table with less content for copy and paste ease:

1

^ Wiki document section within table

cell 2 -

 

^ Wiki document section 2 also within table

cell 4 -


Wiki syntax block for copy-and-paste purposes:

Simple table with no Wiki document sections, just text and user content:

{|- style="cellpadding=30px;"
|-
| style="background:#e6ffcc; valign:top; padding:10px;" | <font color="#ffffff">1</font>
| style="background:#f0f0f0; width:100%; padding:10px;" | *** Your wiki page section content here ***
|}

Wiki table with Wiki document sections


^ Copy and Paste Blocks


{|- style="cellpadding=30px;"
|-
| style="background:#ffffcc; valign=top; padding:10px;" | <font color="#ffffff"></font>
| style="background:#f0f0f0; width:100%; padding:10px;" |
== [[#top|^]] Overview ==
<i>Overview content . . .</i>

|-
| style="background:#f0f0f0; valign=top; padding:10px;" | <font color="#ffffff"></font> <!-- vertical spacing row -->
| style="background:#f0f0f0; width:100%; padding:10px;" |
|-
| style="background:#e6ffcc; valign=top; padding:10px;" | <font color="#ffffff"></font>
| style="background:#f0f0f0; width:100%; padding:10px;" |
== [[#top|^]] Section 2 ==
<i>Section 2 content . . .</i>

|-
| style="background:#f0f0f0; valign=top; padding:10px;" | <font color="#ffffff"></font> <!-- vertical spacing row -->
| style="background:#f0f0f0; width:100%; padding:10px;" |
|-
| style="background:#e6ffcc; valign=top; padding:10px;" | <font color="#ffffff"></font>
| style="background:#f0f0f0; width:100%; padding:10px;" |
== [[#top|^]] Section 3 ==
<i>Section 3 content . . .</i>

|}


^ Mediawiki Sidebar experiments

Note Mediawiki sidebar mark up is interpreted in a manner that flattens or disables in-line CSS and other HTML formatting. Unsure whether there is a work-around for this.


^ Unicode text

Devanagari unicode info here:

- 2024-02-21 -

common commands - सामान्य आदेश

Compare:

(1) common commands - सामान‍य - &#x200D;
(2) common commands - सामान॰य - &#x0970;
(3) common commands - सामान्य - &#x094D; for Devanagari sign `virama` suppresses inherent vowel

Phrase `git commit message` takes what appears to be always a verb, 'to commit' and makes this word into a noun. Google translate shows no such noun in its translations of `git commit message` into its understanding of the language of Hindi. A semantic near translation is 'git committed message'.

git commited message - प्रतिबद्ध

(1) git commited message


^ Text Formatting

^ References

HTML color pickers:

HTML cell padding attribute and related: