23 lines
39 KiB
HTML
23 lines
39 KiB
HTML
|
<!doctype html><html lang="en" ><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7" /><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1b1e" /><meta name="mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /><meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover" /><meta name="generator" content="Jekyll v4.3.4" /><meta property="og:title" content="Text and Typography" /><meta name="author" content="cotes" /><meta property="og:locale" content="en" /><meta name="description" content="Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more." /><meta property="og:description" content="Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more." /><link rel="canonical" href="https://asandikci.com/posts/text-and-typography/" /><meta property="og:url" content="https://asandikci.com/posts/text-and-typography/" /><meta property="og:site_name" content="Aliberk Sandıkçı" /><meta property="og:image" content="https://asandikci.com//commons/devices-mockup.png" /><meta property="og:image:alt" content="Responsive rendering of Chirpy theme on multiple devices." /><meta property="og:type" content="article" /><meta property="article:published_time" content="2019-08-08T06:33:00+03:00" /><meta name="twitter:card" content="summary_large_image" /><meta property="twitter:image" content="https://asandikci.com//commons/devices-mockup.png" /><meta name="twitter:image:alt" content="Responsive rendering of Chirpy theme on multiple devices." /><meta property="twitter:title" content="Text and Typography" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"cotes"},"dateModified":"2024-07-02T01:00:39+03:00","datePublished":"2019-08-08T06:33:00+03:00","description":"Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more.","headline":"Text and Typography","image":{"lqip":"data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA","alt":"Responsive rendering of Chirpy theme on multiple devices.","url":"https://asandikci.com//commons/devices-mockup.png","@type":"imageObject"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://asandikci.com/posts/text-and-typography/"},"url":"https://asandikci.com/posts/text-and-typography/"}</script><title>Text and Typography | Aliberk Sandıkçı</title><link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicons/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicons/favicon-16x16.png"><link rel="manifest" href="/assets/img/favicons/site.webmanifest"><link rel="shortcut icon" href="/assets/img/favicons/favicon.ico"><meta name="apple-mobile-web-app-title" content="Aliberk Sandıkçı"><meta name="application-name" content="Aliberk Sandıkçı"><meta name="msapplication-TileColor" content="#da532c"><meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml"><meta name="theme-color" content="#ffffff"><link rel="preconnect" href="https://fonts.googleapis.com" ><link rel="dns-prefetch" href="https://fonts.googleapis.com" ><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="dns-prefetch" href="https://fonts.gstatic.com" ><link rel="preconnect" href="https://cdn.jsdelivr.net" ><link rel="dns-prefetch" href="https://cdn.jsdelivr.net" ><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-logos@1/assets/font-logos.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawe
|
|||
|
|
</pre><td class="rouge-code"><pre>This is a common code snippet, without syntax highlight and line number.
|
|||
|
|
</pre></table></code></div></div><h3 id="specific-language"><span class="me-2">Specific Language</span><a href="#specific-language" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><div class="language-bash highlighter-rouge"><div class="code-header"> <span data-label-text="Shell"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
|
|||
|
|
2
|
|||
|
|
3
|
|||
|
|
4
|
|||
|
|
</pre><td class="rouge-code"><pre><span class="k">if</span> <span class="o">[</span> <span class="nv">$?</span> <span class="nt">-ne</span> 0 <span class="o">]</span><span class="p">;</span> <span class="k">then
|
|||
|
|
</span><span class="nb">echo</span> <span class="s2">"The command was not successful."</span><span class="p">;</span>
|
|||
|
|
<span class="c">#do the needful / exit</span>
|
|||
|
|
<span class="k">fi</span><span class="p">;</span>
|
|||
|
|
</pre></table></code></div></div><h3 id="specific-filename"><span class="me-2">Specific filename</span><a href="#specific-filename" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><div file="_sass/jekyll-theme-chirpy.scss" class="language-sass highlighter-rouge"><div class="code-header"> <span data-label-text="_sass/jekyll-theme-chirpy.scss"><i class="far fa-file-code fa-fw"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
|
|||
|
|
2
|
|||
|
|
3
|
|||
|
|
</pre><td class="rouge-code"><pre><span class="k">@import</span>
|
|||
|
|
<span class="s2">"colors/light-typography"</span><span class="o">,</span>
|
|||
|
|
<span class="s2">"colors/dark-typography"</span><span class="o">;</span>
|
|||
|
|
</pre></table></code></div></div><h2 id="mathematics"><span class="me-2">Mathematics</span><a href="#mathematics" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>The mathematics powered by <a href="https://www.mathjax.org/"><strong>MathJax</strong></a>:</p>\[\begin{equation} \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} \label{eq:series} \end{equation}\]<p>We can reference the equation as \eqref{eq:series}.</p><p>When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are</p>\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\]<h2 id="mermaid-svg"><span class="me-2">Mermaid SVG</span><a href="#mermaid-svg" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><pre><code class="language-mermaid"> gantt
|
|||
|
|
title Adding GANTT diagram functionality to mermaid
|
|||
|
|
apple :a, 2017-07-20, 1w
|
|||
|
|
banana :crit, b, 2017-07-23, 1d
|
|||
|
|
cherry :active, c, after b a, 1d
|
|||
|
|
</code></pre><h2 id="images"><span class="me-2">Images</span><a href="#images" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><h3 id="default-with-caption"><span class="me-2">Default (with caption)</span><a href="#default-with-caption" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p><a href="//posts/20190808/mockup.png" class="popup img-link shimmer"><img src="//posts/20190808/mockup.png" alt="Desktop View" width="972" height="589" loading="lazy"></a> <em>Full screen width and center alignment</em></p><h3 id="left-aligned"><span class="me-2">Left aligned</span><a href="#left-aligned" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p><a href="//posts/20190808/mockup.png" class="popup img-link w-75 normal shimmer"><img src="//posts/20190808/mockup.png" alt="Desktop View" width="972" height="589" loading="lazy"></a></p><h3 id="float-to-left"><span class="me-2">Float to left</span><a href="#float-to-left" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p><a href="//posts/20190808/mockup.png" class="popup img-link w-50 left shimmer"><img src="//posts/20190808/mockup.png" alt="Desktop View" width="972" height="589" loading="lazy"></a> Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.</p><h3 id="float-to-right"><span class="me-2">Float to right</span><a href="#float-to-right" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p><a href="//posts/20190808/mockup.png" class="popup img-link w-50 right shimmer"><img src="//posts/20190808/mockup.png" alt="Desktop View" width="972" height="589" loading="lazy"></a> Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.</p><h3 id="darklight-mode--shadow"><span class="me-2">Dark/Light mode & Shadow</span><a href="#darklight-mode--shadow" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>The image below will toggle dark/light mode based on theme preference, notice it has shadows.</p><p><a href="//posts/20190808/devtools-light.png" class="popup img-link light w-75 shadow rounded-10 shimmer"><img src="//posts/20190808/devtools-light.png" alt="light mode only" width="1212" height="668" loading="lazy"></a> <a href="//posts/20190808/devtools-dark.png" class="popup img-link dark w-75 shadow rounded-10 shimmer"><img src="//posts/20190808/devtools-dark.png" alt="dark mode only" width="1212" height="668" loading="lazy"></a></p><h2 id="video"><span class="me-2">Video</span><a href="#video" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><iframe class="embed-video" loading="lazy" src="https://www.youtube.com/embed/Balreaj8Yqs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe><h2 id="reverse-footnote"><span class="me-2">Reverse Footnote</span><a href="#reverse-footnote" class="an
|