diff options
Diffstat (limited to 'guides/Positioning/theme3-positioning/index.html')
-rw-r--r-- | guides/Positioning/theme3-positioning/index.html | 1285 |
1 files changed, 1285 insertions, 0 deletions
diff --git a/guides/Positioning/theme3-positioning/index.html b/guides/Positioning/theme3-positioning/index.html new file mode 100644 index 00000000..f69dfa8d --- /dev/null +++ b/guides/Positioning/theme3-positioning/index.html @@ -0,0 +1,1285 @@ + +<!doctype html> +<html lang="en" class="no-js"> + <head> + + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + + + + + <link rel="prev" href="../../Transparency/theme3-transparency/"> + + + <link rel="next" href="../../Plugins/2017-04-19-rofi-140-sneak-preview-plugins/"> + + <link rel="icon" href="../../../assets/images/favicon.png"> + <meta name="generator" content="mkdocs-1.4.2, mkdocs-material-9.0.6"> + + + + <title>Positioning - Rofi Documentation</title> + + + + <link rel="stylesheet" href="../../../assets/stylesheets/main.558e4712.min.css"> + + + <link rel="stylesheet" href="../../../assets/stylesheets/palette.2505c338.min.css"> + + + + + + + + + + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback"> + <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style> + + + + <script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script> + + + + + + + </head> + + + + + + + + <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="" data-md-color-accent=""> + + + + <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off"> + <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off"> + <label class="md-overlay" for="__drawer"></label> + <div data-md-component="skip"> + + + <a href="#positioning-rofi-on-the-monitor" class="md-skip"> + Skip to content + </a> + + </div> + <div data-md-component="announce"> + + </div> + + + + +<header class="md-header" data-md-component="header"> + <nav class="md-header__inner md-grid" aria-label="Header"> + <a href="../../.." title="Rofi Documentation" class="md-header__button md-logo" aria-label="Rofi Documentation" data-md-component="logo"> + + + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg> + + </a> + <label class="md-header__button md-icon" for="__drawer"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg> + </label> + <div class="md-header__title" data-md-component="header-title"> + <div class="md-header__ellipsis"> + <div class="md-header__topic"> + <span class="md-ellipsis"> + Rofi Documentation + </span> + </div> + <div class="md-header__topic" data-md-component="header-topic"> + <span class="md-ellipsis"> + + Positioning + + </span> + </div> + </div> + </div> + + + + + <div class="md-header__source"> + <a href="https://github.com/davatorium/rofi/" title="Go to repository" class="md-source" data-md-component="source"> + <div class="md-source__icon md-icon"> + + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg> + </div> + <div class="md-source__repository"> + GitHub + </div> +</a> + </div> + + </nav> + +</header> + + <div class="md-container" data-md-component="container"> + + + + + + + <main class="md-main" data-md-component="main"> + <div class="md-main__inner md-grid"> + + + + <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" > + <div class="md-sidebar__scrollwrap"> + <div class="md-sidebar__inner"> + + + +<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0"> + <label class="md-nav__title" for="__drawer"> + <a href="../../.." title="Rofi Documentation" class="md-nav__button md-logo" aria-label="Rofi Documentation" data-md-component="logo"> + + + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg> + + </a> + Rofi Documentation + </label> + + <div class="md-nav__source"> + <a href="https://github.com/davatorium/rofi/" title="Go to repository" class="md-source" data-md-component="source"> + <div class="md-source__icon md-icon"> + + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg> + </div> + <div class="md-source__repository"> + GitHub + </div> +</a> + </div> + + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + + + <li class="md-nav__item"> + <a href="../../../COPYING/" class="md-nav__link"> + License + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="https://github.com/davatorium/rofi/issues" class="md-nav__link"> + Issue Tracker + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="https://github.com/davatorium/rofi/discussions" class="md-nav__link"> + Discussions Forum + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../downloads/" class="md-nav__link"> + Downloads + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../INSTALL/" class="md-nav__link"> + Installation + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../CONFIG/" class="md-nav__link"> + Configuration + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../themes/themes/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + + + + + <li class="md-nav__item md-nav__item--active md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_8" type="checkbox" id="__nav_8" checked> + + + + <label class="md-nav__link" for="__nav_8" tabindex="0" aria-expanded="true"> + Guides + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="Guides" data-md-level="1"> + <label class="md-nav__title" for="__nav_8"> + <span class="md-nav__icon md-icon"></span> + Guides + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../Transparency/theme3-transparency/" class="md-nav__link"> + Transparency + </a> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--active"> + + <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc"> + + + + + + <label class="md-nav__link md-nav__link--active" for="__toc"> + Positioning + <span class="md-nav__icon md-icon"></span> + </label> + + <a href="./" class="md-nav__link md-nav__link--active"> + Positioning + </a> + + + +<nav class="md-nav md-nav--secondary" aria-label="Table of contents"> + + + + + + + <label class="md-nav__title" for="__toc"> + <span class="md-nav__icon md-icon"></span> + Table of contents + </label> + <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> + + <li class="md-nav__item"> + <a href="#location-setting" class="md-nav__link"> + location setting + </a> + +</li> + + <li class="md-nav__item"> + <a href="#anchor-setting" class="md-nav__link"> + anchor setting + </a> + +</li> + + </ul> + +</nav> + + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../Plugins/2017-04-19-rofi-140-sneak-preview-plugins/" class="md-nav__link"> + Plugins + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../DynamicThemes/dynamic_themes/" class="md-nav__link"> + Dynamic Theme + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_9" type="checkbox" id="__nav_9" > + + + + <label class="md-nav__link" for="__nav_9" tabindex="0" aria-expanded="false"> + Current + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="Current" data-md-level="1"> + <label class="md-nav__title" for="__nav_9"> + <span class="md-nav__icon md-icon"></span> + Current + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../../current/rofi.1/" class="md-nav__link"> + Rofi + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../current/rofi-theme.5/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../current/rofi-dmenu.5/" class="md-nav__link"> + Dmenu + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../current/rofi-script.5/" class="md-nav__link"> + Script + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../current/rofi-debugging.5/" class="md-nav__link"> + Debugging + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../current/rofi-keys.5/" class="md-nav__link"> + Keys + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_10" type="checkbox" id="__nav_10" > + + + + <label class="md-nav__link" for="__nav_10" tabindex="0" aria-expanded="false"> + 1.7.5 + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="1.7.5" data-md-level="1"> + <label class="md-nav__title" for="__nav_10"> + <span class="md-nav__icon md-icon"></span> + 1.7.5 + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.5/rofi.1/" class="md-nav__link"> + Rofi + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.5/rofi-theme.5/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.5/rofi-dmenu.5/" class="md-nav__link"> + Dmenu + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.5/rofi-script.5/" class="md-nav__link"> + Script + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.5/rofi-debugging.5/" class="md-nav__link"> + Debugging + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.5/rofi-keys.5/" class="md-nav__link"> + Keys + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_11" type="checkbox" id="__nav_11" > + + + + <label class="md-nav__link" for="__nav_11" tabindex="0" aria-expanded="false"> + 1.7.4 + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="1.7.4" data-md-level="1"> + <label class="md-nav__title" for="__nav_11"> + <span class="md-nav__icon md-icon"></span> + 1.7.4 + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.4/rofi.1/" class="md-nav__link"> + Rofi + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.4/rofi-theme.5/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.4/rofi-dmenu.5/" class="md-nav__link"> + Dmenu + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.4/rofi-script.5/" class="md-nav__link"> + Script + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.4/rofi-debugging.5/" class="md-nav__link"> + Debugging + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.4/rofi-keys.5/" class="md-nav__link"> + Keys + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_12" type="checkbox" id="__nav_12" > + + + + <label class="md-nav__link" for="__nav_12" tabindex="0" aria-expanded="false"> + 1.7.3 + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="1.7.3" data-md-level="1"> + <label class="md-nav__title" for="__nav_12"> + <span class="md-nav__icon md-icon"></span> + 1.7.3 + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.3/rofi.1/" class="md-nav__link"> + Rofi + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.3/rofi-theme.5/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.3/rofi-dmenu.5/" class="md-nav__link"> + Dmenu + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.3/rofi-script.5/" class="md-nav__link"> + Script + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.3/rofi-debugging.5/" class="md-nav__link"> + Debugging + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.3/rofi-keys.5/" class="md-nav__link"> + Keys + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_13" type="checkbox" id="__nav_13" > + + + + <label class="md-nav__link" for="__nav_13" tabindex="0" aria-expanded="false"> + 1.7.2 + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="1.7.2" data-md-level="1"> + <label class="md-nav__title" for="__nav_13"> + <span class="md-nav__icon md-icon"></span> + 1.7.2 + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.2/rofi.1/" class="md-nav__link"> + Rofi + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.2/rofi-theme.5/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.2/rofi-script.5/" class="md-nav__link"> + Script + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_14" type="checkbox" id="__nav_14" > + + + + <label class="md-nav__link" for="__nav_14" tabindex="0" aria-expanded="false"> + 1.7.1 + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="1.7.1" data-md-level="1"> + <label class="md-nav__title" for="__nav_14"> + <span class="md-nav__icon md-icon"></span> + 1.7.1 + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.1/rofi.1/" class="md-nav__link"> + Rofi + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.1/rofi-theme.5/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.1/rofi-script.5/" class="md-nav__link"> + Script + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_15" type="checkbox" id="__nav_15" > + + + + <label class="md-nav__link" for="__nav_15" tabindex="0" aria-expanded="false"> + 1.7.0 + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="1.7.0" data-md-level="1"> + <label class="md-nav__title" for="__nav_15"> + <span class="md-nav__icon md-icon"></span> + 1.7.0 + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.0/rofi.1/" class="md-nav__link"> + Rofi + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.0/rofi-theme.5/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.0/rofi-script.5/" class="md-nav__link"> + Script + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + </ul> +</nav> + </div> + </div> + </div> + + + + <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" > + <div class="md-sidebar__scrollwrap"> + <div class="md-sidebar__inner"> + + +<nav class="md-nav md-nav--secondary" aria-label="Table of contents"> + + + + + + + <label class="md-nav__title" for="__toc"> + <span class="md-nav__icon md-icon"></span> + Table of contents + </label> + <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> + + <li class="md-nav__item"> + <a href="#location-setting" class="md-nav__link"> + location setting + </a> + +</li> + + <li class="md-nav__item"> + <a href="#anchor-setting" class="md-nav__link"> + anchor setting + </a> + +</li> + + </ul> + +</nav> + </div> + </div> + </div> + + + + <div class="md-content" data-md-component="content"> + <article class="md-content__inner md-typeset"> + + + + + + + + +<h1 id="positioning-rofi-on-the-monitor">Positioning Rofi on the monitor</h1> +<p>In the current theme format you set these properties on the <code>window</code> widget.</p> +<p>The first, location, determines where <strong>rofi</strong> is placed on the monitor, the +second what point of the <strong>rofi</strong> window connects there. This sounds +complicated, but it ain't.</p> +<h2 id="location-setting">location setting</h2> +<p>The location setting determines the place of the window on the monitor.</p> +<p>The location setting supports the following values:</p> +<ul> +<li>north</li> +<li>northeast</li> +<li>northwest</li> +<li>south</li> +<li>southeast</li> +<li>southwest</li> +<li>east</li> +<li>west</li> +<li>center</li> +</ul> +<p>This is depicted in the diagram below:</p> +<p><img alt="location" src="../anchors.svg" /></p> +<h2 id="anchor-setting">anchor setting</h2> +<p>The anchor sets what point of the <strong>rofi</strong> window is placed at the specified +<em>location</em>.</p> +<p>The <em>anchor</em> settings supports the same values as the <em>location</em> setting.</p> +<p>If you want the middle of the <strong>rofi</strong> window to be always located at the +center of the monitor set both <em>location</em> and <em>anchor</em> to <code>center</code>.</p> +<p>If the <strong>rofi</strong> window resizes, its center will stay at the center. If you set +the <em>anchor</em> to <code>north</code> the top of the <strong>rofi</strong> window is at the center of the +monitor, and the window will grow down.</p> +<p>If you set the <em>anchor</em> and <em>location</em> to <code>south</code>, <strong>rofi</strong> is located at the +bottom center and the window grows up.</p> +<blockquote> +<p>Note that if you set the <em>anchor</em> to <code>south</code> and the <em>location</em> to <code>north</code> +the <strong>rofi</strong> window will be placed above the monitor and might not be +visible.</p> +<p>In another blog post we will explain how the dynamic sizing behaviour of +<strong>rofi</strong> can be tweaked or disabled.</p> +</blockquote> +<p>So the following theme setting will place the top of the <strong>rofi</strong> window in the +center of the monitor:</p> +<pre><code class="language-css">window { + location: center; + anchor: north; +} +</code></pre> +<p>As depicted here, RED is the location (center of screen), GREEN is the anchor +on <strong>rofi</strong> window (north):</p> +<p><img alt="positions" src="../example-pos.png" /></p> +<bl |