Theming http://drupal8.ovh/en/tags/theming en FormattableMarkup : Add parameters, links to a text, table cell data. http://drupal8.ovh/en/tutoriels/359/formattablemarkup-add-parameters-links-text-table-cell-data <span class="field field--name-title field--type-string field--label-hidden">FormattableMarkup : Add parameters, links to a text, table cell data.</span> <div class="clearfix text-formatted field field--name-field-question field--type-text-long field--label-above"> <div class="field__label">Question</div> <div class="field__item"><p>How to create a  dynamic text to add a parameter or link ?<br /> How to add a link to a table particular column ?</p> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Mon, 01/22/2018 - 12:15</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><h2>Create a <span lang="en" xml:lang="en" xml:lang="en"><span>customizable text</span></span>.</h2> <p>Example :<br /><code>use Drupal\Component\Render\FormattableMarkup;<br /> $text = new FormattableMarkup('My name is @name', ['@name' =&gt; "The name"]);</code></p> <h2>Theme table row to link particular column data.</h2> <p>Example:<br /><code>use Drupal\Component\Render\FormattableMarkup;<br /> $rows[] = [<br /> 'data' =&gt; [<br />   'name' =&gt; new FormattableMarkup('&lt;a href=":link"&gt;@name&lt;/a&gt;', [':link' =&gt; $url, '@name' =&gt; $name]),<br />   'mail' =&gt; $row-&gt;mail,<br /> ]];</code></p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/drupal-8" hreflang="en">Drupal 8</a></li> <li><a href="/en/tags/code" hreflang="en">Code</a></li> <li><a href="/en/tags/theming" hreflang="en">Theming</a></li> </ul> </div> <div class="field field--name-field-related-contents field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/en/tutoriels/237/create-html-table-render-and-theming" hreflang="en">Create HTML Table. render and theming</a></div> <div class="field__item"><a href="/en/tutoriels/230/drupal-8-s-elements-render-and-themes" hreflang="en">Drupal 8&#039;s HTML elements render and themes</a></div> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=359&amp;2=comment&amp;3=comment" token="tEG0S_1z3pA7QLXoqopgLfK0sCHYy10HRfnRF1mYaZQ"></drupal-render-placeholder> </section> Mon, 22 Jan 2018 11:15:45 +0000 editor 359 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/359/formattablemarkup-add-parameters-links-text-table-cell-data#comments CSS Fluid Width Video http://drupal8.ovh/en/tutoriels/334/css-fluid-width-video <span class="field field--name-title field--type-string field--label-hidden">CSS Fluid Width Video</span> <div class="clearfix text-formatted field field--name-field-question field--type-text-long field--label-above"> <div class="field__label">Question</div> <div class="field__item"><p>How to set width of a youtube video automaticly ?</p> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/nuwantha" typeof="schema:Person" property="schema:name" datatype="">nuwantha</span></span> <span class="field field--name-created field--type-created field--label-hidden">Mon, 07/24/2017 - 23:43</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Example :</p> <p><code>&lt;div class="video-content"&gt;<br />     &lt;!-- YouTube video code--&gt;<br />     &lt;iframe width="560" height="349" src="http://www.youtube.com/embed/THEVIDEOID" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;<br /> &lt;/div&gt;</code></p> <p><code>.video-content {<br />   position: relative;<br />   padding-bottom: 56.25%; /* 16:9 */<br />   padding-top: 25px;<br />   height: 0;<br />   iframe {<br />     position: absolute;<br />     height: 100%;<br />     top: 0;<br />     left: 0;<br />     width: 100% !important;<br />     height: 100% !important;<br />   }<br /> }</code></p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/css" hreflang="en">CSS</a></li> <li><a href="/en/tags/theming" hreflang="en">Theming</a></li> </ul> </div> <div class="field field--name-field-related-contents field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/en/tutoriels/22/add-css-to-a-module" hreflang="en">Add CSS stylesheets to a module</a></div> <div class="field__item"><a href="/en/tutoriels/264/basic-css-styling-tips" hreflang="en">Basic CSS Styling tips</a></div> <div class="field__item"><a href="/en/tutoriels/172/sass-scss-compile" hreflang="en">SASS SCSS LESS compile</a></div> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title">Comments</h2> <a id="comment-347"></a> <article role="article" data-comment-user-id="0" about="/en/comment/347" typeof="schema:Comment" class="comment js-comment by-anonymous clearfix"> <span class="hidden" data-comment-timestamp="1500967491"></span> <footer class="comment__meta"> <article typeof="schema:Person" about="/index.php/user/0" class="profile"> </article> <p class="comment__author"><span rel="schema:author"><span lang="" typeof="schema:Person" property="schema:name" datatype="">good (not verified)</span></span> </p> <p class="comment__time">Tue, 07/25/2017 - 09:24 <span property="schema:dateCreated" content="2017-07-25T07:24:51+00:00" class="rdf-meta hidden"></span> </p> <p class="comment__permalink"><a href="/en/comment/347#comment-347" hreflang="en">Permalink</a></p> </footer> <div class="comment__content"> <h3 property="schema:name" datatype=""><a href="/en/comment/347#comment-347" class="permalink" rel="bookmark" hreflang="en">good</a></h3> <div property="schema:text" class="clearfix text-formatted field field--name-comment-body field--type-text-long field--label-hidden field__item"><p>hello</p> </div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=347&amp;1=default&amp;2=en&amp;3=" token="7OFUFKOcH1ula_DefNNwcVgmUuDhk0qKRNlDotVl1HI"></drupal-render-placeholder> </div> </article> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=334&amp;2=comment&amp;3=comment" token="NrqO2J5ulHhbN2O91WBkUxRZkwqHr9s5xplN8jiKN_w"></drupal-render-placeholder> </section> Mon, 24 Jul 2017 21:43:02 +0000 nuwantha 334 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/334/css-fluid-width-video#comments Test a webpage for Retina display http://drupal8.ovh/en/tutoriels/325/test-a-webpage-for-retina-display <span class="field field--name-title field--type-string field--label-hidden">Test a webpage for Retina display</span> <div class="clearfix text-formatted field field--name-field-question field--type-text-long field--label-above"> <div class="field__label">Question</div> <div class="field__item"><p>How to test a webpage meant for Retina display ?</p> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Mon, 06/19/2017 - 10:56</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>To test retina display, just adjust the screen pixel ratio.</p> <h2>On Firefox</h2> <p>1. Go to the  Firefox advance configuration. (Type <code><strong>about:config</strong></code> on address bar)<br /> 2. Find <code><strong>layout.css.devPixelsPerPx</strong></code><br /> 3. Set ratio to 1.5, 2.0 .... (1 is normal, -1.0 is default value)<br /> Firefox</p> <p>Default : layout.css.devPixelsPerPx = -1.0</p> <h2> On Chrome</h2> <p>1. F12 to open developer tools<br /> 2. Enable mobile emulation (Ctrl + Shift + M or Click on Mobile/Tablet icon)<br /> 3. At the top right of the page, click on menu icon (Three small points<code> ⋮ </code>) Then "Add device pixel ration".<br /> 4. Now you can see a new dropdown menu "DPR:....", Set Device type to Responsive to change manually</p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/tests" hreflang="en">Tests</a></li> <li><a href="/en/tags/css" hreflang="en">CSS</a></li> <li><a href="/en/tags/theming" hreflang="en">Theming</a></li> </ul> </div> <div class="field field--name-field-related-contents field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/en/tutoriels/282/css-styling-tips-for-print" hreflang="en">CSS Styling tips for Print</a></div> <div class="field__item"><a href="/en/tutoriels/22/add-css-to-a-module" hreflang="en">Add CSS stylesheets to a module</a></div> <div class="field__item"><a href="/en/tutoriels/294/display-a-web-page-as-print-media-print-emulate-for-development-and-test" hreflang="en">Display a web page as print. Media Print Emulate For development and test</a></div> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=325&amp;2=comment&amp;3=comment" token="u9aWd06KUzZU8LY7kZ_riJs7G8ZvpfAPTbWsjZmG2Oc"></drupal-render-placeholder> </section> Mon, 19 Jun 2017 08:56:15 +0000 editor 325 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/325/test-a-webpage-for-retina-display#comments Views template suggestion files http://drupal8.ovh/en/tutoriels/313/views-template-suggestion-files <span class="field field--name-title field--type-string field--label-hidden">Views template suggestion files</span> <div class="clearfix text-formatted field field--name-field-question field--type-text-long field--label-above"> <div class="field__label">Question</div> <div class="field__item"><p>How to add template suggestion to a view on drupal 8 ?</p> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Mon, 06/05/2017 - 13:03</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>All views templates can be overridden with a variety of names, using the view, the display ID of the view, the display type of the view, or some combination thereof.</p> <h2> Naming convention.</h2> <p>View, named <strong>foobar</strong>. Style: <strong>unformatted</strong>. Row style: <strong>Fields</strong>. Display: <strong>Page</strong>.</p> <p><strong>views-view--foobar--page.html.twig<br /> views-view--page.html.twig<br /> views-view--foobar.html.twig<br /> views-view.html.twig</strong></p> <p><strong>views-view-unformatted--foobar--page.html.twig<br /> views-view-unformatted--page.html.twig<br /> views-view-unformatted--foobar.html.twig<br /> views-view-unformatted.html.twig</strong></p> <p><strong>views-view-fields--foobar--page.html.twig<br /> views-view-fields--page.html.twig<br /> views-view-fields--foobar.html.twig<br /> views-view-fields.html.twig</strong></p> <p> </p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/drupal-8" hreflang="en">Drupal 8</a></li> <li><a href="/en/tags/code" hreflang="en">Code</a></li> <li><a href="/en/tags/views" hreflang="en">Views</a></li> <li><a href="/en/tags/theming" hreflang="en">Theming</a></li> </ul> </div> <div class="field field--name-field-related-contents field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/en/tutoriels/121/drupal-8-theming-twig" hreflang="en">Drupal 8 Theming with Twig</a></div> <div class="field__item"><a href="/en/tutoriels/136/theming-enable-twig-templates%C2%A0debug" hreflang="en">Theming : enable Twig templates Debug</a></div> <div class="field__item"><a href="/en/tutoriels/140/add-twig-template-to-a-custom-module-block-or-page" hreflang="en">Add twig template to a custom Module, Block or Page</a></div> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=313&amp;2=comment&amp;3=comment" token="cXbzwK_e7w24P3IXdEf2V6qsNASkdMHVJp0rmugzL08"></drupal-render-placeholder> </section> Mon, 05 Jun 2017 11:03:36 +0000 editor 313 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/313/views-template-suggestion-files#comments Display a web page as print. Media Print Emulate For development and test http://drupal8.ovh/en/tutoriels/294/display-a-web-page-as-print-media-print-emulate-for-development-and-test <span class="field field--name-title field--type-string field--label-hidden">Display a web page as print. Media Print Emulate For development and test</span> <div class="clearfix text-formatted field field--name-field-question field--type-text-long field--label-above"> <div class="field__label">Question</div> <div class="field__item"><p>How to show a web page as print stylesheets to avoid print preview every time (for development and test) on Firefow and /or Chrome ?</p> <p>How to inspect HTML page and elements as <strong>media print</strong> ?</p> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Wed, 03/08/2017 - 10:10</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><h2>Media Print Emulate on Chrome</h2> <p><strong>(Tested on Chrome Version 56)</strong></p> <ol><li>Open Chrome DevTools (<code>F12</code>)</li> <li>Click ⋮ (vertical ellipsis)</li> <li>Choose <strong>More tools</strong> -&gt; <strong>Rendering</strong></li> <li>Tick <strong>Emulate CSS Media</strong></li> <li>Select <strong>print</strong></li> </ol><p> </p> <h2>Media Print Emulate on FireFox</h2> <p><strong>(Tested on Version 51)</strong></p> <ol><li>Open a Developer Toolbar command line (<code>Shift + F2</code>)</li> <li>Type:     <code>media emulate print</code></li> </ol></div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/css" hreflang="en">CSS</a></li> <li><a href="/en/tags/theming" hreflang="en">Theming</a></li> </ul> </div> <div class="field field--name-field-related-contents field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/en/tutoriels/325/test-a-webpage-for-retina-display" hreflang="en">Test a webpage for Retina display</a></div> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=294&amp;2=comment&amp;3=comment" token="_8dmtEYvMrzg7f9GTUFmT0L61xh-uUTbizTQ2JIK1zA"></drupal-render-placeholder> </section> Wed, 08 Mar 2017 09:10:51 +0000 editor 294 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/294/display-a-web-page-as-print-media-print-emulate-for-development-and-test#comments HTML Unicode symbols (From U+2600) http://drupal8.ovh/en/tutoriels/266/html-unicode-symbols-from-u-2600 <span class="field field--name-title field--type-string field--label-hidden">HTML Unicode symbols (From U+2600)</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Thu, 11/24/2016 - 13:57</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><h2>HTML Unicode symbols From : 2000 To:2BFF</h2> <p style="font-size:2em;"><code>2010 ‐ ‑ ‒ – — ― ‖ ‗ ‘ ’ ‚ ‛ “ ” „ ‟<br /> 2020 † ‡ • ‣ ․ ‥ … ‧<br /> 2030 ‰ ‱ ′ ″ ‴ ‵ ‶ ‷ ‸ ‹ › ※ ‼ ‽ ‾ ‿<br /> 2040 ⁀ ⁁ ⁂ ⁃ ⁄ ⁅ ⁆<br /> 2050 ⁐ ⁑ ⁒ ⁓ ⁔ ⁕ ⁖ ⁗ ⁘ ⁙ ⁚ ⁛ ⁜ ⁝ ⁞<br /> 2070 ⁰ ⁱ ⁲ ⁳ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁺ ⁻ ⁼ ⁽ ⁾ ⁿ<br /> 2080 ₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉ ₊ ₋ ₌ ₍ ₎ ₏<br /> 2090 ₐ ₑ ₒ ₓ ₔ ₕ ₖ ₗ ₘ ₙ ₚ ₛ ₜ ₝ ₞ ₟<br /> 20A0 ₠ ₡ ₢ ₣ ₤ ₥ ₦ ₧ ₨ ₩ ₪ ₫ € ₭ ₮ ₯<br /> 20B0 ₰ ₱ ₲ ₳ ₴ ₵ ₶ ₷ ₸ ₹ ₺ ₻ ₼ ₽ ₾ ₿<br /> 20C0 ⃀ ⃁ ⃂ ⃃ ⃄ ⃅ ⃆ ⃇ ⃈ ⃉ ⃊ ⃋ ⃌ ⃍ ⃎ ⃏<br /> 20D0 ⃐ ⃑ ⃒ ⃓ ⃔ ⃕ ⃖ ⃗ ⃘ ⃙ ⃚ ⃛ ⃜ ⃝ ⃞ ⃟<br /> 20E0 ⃠ ⃡ ⃢ ⃣ ⃤ ⃥ ⃦ ⃧ ⃨ ⃩ ⃪ ⃫ ⃬ ⃭ ⃮ ⃯<br /> 20F0 ⃰ ⃱ ⃲ ⃳ ⃴ ⃵ ⃶ ⃷ ⃸ ⃹ ⃺ ⃻ ⃼ ⃽ ⃾ ⃿<br /> 2100 ℀ ℁ ℂ ℃ ℄ ℅ ℆ ℇ ℈ ℉ ℊ ℋ ℌ ℍ ℎ ℏ<br /> 2110 ℐ ℑ ℒ ℓ ℔ ℕ № ℗ ℘ ℙ ℚ ℛ ℜ ℝ ℞ ℟<br /> 2120 ℠ ℡ ™ ℣ ℤ ℥ Ω ℧ ℨ ℩ K Å ℬ ℭ ℮ ℯ<br /> 2130 ℰ ℱ Ⅎ ℳ ℴ ℵ ℶ ℷ ℸ ℹ ℺ ℻ ℼ ℽ ℾ ℿ<br /> 2140 ⅀ ⅁ ⅂ ⅃ ⅄ ⅅ ⅆ ⅇ ⅈ ⅉ ⅊ ⅋ ⅌ ⅍ ⅎ ⅏<br /> 2150 ⅐ ⅑ ⅒ ⅓ ⅔ ⅕ ⅖ ⅗ ⅘ ⅙ ⅚ ⅛ ⅜ ⅝ ⅞ ⅟<br /> 2160 Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ Ⅺ Ⅻ Ⅼ Ⅽ Ⅾ Ⅿ<br /> 2170 ⅰ ⅱ ⅲ ⅳ ⅴ ⅵ ⅶ ⅷ ⅸ ⅹ ⅺ ⅻ ⅼ ⅽ ⅾ ⅿ<br /> 2180 ↀ ↁ ↂ Ↄ ↄ ↅ ↆ ↇ ↈ ↉ ↊ ↋ ↌ ↍ ↎ ↏<br /> 2190 ← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙ ↚ ↛ ↜ ↝ ↞ ↟<br /> 21A0 ↠ ↡ ↢ ↣ ↤ ↥ ↦ ↧ ↨ ↩ ↪ ↫ ↬ ↭ ↮ ↯<br /> 21B0 ↰ ↱ ↲ ↳ ↴ ↵ ↶ ↷ ↸ ↹ ↺ ↻ ↼ ↽ ↾ ↿<br /> 21C0 ⇀ ⇁ ⇂ ⇃ ⇄ ⇅ ⇆ ⇇ ⇈ ⇉ ⇊ ⇋ ⇌ ⇍ ⇎ ⇏<br /> 21D0 ⇐ ⇑ ⇒ ⇓ ⇔ ⇕ ⇖ ⇗ ⇘ ⇙ ⇚ ⇛ ⇜ ⇝ ⇞ ⇟<br /> 21E0 ⇠ ⇡ ⇢ ⇣ ⇤ ⇥ ⇦ ⇧ ⇨ ⇩ ⇪ ⇫ ⇬ ⇭ ⇮ ⇯<br /> 21F0 ⇰ ⇱ ⇲ ⇳ ⇴ ⇵ ⇶ ⇷ ⇸ ⇹ ⇺ ⇻ ⇼ ⇽ ⇾ ⇿<br /> 2200 ∀ ∁ ∂ ∃ ∄ ∅ ∆ ∇ ∈ ∉ ∊ ∋ ∌ ∍ ∎ ∏<br /> 2210 ∐ ∑ − ∓ ∔ ∕ ∖ ∗ ∘ ∙ √ ∛ ∜ ∝ ∞ ∟<br /> 2220 ∠ ∡ ∢ ∣ ∤ ∥ ∦ ∧ ∨ ∩ ∪ ∫ ∬ ∭ ∮ ∯<br /> 2230 ∰ ∱ ∲ ∳ ∴ ∵ ∶ ∷ ∸ ∹ ∺ ∻ ∼ ∽ ∾ ∿<br /> 2240 ≀ ≁ ≂ ≃ ≄ ≅ ≆ ≇ ≈ ≉ ≊ ≋ ≌ ≍ ≎ ≏<br /> 2250 ≐ ≑ ≒ ≓ ≔ ≕ ≖ ≗ ≘ ≙ ≚ ≛ ≜ ≝ ≞ ≟<br /> 2260 ≠ ≡ ≢ ≣ ≤ ≥ ≦ ≧ ≨ ≩ ≪ ≫ ≬ ≭ ≮ ≯<br /> 2270 ≰ ≱ ≲ ≳ ≴ ≵ ≶ ≷ ≸ ≹ ≺ ≻ ≼ ≽ ≾ ≿<br /> 2280 ⊀ ⊁ ⊂ ⊃ ⊄ ⊅ ⊆ ⊇ ⊈ ⊉ ⊊ ⊋ ⊌ ⊍ ⊎ ⊏<br /> 2290 ⊐ ⊑ ⊒ ⊓ ⊔ ⊕ ⊖ ⊗ ⊘ ⊙ ⊚ ⊛ ⊜ ⊝ ⊞ ⊟<br /> 22A0 ⊠ ⊡ ⊢ ⊣ ⊤ ⊥ ⊦ ⊧ ⊨ ⊩ ⊪ ⊫ ⊬ ⊭ ⊮ ⊯<br /> 22B0 ⊰ ⊱ ⊲ ⊳ ⊴ ⊵ ⊶ ⊷ ⊸ ⊹ ⊺ ⊻ ⊼ ⊽ ⊾ ⊿<br /> 22C0 ⋀ ⋁ ⋂ ⋃ ⋄ ⋅ ⋆ ⋇ ⋈ ⋉ ⋊ ⋋ ⋌ ⋍ ⋎ ⋏<br /> 22D0 ⋐ ⋑ ⋒ ⋓ ⋔ ⋕ ⋖ ⋗ ⋘ ⋙ ⋚ ⋛ ⋜ ⋝ ⋞ ⋟<br /> 22E0 ⋠ ⋡ ⋢ ⋣ ⋤ ⋥ ⋦ ⋧ ⋨ ⋩ ⋪ ⋫ ⋬ ⋭ ⋮ ⋯<br /> 22F0 ⋰ ⋱ ⋲ ⋳ ⋴ ⋵ ⋶ ⋷ ⋸ ⋹ ⋺ ⋻ ⋼ ⋽ ⋾ ⋿<br /> 2300 ⌀ ⌁ ⌂ ⌃ ⌄ ⌅ ⌆ ⌇ ⌈ ⌉ ⌊ ⌋ ⌌ ⌍ ⌎ ⌏<br /> 2310 ⌐ ⌑ ⌒ ⌓ ⌔ ⌕ ⌖ ⌗ ⌘ ⌙ ⌚ ⌛ ⌜ ⌝ ⌞ ⌟<br /> 2320 ⌠ ⌡ ⌢ ⌣ ⌤ ⌥ ⌦ ⌧ ⌨ 〈 〉 ⌫ ⌬ ⌭ ⌮ ⌯<br /> 2330 ⌰ ⌱ ⌲ ⌳ ⌴ ⌵ ⌶ ⌷ ⌸ ⌹ ⌺ ⌻ ⌼ ⌽ ⌾ ⌿<br /> 2340 ⍀ ⍁ ⍂ ⍃ ⍄ ⍅ ⍆ ⍇ ⍈ ⍉ ⍊ ⍋ ⍌ ⍍ ⍎ ⍏<br /> 2350 ⍐ ⍑ ⍒ ⍓ ⍔ ⍕ ⍖ ⍗ ⍘ ⍙ ⍚ ⍛ ⍜ ⍝ ⍞ ⍟<br /> 2360 ⍠ ⍡ ⍢ ⍣ ⍤ ⍥ ⍦ ⍧ ⍨ ⍩ ⍪ ⍫ ⍬ ⍭ ⍮ ⍯<br /> 2370 ⍰ ⍱ ⍲ ⍳ ⍴ ⍵ ⍶ ⍷ ⍸ ⍹ ⍺ ⍻ ⍼ ⍽ ⍾ ⍿<br /> 2380 ⎀ ⎁ ⎂ ⎃ ⎄ ⎅ ⎆ ⎇ ⎈ ⎉ ⎊ ⎋ ⎌ ⎍ ⎎ ⎏<br /> 2390 ⎐ ⎑ ⎒ ⎓ ⎔ ⎕ ⎖ ⎗ ⎘ ⎙ ⎚ ⎛ ⎜ ⎝ ⎞ ⎟<br /> 23A0 ⎠ ⎡ ⎢ ⎣ ⎤ ⎥ ⎦ ⎧ ⎨ ⎩ ⎪ ⎫ ⎬ ⎭ ⎮ ⎯<br /> 23B0 ⎰ ⎱ ⎲ ⎳ ⎴ ⎵ ⎶ ⎷ ⎸ ⎹ ⎺ ⎻ ⎼ ⎽ ⎾ ⎿<br /> 23C0 ⏀ ⏁ ⏂ ⏃ ⏄ ⏅ ⏆ ⏇ ⏈ ⏉ ⏊ ⏋ ⏌ ⏍ ⏎ ⏏<br /> 23D0 ⏐ ⏑ ⏒ ⏓ ⏔ ⏕ ⏖ ⏗ ⏘ ⏙ ⏚ ⏛ ⏜ ⏝ ⏞ ⏟<br /> 23E0 ⏠ ⏡ ⏢ ⏣ ⏤ ⏥ ⏦ ⏧ ⏨ ⏩ ⏪ ⏫ ⏬ ⏭ ⏮ ⏯<br /> 23F0 ⏰ ⏱ ⏲ ⏳ ⏴ ⏵ ⏶ ⏷ ⏸ ⏹ ⏺ ⏻ ⏼ ⏽ ⏾ ⏿<br /> 2400 ␀ ␁ ␂ ␃ ␄ ␅ ␆ ␇ ␈ ␉ ␊ ␋ ␌ ␍ ␎ ␏<br /> 2410 ␐ ␑ ␒ ␓ ␔ ␕ ␖ ␗ ␘ ␙ ␚ ␛ ␜ ␝ ␞ ␟<br /> 2420 ␠ ␡ ␢ ␣ ␤ ␥ ␦ ␧ ␨ ␩ ␪ ␫ ␬ ␭ ␮ ␯<br /> 2430 ␰ ␱ ␲ ␳ ␴ ␵ ␶ ␷ ␸ ␹ ␺ ␻ ␼ ␽ ␾ ␿<br /> 2440 ⑀ ⑁ ⑂ ⑃ ⑄ ⑅ ⑆ ⑇ ⑈ ⑉ ⑊ ⑋ ⑌ ⑍ ⑎ ⑏<br /> 2450 ⑐ ⑑ ⑒ ⑓ ⑔ ⑕ ⑖ ⑗ ⑘ ⑙ ⑚ ⑛ ⑜ ⑝ ⑞ ⑟<br /> 2460 ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯<br /> 2470 ⑰ ⑱ ⑲ ⑳ ⑴ ⑵ ⑶ ⑷ ⑸ ⑹ ⑺ ⑻ ⑼ ⑽ ⑾ ⑿<br /> 2480 ⒀ ⒁ ⒂ ⒃ ⒄ ⒅ ⒆ ⒇ ⒈ ⒉ ⒊ ⒋ ⒌ ⒍ ⒎ ⒏<br /> 2490 ⒐ ⒑ ⒒ ⒓ ⒔ ⒕ ⒖ ⒗ ⒘ ⒙ ⒚ ⒛ ⒜ ⒝ ⒞ ⒟<br /> 24A0 ⒠ ⒡ ⒢ ⒣ ⒤ ⒥ ⒦ ⒧ ⒨ ⒩ ⒪ ⒫ ⒬ ⒭ ⒮ ⒯<br /> 24B0 ⒰ ⒱ ⒲ ⒳ ⒴ ⒵ Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ<br /> 24C0 Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ<br /> 24D0 ⓐ ⓑ ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ ⓝ ⓞ ⓟ<br /> 24E0 ⓠ ⓡ ⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ ⓩ ⓪ ⓫ ⓬ ⓭ ⓮ ⓯<br /> 24F0 ⓰ ⓱ ⓲ ⓳ ⓴ ⓵ ⓶ ⓷ ⓸ ⓹ ⓺ ⓻ ⓼ ⓽ ⓾ ⓿<br /> 2500 ─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌ ┍ ┎ ┏<br /> 2510 ┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙ ┚ ┛ ├ ┝ ┞ ┟<br /> 2520 ┠ ┡ ┢ ┣ ┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯<br /> 2530 ┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿<br /> 2540 ╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏<br /> 2550 ═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟<br /> 2560 ╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬ ╭ ╮ ╯<br /> 2570 ╰ ╱ ╲ ╳ ╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿<br /> 2580 ▀ ▁ ▂ ▃ ▄ ▅ ▆ ▇ █ ▉ ▊ ▋ ▌ ▍ ▎ ▏<br /> 2590 ▐ ░ ▒ ▓ ▔ ▕ ▖ ▗ ▘ ▙ ▚ ▛ ▜ ▝ ▞ ▟<br /> 25A0 ■ □ ▢ ▣ ▤ ▥ ▦ ▧ ▨ ▩ ▪ ▫ ▬ ▭ ▮ ▯<br /> 25B0 ▰ ▱ ▲ △ ▴ ▵ ▶ ▷ ▸ ▹ ► ▻ ▼ ▽ ▾ ▿<br /> 25C0 ◀ ◁ ◂ ◃ ◄ ◅ ◆ ◇ ◈ ◉ ◊ ○ ◌ ◍ ◎ ●<br /> 25D0 ◐ ◑ ◒ ◓ ◔ ◕ ◖ ◗ ◘ ◙ ◚ ◛ ◜ ◝ ◞ ◟<br /> 25E0 ◠ ◡ ◢ ◣ ◤ ◥ ◦ ◧ ◨ ◩ ◪ ◫ ◬ ◭ ◮ ◯<br /> 25F0 ◰ ◱ ◲ ◳ ◴ ◵ ◶ ◷ ◸ ◹ ◺ ◻ ◼ ◽ ◾ ◿<br /><br /><br /> 2600 ☀ ☁ ☂ ☃ ☄ ★ ☆ ☇ ☈ ☉ ☊ ☋ ☌ ☍ ☎ ☏<br /> 2610 ☐ ☑ ☒ ☓ ☔ ☕ ☖ ☗ ☘ ☙ ☚ ☛ ☜ ☝ ☞ ☟<br /> 2620 ☠ ☡ ☢ ☣ ☤ ☥ ☦ ☧ ☨ ☩ ☪ ☫ ☬ ☭ ☮ ☯<br /> 2630 ☰ ☱ ☲ ☳ ☴ ☵ ☶ ☷ ☸ ☹ ☺ ☻ ☼ ☽ ☾ ☿<br /> 2640 ♀ ♁ ♂ ♃ ♄ ♅ ♆ ♇ ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏<br /> 2650 ♐ ♑ ♒ ♓ ♔ ♕ ♖ ♗ ♘ ♙ ♚ ♛ ♜ ♝ ♞ ♟<br /> 2660 ♠ ♡ ♢ ♣ ♤ ♥ ♦ ♧ ♨ ♩ ♪ ♫ ♬ ♭ ♮ ♯<br /> 2670 ♰ ♱ ♲ ♳ ♴ ♵ ♶ ♷ ♸ ♹ ♺ ♻ ♼ ♽ ♾ ♿<br /> 2680 ⚀ ⚁ ⚂ ⚃ ⚄ ⚅ ⚆ ⚇ ⚈ ⚉ ⚊ ⚋ ⚌ ⚍ ⚎ ⚏<br /> 2690 ⚐ ⚑ ⚒ ⚓ ⚔ ⚕ ⚖ ⚗ ⚘ ⚙ ⚚ ⚛ ⚜ ⚝ ⚞ ⚟<br /> 26A0 ⚠ ⚡ ⚢ ⚣ ⚤ ⚥ ⚦ ⚧ ⚨ ⚩ ⚪ ⚫ ⚬ ⚭ ⚮ ⚯<br /> 26B0 ⚰ ⚱ ⚲ ⚳ ⚴ ⚵ ⚶ ⚷ ⚸ ⚹ ⚺ ⚻ ⚼ ⚽ ⚾ ⚿<br /> 26C0 ⛀ ⛁ ⛂ ⛃ ⛄ ⛅ ⛆ ⛇ ⛈ ⛉ ⛊ ⛋ ⛌ ⛍ ⛎ ⛏<br /> 26D0 ⛐ ⛑ ⛒ ⛓ ⛔ ⛕ ⛖ ⛗ ⛘ ⛙ ⛚ ⛛ ⛜ ⛝ ⛞ ⛟<br /> 26E0 ⛠ ⛡ ⛢ ⛣ ⛤ ⛥ ⛦ ⛧ ⛨ ⛩ ⛪ ⛫ ⛬ ⛭ ⛮ ⛯<br /> 26F0 ⛰ ⛱ ⛲ ⛳ ⛴ ⛵ ⛶ ⛷ ⛸ ⛹ ⛺ ⛻ ⛼ ⛽ ⛾ ⛿<br /> 2700 ✀ ✁ ✂ ✃ ✄ ✅ ✆ ✇ ✈ ✉ ✊ ✋ ✌ ✍ ✎ ✏<br /> 2710 ✐ ✑ ✒ ✓ ✔ ✕ ✖ ✗ ✘ ✙ ✚ ✛ ✜ ✝ ✞ ✟<br /> 2720 ✠ ✡ ✢ ✣ ✤ ✥ ✦ ✧ ✨ ✩ ✪ ✫ ✬ ✭ ✮ ✯<br /> 2730 ✰ ✱ ✲ ✳ ✴ ✵ ✶ ✷ ✸ ✹ ✺ ✻ ✼ ✽ ✾ ✿<br /> 2740 ❀ ❁ ❂ ❃ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❌ ❍ ❎ ❏<br /> 2750 ❐ ❑ ❒ ❓ ❔ ❕ ❖ ❗ ❘ ❙ ❚ ❛ ❜ ❝ ❞ ❟<br /> 2760 ❠ ❡ ❢ ❣ ❤ ❥ ❦ ❧ ❨ ❩ ❪ ❫ ❬ ❭ ❮ ❯<br /> 2770 ❰ ❱ ❲ ❳ ❴ ❵ ❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾ ❿<br /> 2780 ➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉ ➊ ➋ ➌ ➍ ➎ ➏<br /> 2790 ➐ ➑ ➒ ➓ ➔ ➕ ➖ ➗ ➘ ➙ ➚ ➛ ➜ ➝ ➞ ➟<br /> 27A0 ➠ ➡ ➢ ➣ ➤ ➥ ➦ ➧ ➨ ➩ ➪ ➫ ➬ ➭ ➮ ➯<br /> 27B0 ➰ ➱ ➲ ➳ ➴ ➵ ➶ ➷ ➸ ➹ ➺ ➻ ➼ ➽ ➾ ➿<br /> 27C0 ⟀ ⟁ ⟂ ⟃ ⟄ ⟅ ⟆ ⟇ ⟈ ⟉ ⟊ ⟋ ⟌ ⟍ ⟎ ⟏<br /> 27D0 ⟐ ⟑ ⟒ ⟓ ⟔ ⟕ ⟖ ⟗ ⟘ ⟙ ⟚ ⟛ ⟜ ⟝ ⟞ ⟟<br /> 27E0 ⟠ ⟡ ⟢ ⟣ ⟤ ⟥ ⟦ ⟧ ⟨ ⟩ ⟪ ⟫ ⟬ ⟭ ⟮ ⟯<br /> 27F0 ⟰ ⟱ ⟲ ⟳ ⟴ ⟵ ⟶ ⟷ ⟸ ⟹ ⟺ ⟻ ⟼ ⟽ ⟾ ⟿<br /><br /><br /> 2800 ⠀ ⠁ ⠂ ⠃ ⠄ ⠅ ⠆ ⠇ ⠈ ⠉ ⠊ ⠋ ⠌ ⠍ ⠎ ⠏<br /> 2810 ⠐ ⠑ ⠒ ⠓ ⠔ ⠕ ⠖ ⠗ ⠘ ⠙ ⠚ ⠛ ⠜ ⠝ ⠞ ⠟<br /> 2820 ⠠ ⠡ ⠢ ⠣ ⠤ ⠥ ⠦ ⠧ ⠨ ⠩ ⠪ ⠫ ⠬ ⠭ ⠮ ⠯<br /> 2830 ⠰ ⠱ ⠲ ⠳ ⠴ ⠵ ⠶ ⠷ ⠸ ⠹ ⠺ ⠻ ⠼ ⠽ ⠾ ⠿<br /> 2840 ⡀ ⡁ ⡂ ⡃ ⡄ ⡅ ⡆ ⡇ ⡈ ⡉ ⡊ ⡋ ⡌ ⡍ ⡎ ⡏<br /> 2850 ⡐ ⡑ ⡒ ⡓ ⡔ ⡕ ⡖ ⡗ ⡘ ⡙ ⡚ ⡛ ⡜ ⡝ ⡞ ⡟<br /> 2860 ⡠ ⡡ ⡢ ⡣ ⡤ ⡥ ⡦ ⡧ ⡨ ⡩ ⡪ ⡫ ⡬ ⡭ ⡮ ⡯<br /> 2870 ⡰ ⡱ ⡲ ⡳ ⡴ ⡵ ⡶ ⡷ ⡸ ⡹ ⡺ ⡻ ⡼ ⡽ ⡾ ⡿<br /> 2880 ⢀ ⢁ ⢂ ⢃ ⢄ ⢅ ⢆ ⢇ ⢈ ⢉ ⢊ ⢋ ⢌ ⢍ ⢎ ⢏<br /> 2890 ⢐ ⢑ ⢒ ⢓ ⢔ ⢕ ⢖ ⢗ ⢘ ⢙ ⢚ ⢛ ⢜ ⢝ ⢞ ⢟<br /> 28A0 ⢠ ⢡ ⢢ ⢣ ⢤ ⢥ ⢦ ⢧ ⢨ ⢩ ⢪ ⢫ ⢬ ⢭ ⢮ ⢯<br /> 28B0 ⢰ ⢱ ⢲ ⢳ ⢴ ⢵ ⢶ ⢷ ⢸ ⢹ ⢺ ⢻ ⢼ ⢽ ⢾ ⢿<br /> 28C0 ⣀ ⣁ ⣂ ⣃ ⣄ ⣅ ⣆ ⣇ ⣈ ⣉ ⣊ ⣋ ⣌ ⣍ ⣎ ⣏<br /> 28D0 ⣐ ⣑ ⣒ ⣓ ⣔ ⣕ ⣖ ⣗ ⣘ ⣙ ⣚ ⣛ ⣜ ⣝ ⣞ ⣟<br /> 28E0 ⣠ ⣡ ⣢ ⣣ ⣤ ⣥ ⣦ ⣧ ⣨ ⣩ ⣪ ⣫ ⣬ ⣭ ⣮ ⣯<br /> 28F0 ⣰ ⣱ ⣲ ⣳ ⣴ ⣵ ⣶ ⣷ ⣸ ⣹ ⣺ ⣻ ⣼ ⣽ ⣾ ⣿<br /><br /><br /> 2900 ⤀ ⤁ ⤂ ⤃ ⤄ ⤅ ⤆ ⤇ ⤈ ⤉ ⤊ ⤋ ⤌ ⤍ ⤎ ⤏<br /> 2910 ⤐ ⤑ ⤒ ⤓ ⤔ ⤕ ⤖ ⤗ ⤘ ⤙ ⤚ ⤛ ⤜ ⤝ ⤞ ⤟<br /> 2920 ⤠ ⤡ ⤢ ⤣ ⤤ ⤥ ⤦ ⤧ ⤨ ⤩ ⤪ ⤫ ⤬ ⤭ ⤮ ⤯<br /> 2930 ⤰ ⤱ ⤲ ⤳ ⤴ ⤵ ⤶ ⤷ ⤸ ⤹ ⤺ ⤻ ⤼ ⤽ ⤾ ⤿<br /> 2940 ⥀ ⥁ ⥂ ⥃ ⥄ ⥅ ⥆ ⥇ ⥈ ⥉ ⥊ ⥋ ⥌ ⥍ ⥎ ⥏<br /> 2950 ⥐ ⥑ ⥒ ⥓ ⥔ ⥕ ⥖ ⥗ ⥘ ⥙ ⥚ ⥛ ⥜ ⥝ ⥞ ⥟<br /> 2960 ⥠ ⥡ ⥢ ⥣ ⥤ ⥥ ⥦ ⥧ ⥨ ⥩ ⥪ ⥫ ⥬ ⥭ ⥮ ⥯<br /> 2970 ⥰ ⥱ ⥲ ⥳ ⥴ ⥵ ⥶ ⥷ ⥸ ⥹ ⥺ ⥻ ⥼ ⥽ ⥾ ⥿<br /> 2980 ⦀ ⦁ ⦂ ⦃ ⦄ ⦅ ⦆ ⦇ ⦈ ⦉ ⦊ ⦋ ⦌ ⦍ ⦎ ⦏<br /> 2990 ⦐ ⦑ ⦒ ⦓ ⦔ ⦕ ⦖ ⦗ ⦘ ⦙ ⦚ ⦛ ⦜ ⦝ ⦞ ⦟<br /> 29A0 ⦠ ⦡ ⦢ ⦣ ⦤ ⦥ ⦦ ⦧ ⦨ ⦩ ⦪ ⦫ ⦬ ⦭ ⦮ ⦯<br /> 29B0 ⦰ ⦱ ⦲ ⦳ ⦴ ⦵ ⦶ ⦷ ⦸ ⦹ ⦺ ⦻ ⦼ ⦽ ⦾ ⦿<br /> 29C0 ⧀ ⧁ ⧂ ⧃ ⧄ ⧅ ⧆ ⧇ ⧈ ⧉ ⧊ ⧋ ⧌ ⧍ ⧎ ⧏<br /> 29D0 ⧐ ⧑ ⧒ ⧓ ⧔ ⧕ ⧖ ⧗ ⧘ ⧙ ⧚ ⧛ ⧜ ⧝ ⧞ ⧟<br /> 29E0 ⧠ ⧡ ⧢ ⧣ ⧤ ⧥ ⧦ ⧧ ⧨ ⧩ ⧪ ⧫ ⧬ ⧭ ⧮ ⧯<br /> 29F0 ⧰ ⧱ ⧲ ⧳ ⧴ ⧵ ⧶ ⧷ ⧸ ⧹ ⧺ ⧻ ⧼ ⧽ ⧾ ⧿<br /> 2A00 ⨀ ⨁ ⨂ ⨃ ⨄ ⨅ ⨆ ⨇ ⨈ ⨉ ⨊ ⨋ ⨌ ⨍ ⨎ ⨏<br /> 2A10 ⨐ ⨑ ⨒ ⨓ ⨔ ⨕ ⨖ ⨗ ⨘ ⨙ ⨚ ⨛ ⨜ ⨝ ⨞ ⨟<br /> 2A20 ⨠ ⨡ ⨢ ⨣ ⨤ ⨥ ⨦ ⨧ ⨨ ⨩ ⨪ ⨫ ⨬ ⨭ ⨮ ⨯<br /> 2A30 ⨰ ⨱ ⨲ ⨳ ⨴ ⨵ ⨶ ⨷ ⨸ ⨹ ⨺ ⨻ ⨼ ⨽ ⨾ ⨿<br /> 2A40 ⩀ ⩁ ⩂ ⩃ ⩄ ⩅ ⩆ ⩇ ⩈ ⩉ ⩊ ⩋ ⩌ ⩍ ⩎ ⩏<br /> 2A50 ⩐ ⩑ ⩒ ⩓ ⩔ ⩕ ⩖ ⩗ ⩘ ⩙ ⩚ ⩛ ⩜ ⩝ ⩞ ⩟<br /> 2A60 ⩠ ⩡ ⩢ ⩣ ⩤ ⩥ ⩦ ⩧ ⩨ ⩩ ⩪ ⩫ ⩬ ⩭ ⩮ ⩯<br /> 2A70 ⩰ ⩱ ⩲ ⩳ ⩴ ⩵ ⩶ ⩷ ⩸ ⩹ ⩺ ⩻ ⩼ ⩽ ⩾ ⩿<br /> 2A80 ⪀ ⪁ ⪂ ⪃ ⪄ ⪅ ⪆ ⪇ ⪈ ⪉ ⪊ ⪋ ⪌ ⪍ ⪎ ⪏<br /> 2A90 ⪐ ⪑ ⪒ ⪓ ⪔ ⪕ ⪖ ⪗ ⪘ ⪙ ⪚ ⪛ ⪜ ⪝ ⪞ ⪟<br /> 2AA0 ⪠ ⪡ ⪢ ⪣ ⪤ ⪥ ⪦ ⪧ ⪨ ⪩ ⪪ ⪫ ⪬ ⪭ ⪮ ⪯<br /> 2AB0 ⪰ ⪱ ⪲ ⪳ ⪴ ⪵ ⪶ ⪷ ⪸ ⪹ ⪺ ⪻ ⪼ ⪽ ⪾ ⪿<br /> 2AC0 ⫀ ⫁ ⫂ ⫃ ⫄ ⫅ ⫆ ⫇ ⫈ ⫉ ⫊ ⫋ ⫌ ⫍ ⫎ ⫏<br /> 2AD0 ⫐ ⫑ ⫒ ⫓ ⫔ ⫕ ⫖ ⫗ ⫘ ⫙ ⫚ ⫛ ⫝̸ ⫝ ⫞ ⫟<br /> 2AE0 ⫠ ⫡ ⫢ ⫣ ⫤ ⫥ ⫦ ⫧ ⫨ ⫩ ⫪ ⫫ ⫬ ⫭ ⫮ ⫯<br /> 2AF0 ⫰ ⫱ ⫲ ⫳ ⫴ ⫵ ⫶ ⫷ ⫸ ⫹ ⫺ ⫻ ⫼ ⫽ ⫾ ⫿<br /> 2B00 ⬀ ⬁ ⬂ ⬃ ⬄ ⬅ ⬆ ⬇ ⬈ ⬉ ⬊ ⬋ ⬌ ⬍ ⬎ ⬏<br /> 2B10 ⬐ ⬑ ⬒ ⬓ ⬔ ⬕ ⬖ ⬗ ⬘ ⬙ ⬚ ⬛ ⬜ ⬝ ⬞ ⬟<br /> 2B20 ⬠ ⬡ ⬢ ⬣ ⬤ ⬥ ⬦ ⬧ ⬨ ⬩ ⬪ ⬫ ⬬ ⬭ ⬮ ⬯<br /> 2B30 ⬰ ⬱ ⬲ ⬳ ⬴ ⬵ ⬶ ⬷ ⬸ ⬹ ⬺ ⬻ ⬼ ⬽ ⬾ ⬿<br /> 2B40 ⭀ ⭁ ⭂ ⭃ ⭄ ⭅ ⭆ ⭇ ⭈ ⭉ ⭊ ⭋ ⭌ ⭍ ⭎ ⭏<br /> 2B50 ⭐ ⭑ ⭒ ⭓ ⭔ ⭕ ⭖ ⭗ ⭘ ⭙ ⭚ ⭛ ⭜ ⭝ ⭞ ⭟<br /> 2B60 ⭠ ⭡ ⭢ ⭣ ⭤ ⭥ ⭦ ⭧ ⭨ ⭩ ⭪ ⭫ ⭬ ⭭ ⭮ ⭯<br /> 2B70 ⭰ ⭱ ⭲ ⭳ ⭴ ⭵ ⭶ ⭷ ⭸ ⭹ ⭺ ⭻ ⭼ ⭽ ⭾ ⭿<br /> 2B80 ⮀ ⮁ ⮂ ⮃ ⮄ ⮅ ⮆ ⮇ ⮈ ⮉ ⮊ ⮋ ⮌ ⮍ ⮎ ⮏<br /> 2B90 ⮐ ⮑ ⮒ ⮓ ⮔ ⮕ ⮖ ⮗ ⮘ ⮙ ⮚ ⮛ ⮜ ⮝ ⮞ ⮟<br /> 2BA0 ⮠ ⮡ ⮢ ⮣ ⮤ ⮥ ⮦ ⮧ ⮨ ⮩ ⮪ ⮫ ⮬ ⮭ ⮮ ⮯<br /> 2BB0 ⮰ ⮱ ⮲ ⮳ ⮴ ⮵ ⮶ ⮷ ⮸ ⮹ ⮺ ⮻ ⮼ ⮽ ⮾ ⮿<br /> 2BC0 ⯀ ⯁ ⯂ ⯃ ⯄ ⯅ ⯆ ⯇ ⯈ ⯉ ⯊ ⯋ ⯌ ⯍ ⯎ ⯏<br /> 2BD0 ⯐ ⯑ ⯒ ⯓ ⯔ ⯕ ⯖ ⯗ ⯘ ⯙ ⯚ ⯛ ⯜ ⯝ ⯞ ⯟<br /> 2BE0 ⯠ ⯡ ⯢ ⯣ ⯤ ⯥ ⯦ ⯧ ⯨ ⯩ ⯪ ⯫ ⯬ ⯭ ⯮ ⯯<br /> 2BF0 ⯰ ⯱ ⯲ ⯳ ⯴ ⯵ ⯶ ⯷ ⯸ ⯹ ⯺ ⯻ ⯼ ⯽ ⯾ ⯿</code><br /><br />  </p> <h2>Place a Unicode character in CSS content value</h2> <p><code>a:after {content: "☀";}</code><br /> OR<br /><code>a:after {content: "\2600";}</code></p> <h2>Insert Symbols on html page</h2> <p>&lt;span&gt;Example 1 : Symbol : &amp;spades;&lt;/span&gt;<br /> &lt;span&gt;Example 2  : Dec Value : &amp;#9824;&lt;/span&gt;<br /> &lt;span&gt;Example 3 : Hex value :  &amp;#x2660;&lt;/span&gt;</p> <h2>More:</h2> <blockquote>blockquote</blockquote> <p>Blank (Space) in :after or :before<br /> :after {  content: '\00a0';}</p> <p>http://www.w3schools.com/charsets/ref_utf_symbols.asp</p> <p>http://unicode-table.com/en/#2600</p> </div> <div class="field field--name-field-file field--type-file field--label-inline"> <div class="field__label">File</div> <div class="field__item"> <span class="file file--mime-application-zip file--package-x-generic"> <a href="http://drupal8.ovh/sites/drupal/files/2016-12/UnicodeSymbolsList.zip" type="application/zip; length=34603">UnicodeSymbolsList.zip</a></span> </div> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/theming" hreflang="en">Theming</a></li> <li><a href="/en/tags/css" hreflang="en">CSS</a></li> </ul> </div> <div class="field field--name-field-related-contents field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/en/tutoriels/264/basic-css-styling-tips" hreflang="en">Basic CSS Styling tips</a></div> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=266&amp;2=comment&amp;3=comment" token="8fEI7N9n01EddQ0Ug03YejZAPosvCE9slAcfuGxj-AI"></drupal-render-placeholder> </section> Thu, 24 Nov 2016 12:57:54 +0000 editor 266 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/266/html-unicode-symbols-from-u-2600#comments Basic CSS Styling tips http://drupal8.ovh/en/tutoriels/264/basic-css-styling-tips <span class="field field--name-title field--type-string field--label-hidden">Basic CSS Styling tips</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Tue, 11/15/2016 - 14:29</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Sizes : em and px</p> <p>By default on all browsers 1em is equal to 16px. In px sizes are fix and can't zoom in or out but with em, sizes are relative to the parent element. If you need to use zoom feature, use en intend of px. You can also use a mixin SCSS or LESS like</p> <p><code>@include fontSize(16);</code></p> <p><code>@mixin fontSize($px) {<br />   font-size: ($px/16) + em;<br /> }</code></p> <p> </p> <h2>Blank (Space) in :after or :before</h2> <pre style="background-color:#ffffff;color:#000000;font-family:'Courier New';font-size:12pt;"> :<span style="color:#000080;font-weight:bold;">after </span>{ <span style="color:#0000ff;font-weight:bold;">content</span>: <span style="color:#008000;font-weight:bold;">'\00a0'</span>; }</pre> <p> </p> <h2>SASS (SCSS) and LESS Syntax:</h2> <h3>Calc() function with LESS (Less calc allow to calculate using different units).</h3> <p><code>width:  calc(~'100% - 50px');</code></p> <h3>Multiline truncation with ellipsis</h3> <p><code>/* SASS mixin for multiline*/<br /> @mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1, $bgColor: white){<br />   overflow: hidden;<br />   position: relative;<br />   line-height: $lineHeight;<br />   max-height: $lineHeight * $lineCount;<br />   text-align: justify;<br />   margin-right: -1em;<br />   padding-right: 1em;<br />   &amp;:before {<br />     content: '...';<br />     position: absolute;<br />     right: 0;<br />     bottom: 0;<br />   }<br />   &amp;:after {<br />     content: '';<br />     position: absolute;<br />     right: 0;<br />     width: 1em;<br />     height: 1em;<br />     margin-top: 0.2em;<br />     background: $bgColor;<br />   }<br /> }</code></p> <p><code>.block-with-text {<br />   @include multiLineEllipsis($lineHeight: 1.2em, $lineCount: 3, $bgColor: white);  <br /> }</code></p> <p> </p> <h1>jQuery Style changes</h1> <p>Add odd, even to a list usin jQuery<br /> Example:<br /><code>$('div.list-item:even').addClass('even');<br /> $('div.list-item:odd').addClass('odd');</code></p> <p> </p> <h3>Z-index of position:absolute</h3> <p>To use z-index with the elements position:absolute, all z-index defiend elements mush have position:absolute or position:relative.<br /> Example:<br /><code>- div-parent (position:relative)<br /> - - div-child-1 (position:absolute)<br /> - - div-child-2 (position:relative)</code> &lt;- here, if you don't set the property, by default it can't define z-index.</p> <h3> </h3> <h3>Style input's placeholder (SCSS /LESS example)</h3> <p><code>input {<br />   &amp;::-webkit-input-placeholder { /* Chrome/Opera/Safari */<br />     font-style: italic;<br />   }<br />   &amp;::-moz-placeholder { /* Firefox 19+ */<br />     font-style: italic;<br />   }<br />   &amp;:-ms-input-placeholder { /* IE 10+ */<br />     font-style: italic;<br />   }<br />   &amp;:-moz-placeholder { /* Firefox 18- */<br />     font-style: italic;<br />   }<br /> }</code></p> <h3>Remove / Replace the html "Select" (selectbox's) dropdown arrow</h3> <p><code>  select {<br />     //Remove default arrow<br />     appearance: none;<br />     -moz-appearance: none;<br />     -webkit-appearance: none;<br />     &amp;::-ms-expand {<br />       display: none;<br />     }<br />     //Replace with an image<br />     background-repeat: no-repeat;<br />     background-image: url("/path_to/selecebox_arrow.png");<br />     background-position: right;<br />   }</code></p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/theming" hreflang="en">Theming</a></li> <li><a href="/en/tags/css" hreflang="en">CSS</a></li> </ul> </div> <div class="field field--name-field-related-contents field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/en/tutoriels/266/html-unicode-symbols-from-u-2600" hreflang="en">HTML Unicode symbols (From U+2600)</a></div> <div class="field__item"><a href="/en/tutoriels/242/css-font-styling" hreflang="en">CSS Font Styling</a></div> <div class="field__item"><a href="/en/tutoriels/22/add-css-to-a-module" hreflang="en">Add CSS stylesheets to a module</a></div> <div class="field__item"><a href="/en/tutoriels/282/css-styling-tips-for-print" hreflang="en">CSS Styling tips for Print</a></div> <div class="field__item"><a href="/en/tutoriels/334/css-fluid-width-video" hreflang="en">CSS Fluid Width Video</a></div> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=264&amp;2=comment&amp;3=comment" token="BkT2xG6szICCwLsMrGEzc3x_9jyQKcl2VUooQikCslE"></drupal-render-placeholder> </section> Tue, 15 Nov 2016 13:29:47 +0000 editor 264 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/264/basic-css-styling-tips#comments Specific styling for internet explorer (IE) http://drupal8.ovh/en/tutoriels/262/specific-styling-for-internet-explorer-ie <span class="field field--name-title field--type-string field--label-hidden">Specific styling for internet explorer (IE)</span> <div class="clearfix text-formatted field field--name-field-question field--type-text-long field--label-above"> <div class="field__label">Question</div> <div class="field__item"><p>What are the specific styling for internet explorer IE9, IE 10, IE11, Edge ...?</p> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Wed, 11/09/2016 - 14:12</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p> </p> <h2>1. Removing the Select Element Arrow</h2> <p><code>select::-ms-expand {<br />     display: none;<br /> }<br /> OR<br /> select::-ms-expand {<br />  /* IE 8 */<br />  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />  /* IE 5-7 */<br />  filter: alpha(opacity=0);<br />  /* Good browsers :) */<br />  opacity:0;<br /> }</code></p> <p> </p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/theming" hreflang="en">Theming</a></li> <li><a href="/en/tags/css" hreflang="en">CSS</a></li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=262&amp;2=comment&amp;3=comment" token="mXNkYhJywlpehAmSRx0Jlb3KcW68vS026m820TmEpE8"></drupal-render-placeholder> </section> Wed, 09 Nov 2016 13:12:48 +0000 editor 262 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/262/specific-styling-for-internet-explorer-ie#comments Theme Negotiators - Switch theme dynamically http://drupal8.ovh/en/tutoriels/259/theme-negotiators-switch-theme-dynamically <span class="field field--name-title field--type-string field--label-hidden">Theme Negotiators - Switch theme dynamically</span> <div class="clearfix text-formatted field field--name-field-question field--type-text-long field--label-above"> <div class="field__label">Question</div> <div class="field__item"><p>How to Switch theme dynamically on drupal 8 , using theme negotiators ?</p> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Sun, 10/30/2016 - 17:02</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Create a custom module (here : example)</p> <p>For active themes by route you first have to define a service in your $module.services.yml file:</p> <p> On <strong>example.services.yml</strong></p> <p>Add:</p> <p><code>services:<br />   theme.negotiator.example:<br />     class: Drupal\example\Theme\ExampleNegotiator<br />     tags:<br />       - { name: theme_negotiator, priority: 0 }</code></p> <p>and then use that new defined service class:<br /> Create a class <code><strong>ExampleNegotiator</strong> on <strong>example/src/Theme </strong>With:</code></p> <p><code>namespace Drupal\example\Theme;</code></p> <p><code>use Drupal\Core\Theme\ThemeNegotiatorInterface;<br /> use Drupal\Core\Routing\RouteMatchInterface;</code></p> <p><code>class ExampleNegotiator implements ThemeNegotiatorInterface {<br />   /**<br />    * {@inheritdoc}<br />    */<br />   public function applies(RouteMatchInterface $route_match) {<br />     // Use this theme on a certain route.<br />     return $route_match-&gt;getRouteName() == 'example_route_name';<br />   }</code></p> <p><code>  /**<br />    * {@inheritdoc}<br />    */<br />   public function determineActiveTheme(RouteMatchInterface $route_match) {<br />     // Here you return the actual theme name.<br />     return 'stark';//The theme name<br />   }<br /> }</code></p> <p> </p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/drupal-8" hreflang="en">Drupal 8</a></li> <li><a href="/en/tags/code" hreflang="en">Code</a></li> <li><a href="/en/tags/theming" hreflang="en">Theming</a></li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=259&amp;2=comment&amp;3=comment" token="LMDhgabf0EWoeOWl-RliY7DJpct68PMsqw8-swWeQDM"></drupal-render-placeholder> </section> Sun, 30 Oct 2016 16:02:22 +0000 editor 259 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/259/theme-negotiators-switch-theme-dynamically#comments CSS Font Styling http://drupal8.ovh/en/tutoriels/242/css-font-styling <span class="field field--name-title field--type-string field--label-hidden">CSS Font Styling</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Fri, 10/07/2016 - 11:15</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Standard weights:</p> <p>medium -&gt; font-weight : 500;<br /> semi-bold -&gt;font-weight : 600;</p> <h2>Font Face</h2> <p>Example</p> <p><code>@font-face {<br />   font-family: 'Open Sans';<br />   font-weight: 400;<br />   font-style: normal;<br />   src: url('../fonts/Open-Sans-regular.eot');<br />   src: url('../fonts/Open-Sans-regular.eot?#iefix') format('embedded-opentype'),<br />   local('Open Sans'),<br />   local('Open-Sans-regular'),<br />   url('../fonts/Open-Sans-regular.woff2') format('woff2'),<br />   url('../fonts/Open-Sans-regular.woff') format('woff'),<br />   url('../fonts/Open-Sans-regular.ttf') format('truetype'),<br />   url('../fonts/Open-Sans-regular.svg#OpenSans') format('svg');<br /> }</code></p> <h3>Font face With Unicode-range</h3> <p><code>@font-face {<br />   font-family: 'myfontstyle';<br />   url('../fonts/font_style.ttf') format('truetype');<br />   unicode-range: U+40;<br /> }<br /> div {<br />   font-size: 4em;<br />   font-family: myfontstyle;    <br /> }</code></p> <p>unicode-range Syntax<br /><code>unicode-range: U+26;               /* single codepoint */<br /> unicode-range: U+0-7F;<br /> unicode-range: U+0025-00FF;        /* codepoint range */<br /> unicode-range: U+4??;              /* wildcard range */<br /> unicode-range: U+0025-00FF, U+4??; /* multiple values */</code></p> <p> </p> <p> </p> <p>More : http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp</p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/css" hreflang="en">CSS</a></li> <li><a href="/en/tags/code" hreflang="en">Code</a></li> <li><a href="/en/tags/theming" hreflang="en">Theming</a></li> </ul> </div> <div class="field field--name-field-related-contents field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/en/tutoriels/264/basic-css-styling-tips" hreflang="en">Basic CSS Styling tips</a></div> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=242&amp;2=comment&amp;3=comment" token="kz-R6sHq8pRhFgqjnweZhHBFUpaijkAlj65nngshbmU"></drupal-render-placeholder> </section> Fri, 07 Oct 2016 09:15:59 +0000 editor 242 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/242/css-font-styling#comments