Difference between revisions of "Sandbox"
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]] :: [[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;> </span><span style="background:#ffffcc;> </span><span style="background:#ffe6cc;> </span><span style="background:#ffb3b3;> </span> | ||
+ | <font size="1"><span style="background:#e6ffcc;> </span><span style="background:#ffffcc;> </span><span style="background:#ffe6cc;> </span><span style="background:#ffb3b3;> </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"> </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--> </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: | + | | style="background:#b3d1ff; valign:top; padding:10px;" | <font color="#ffffff"><!--2--> </font> |
− | | style="background:#f0f0f0; width:100%" || | + | | 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 - सामान्य आदेश | ||
+ | |||
+ | Compare: | ||
+ | |||
+ | (1) common commands - सामान‍य - &#x200D;<br /> | ||
+ | (2) common commands - सामान॰य - &#x0970;<br /> | ||
+ | (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 | ||
+ | |||
+ | <!-- 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
2021-10-07 - Starting page for local wiki syntax and formatting experimentation.
Contents
^ 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 tablecell 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 tablecell 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 tablecell 2 - |
^ Wiki document section 2 also within tablecell 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:
- 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 - सामान्य आदेश
Compare:
(1) common commands - सामानय - ‍
(2) common commands - सामान॰य - ॰
(3) common commands - सामान्य - ् 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: