CINXE.COM
Nastaliq and textbox boundaries - Bloom - SIL Language Software Community
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Nastaliq and textbox boundaries - Bloom - SIL Language Software Community</title> <meta name="description" content="I am using Bloom for a book using a Nastaliq script, and it generally does render the script correctly (where even Adobe products often fail!). However, I am finding that some of the characters at the right (and sometime&hellip;"> <meta name="generator" content="Discourse 3.4.0.beta3-dev - https://github.com/discourse/discourse version 5177aef37d87ea694053ecd9ddea41b471184dd4"> <link rel="icon" type="image/png" href="https://community.software.sil.org/uploads/default/optimized/2X/5/5f6b6cdfc52887a89db2e2d67fee1915a44ae53f_2_32x32.png"> <link rel="apple-touch-icon" type="image/png" href="https://community.software.sil.org/uploads/default/optimized/2X/a/ab2c98ffee8e8d75bc36c67abcb683f05518925b_2_180x180.png"> <meta name="theme-color" media="all" content="#800493"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover"> <link rel="canonical" href="https://community.software.sil.org/t/nastaliq-and-textbox-boundaries/9295" /> <link rel="search" type="application/opensearchdescription+xml" href="https://community.software.sil.org/opensearch.xml" title="SIL Language Software Community Search"> <link href="/stylesheets/color_definitions_software-sil-org_2_2_55468f8b1ac7a62d9880724bb67e11d6002e3c28.css?__ws=community.software.sil.org" media="all" rel="stylesheet" class="light-scheme"/> <link href="/stylesheets/desktop_b34611466876f3b6e817ec00274e2189bc76c515.css?__ws=community.software.sil.org" media="all" rel="stylesheet" data-target="desktop" /> <link href="/stylesheets/checklist_b34611466876f3b6e817ec00274e2189bc76c515.css?__ws=community.software.sil.org" media="all" rel="stylesheet" data-target="checklist" /> <link href="/stylesheets/discourse-details_b34611466876f3b6e817ec00274e2189bc76c515.css?__ws=community.software.sil.org" media="all" rel="stylesheet" data-target="discourse-details" /> <link href="/stylesheets/discourse-feature-voting_b34611466876f3b6e817ec00274e2189bc76c515.css?__ws=community.software.sil.org" media="all" rel="stylesheet" data-target="discourse-feature-voting" /> <link href="/stylesheets/discourse-lazy-videos_b34611466876f3b6e817ec00274e2189bc76c515.css?__ws=community.software.sil.org" media="all" rel="stylesheet" data-target="discourse-lazy-videos" /> <link href="/stylesheets/discourse-local-dates_b34611466876f3b6e817ec00274e2189bc76c515.css?__ws=community.software.sil.org" media="all" rel="stylesheet" data-target="discourse-local-dates" /> <link href="/stylesheets/discourse-narrative-bot_b34611466876f3b6e817ec00274e2189bc76c515.css?__ws=community.software.sil.org" media="all" rel="stylesheet" data-target="discourse-narrative-bot" /> <link href="/stylesheets/discourse-presence_b34611466876f3b6e817ec00274e2189bc76c515.css?__ws=community.software.sil.org" media="all" rel="stylesheet" data-target="discourse-presence" /> <link href="/stylesheets/discourse-solved_b34611466876f3b6e817ec00274e2189bc76c515.css?__ws=community.software.sil.org" media="all" rel="stylesheet" data-target="discourse-solved" /> <link href="/stylesheets/docker_manager_b34611466876f3b6e817ec00274e2189bc76c515.css?__ws=community.software.sil.org" media="all" rel="stylesheet" data-target="docker_manager" /> <link href="/stylesheets/footnote_b34611466876f3b6e817ec00274e2189bc76c515.css?__ws=community.software.sil.org" media="all" rel="stylesheet" data-target="footnote" /> <link href="/stylesheets/poll_b34611466876f3b6e817ec00274e2189bc76c515.css?__ws=community.software.sil.org" media="all" rel="stylesheet" data-target="poll" /> <link href="/stylesheets/spoiler-alert_b34611466876f3b6e817ec00274e2189bc76c515.css?__ws=community.software.sil.org" media="all" rel="stylesheet" data-target="spoiler-alert" /> <link href="/stylesheets/discourse-feature-voting_desktop_b34611466876f3b6e817ec00274e2189bc76c515.css?__ws=community.software.sil.org" media="all" rel="stylesheet" data-target="discourse-feature-voting_desktop" /> <link href="/stylesheets/poll_desktop_b34611466876f3b6e817ec00274e2189bc76c515.css?__ws=community.software.sil.org" media="all" rel="stylesheet" data-target="poll_desktop" /> <link href="/stylesheets/desktop_theme_2_e5008d28eac06ba4ea3e0301cb42cb5f3ae5a20e.css?__ws=community.software.sil.org" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="2" data-theme-name="sil"/> <link rel="alternate nofollow" type="application/rss+xml" title="RSS feed of 'Nastaliq and textbox boundaries'" href="https://community.software.sil.org/t/nastaliq-and-textbox-boundaries/9295.rss" /> <meta property="og:site_name" content="SIL Language Software Community" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:image" content="https://community.software.sil.org/uploads/default/original/2X/a/ab2c98ffee8e8d75bc36c67abcb683f05518925b.png" /> <meta property="og:image" content="https://community.software.sil.org/uploads/default/original/2X/a/ab2c98ffee8e8d75bc36c67abcb683f05518925b.png" /> <meta property="og:url" content="https://community.software.sil.org/t/nastaliq-and-textbox-boundaries/9295" /> <meta name="twitter:url" content="https://community.software.sil.org/t/nastaliq-and-textbox-boundaries/9295" /> <meta property="og:title" content="Nastaliq and textbox boundaries" /> <meta name="twitter:title" content="Nastaliq and textbox boundaries" /> <meta property="og:description" content="I am using Bloom for a book using a Nastaliq script, and it generally does render the script correctly (where even Adobe products often fail!). However, I am finding that some of the characters at the right (and sometimes top) have portions cut off by the edge of the textbox, since they tend to “flourish” beyond the straight line. The only solution I know of for now is to add spaces manually at line breaks, which of course is not ideal. However, I don’t know of any way to allow the character to ..." /> <meta name="twitter:description" content="I am using Bloom for a book using a Nastaliq script, and it generally does render the script correctly (where even Adobe products often fail!). However, I am finding that some of the characters at the right (and sometimes top) have portions cut off by the edge of the textbox, since they tend to “flourish” beyond the straight line. The only solution I know of for now is to add spaces manually at line breaks, which of course is not ideal. However, I don’t know of any way to allow the character to ..." /> <meta property="og:article:section" content="Bloom" /> <meta property="og:article:section:color" content="FFFFFF" /> <meta name="twitter:label1" value="Reading time" /> <meta name="twitter:data1" value="1 mins 🕑" /> <meta name="twitter:label2" value="Likes" /> <meta name="twitter:data2" value="5 ❤" /> <meta property="article:published_time" content="2024-10-23T16:01:53+00:00" /> <meta property="og:ignore_canonical" content="true" /> <script type="application/ld+json">{"@context":"http://schema.org","@type":"QAPage","name":"Nastaliq and textbox boundaries","mainEntity":{"@type":"Question","name":"Nastaliq and textbox boundaries","text":"I am using Bloom for a book using a Nastaliq script, and it generally does render the script correctly (where even Adobe products often fail!). However, I am finding that some of the characters at the right (and sometimes top) have portions cut off by the edge of the textbox, since they tend to “flo…","upvoteCount":0,"answerCount":0,"datePublished":"2024-10-23T16:01:53.532Z","author":{"@type":"Person","name":"Bethany","url":"https://community.software.sil.org/u/Bethany"}}}</script> </head> <body class="crawler browser-update"> <nav id="bar"> <a id="softwareSiteLink" href="http://software.sil.org"> <img src="/uploads/default/original/2X/e/ef582ee150167aae331b77366d9b8774585dd95d.png" alt="SIL Language Software"> </a> <ul> <li><a href="http://software.sil.org/news/">News</a></li> <li><a href="http://software.sil.org/products/">Products</a></li> <li><a href="http://software.sil.org/about/">Contact</a></li> </ul> </nav> <header> <a href="/"> SIL Language Software Community </a> </header> <div id="main-outlet" class="wrap" role="main"> <div id="topic-title"> <h1> <a href="/t/nastaliq-and-textbox-boundaries/9295">Nastaliq and textbox boundaries</a> </h1> <div class="topic-category" itemscope itemtype="http://schema.org/BreadcrumbList"> <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="/c/bloom/5" class="badge-wrapper bullet" itemprop="item"> <span class='badge-category-bg' style='background-color: #FFFFFF'></span> <span class='badge-category clear-badge'> <span class='category-name' itemprop='name'>Bloom</span> </span> </a> <meta itemprop="position" content="1" /> </span> </div> </div> <div itemscope itemtype='http://schema.org/DiscussionForumPosting'> <meta itemprop='headline' content='Nastaliq and textbox boundaries'> <link itemprop='url' href='https://community.software.sil.org/t/nastaliq-and-textbox-boundaries/9295'> <meta itemprop='datePublished' content='2024-10-23T16:01:53Z'> <meta itemprop='articleSection' content='Bloom'> <meta itemprop='keywords' content=''> <div itemprop='publisher' itemscope itemtype="http://schema.org/Organization"> <meta itemprop='name' content='SIL International'> <div itemprop='logo' itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop='url' content='https://community.software.sil.org/uploads/default/original/1X/43507a8a0b20553fc8d5ff0c509b36326aff3dbf.png'> </div> </div> <div id='post_1' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://community.software.sil.org/u/Bethany'><span itemprop='name'>Bethany</span></a> </span> <link itemprop="mainEntityOfPage" href="https://community.software.sil.org/t/nastaliq-and-textbox-boundaries/9295"> <span class="crawler-post-infos"> <time datetime='2024-10-23T16:01:53Z' class='post-time'> October 23, 2024, 4:01pm </time> <meta itemprop='dateModified' content='2024-10-23T16:01:53Z'> <span itemprop='position'>1</span> </span> </div> <div class='post' itemprop='text'> <p>I am using Bloom for a book using a Nastaliq script, and it generally does render the script correctly (where even Adobe products often fail!). However, I am finding that some of the characters at the right (and sometimes top) have portions cut off by the edge of the textbox, since they tend to “flourish” beyond the straight line. The only solution I know of for now is to add spaces manually at line breaks, which of course is not ideal. However, I don’t know of any way to allow the character to print beyond the border of the text box. Adding a very narrow (and empty) textbox at the right margin does not seem to fix it either - my conclusion is that it is the textbox cutting it off, not just the margin. Is putting multiple manual spaces at line breaks (and thus having to readjust those multiple spaces any time an edit changes line breaks) the only way around this issue in Bloom for now? Or is there a solution I am missing? I’ve seen other posts here about Nastaliq, so I wonder if other users have a way to work with this that is better than manual tweaks?</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_2' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://community.software.sil.org/u/JohnHatton'><span itemprop='name'>JohnHatton</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-10-23T16:38:12Z' class='post-time'> October 23, 2024, 4:38pm </time> <meta itemprop='dateModified' content='2024-10-23T16:38:12Z'> <span itemprop='position'>2</span> </span> </div> <div class='post' itemprop='text'> <p>Hi Bethany,<br> As you might have heard, Nastaliq is the primary remaining script that isn’t handled well by the standard font-rendering system in web browsers (and thus Bloom). So it is not a surprise that you’re having difficulties.</p> <p>Can you please create a page showing the problem, and then do a “Report a problem” and send us the book? That will help us see the issue directly. If you can stick a screenshot of how the text <em>should</em> look as the image on the page, all the better.</p> <p>I don’t know if we’ll find anything helpful, but we’ll try!</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="1" /> <span class='post-likes'>1 Like</span> </div> </div> <div id='post_3' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://community.software.sil.org/u/Malachi_James'><span itemprop='name'>Malachi_James</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-10-24T19:12:11Z' class='post-time'> October 24, 2024, 7:12pm </time> <meta itemprop='dateModified' content='2024-10-24T19:12:11Z'> <span itemprop='position'>3</span> </span> </div> <div class='post' itemprop='text'> <p>I know a bit about Nastaliq, but little about Bloom.</p> <p>Nastaliq font definitions tend to allow small parts of the glyphs cross the boundary into the “margin”, so that the main weight of the font feels like it’s on the margin line (in the same way that some punctuation is allowed to slightly cross the margin lines in some Latin script software). And the words can often extend higher vertically than the font defines as the baseline height.</p> <p>Is there any way to create padding in Bloom, so that the margin of the text is slightly inside the display box? If so, that would solve the problem.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="2" /> <span class='post-likes'>2 Likes</span> </div> </div> <div id='post_4' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://community.software.sil.org/u/bobby'><span itemprop='name'>bobby</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-10-24T22:10:35Z' class='post-time'> October 24, 2024, 10:10pm </time> <meta itemprop='dateModified' content='2024-10-24T22:10:35Z'> <span itemprop='position'>4</span> </span> </div> <div class='post' itemprop='text'> <aside class="quote no-group" data-username="Malachi_James" data-post="3" data-topic="9295"> <div class="title"> <div class="quote-controls"></div> <img loading="lazy" alt="" width="24" height="24" src="https://community.software.sil.org/letter_avatar_proxy/v4/letter/m/e9c0ed/48.png" class="avatar"> Malachi_James:</div> <blockquote> <p>words can often extend higher vertically than the font defines as the baseline height</p> </blockquote> </aside> <p>What do you mean by baseline height? You are correct, fonts have values that help define line height, and WSTech has made fonts for applications developers to test with about line spacing. For the very technical details on all of this you can read</p> <ul> <li><a href="https://silnrsi.github.io/FDBP/en-US/Design_Metrics.html" class="inline-onebox" rel="noopener nofollow ugc">Font Development Best Practices: Design Metrics</a></li> <li><a href="https://silnrsi.github.io/FDBP/en-US/Line_Metrics.html" class="inline-onebox" rel="noopener nofollow ugc">Font Development Best Practices: Line Metrics</a></li> </ul> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_5' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://community.software.sil.org/u/JohnHatton'><span itemprop='name'>JohnHatton</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-10-24T22:45:26Z' class='post-time'> October 24, 2024, 10:45pm </time> <meta itemprop='dateModified' content='2024-10-24T22:45:26Z'> <span itemprop='position'>5</span> </span> </div> <div class='post' itemprop='text'> <p>We’ve worked this out with Bethany for now. In Bloom 6.0, there is most situations automatic padding that leaves room for these characters that extend out. But to be sure there is always room, we showed Bethany how to use CSS to add some padding relative to the font-size. She’s going to give that a try.</p> <p>If there is sufficient demand, we could add a way in the user interface to adding padding for any text “style”.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="1" /> <span class='post-likes'>1 Like</span> </div> </div> <div id='post_6' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://community.software.sil.org/u/Bethany'><span itemprop='name'>Bethany</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-10-30T19:24:37Z' class='post-time'> October 30, 2024, 7:24pm </time> <meta itemprop='dateModified' content='2024-10-30T19:24:37Z'> <span itemprop='position'>6</span> </span> </div> <div class='post' itemprop='text'> <p>Yes, thank you each for the input, and to the Bloom techs for the help. Padding was precisely what was needed for a good simple solution, and the combination of CSS and a 6.0 upgrade seems to allow each character to be fully visible.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="1" /> <span class='post-likes'>1 Like</span> </div> </div> </div> </div> <footer class="container wrap"> <nav class='crawler-nav'> <ul> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/' itemprop="url">Home </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/categories' itemprop="url">Categories </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/guidelines' itemprop="url">Guidelines </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='http://software.sil.org/terms-of-use/' itemprop="url">Terms of Service </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='http://software.sil.org/privacy-policy/' itemprop="url">Privacy Policy </a> </span> </li> </ul> </nav> <p class='powered-by-link'>Powered by <a href="https://www.discourse.org">Discourse</a>, best viewed with JavaScript enabled</p> </footer> <div class="buorg"><div>Unfortunately, <a href="https://www.discourse.org/faq/#browser">your browser is unsupported</a>. Please <a href="https://browsehappy.com">switch to a supported browser</a> to view rich content, log in and reply.</div></div> </body> </html>