{"id":3141,"date":"2024-04-03T12:01:58","date_gmt":"2024-04-03T12:01:58","guid":{"rendered":"https:\/\/ttc.secture-test.com\/?p=3141"},"modified":"2024-08-27T02:11:08","modified_gmt":"2024-08-27T02:11:08","slug":"text-panels","status":"publish","type":"post","link":"https:\/\/ttc.secture-test.com\/es\/text-panels\/","title":{"rendered":"Text panels"},"content":{"rendered":"<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Render text using these panels. Explore numerous tags for formatting custom parts of your text. In this article, you will find the following information:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#fontusageandtroubleshooting\" data-type=\"internal\" data-id=\"#fontusageandtroubleshooting\">Font usage optimization and troubleshooting<\/a><\/li>\n\n\n\n<li><a href=\"#WYSIWYGeditor\" data-type=\"internal\" data-id=\"#WYSIWYGeditor\">WYSIWYG editor: Tips and Tools<\/a><\/li>\n\n\n\n<li><a href=\"#textproperties\" data-type=\"internal\" data-id=\"#textproperties\">Text properties<\/a><\/li>\n\n\n\n<li><a href=\"#richtexttags\" data-type=\"internal\" data-id=\"#richtexttags\">Text panels: Rich text tags<\/a><\/li>\n<\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"fontusageandtroubleshooting\">Font usage optimization and troubleshooting<\/h1>\n\n\n\n<p>Here&#8217;s some valuable information to ensure optimal font utilization and troubleshoot display problems:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Leveraging system fonts<\/strong><\/h3>\n\n\n\n<p>Utilize all the fonts available in your system to diversify your design options. Alternatively, for enhanced portability, consider copying the .ttf \/ .otf files to the \/assets\/fonts\/ folder within your project.<\/p>\n\n\n\n<p><strong>Pro Tip:<\/strong> After installing new fonts, remember to reload the project to ensure smooth integration.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Troubleshooting font display<\/strong><\/h3>\n\n\n\n<p>Encountering squares (&#8220;\u25a1\u25a1\u25a1\u25a1&#8221;) instead of text in your panels? This often indicates that the selected font lacks glyphs for the language characters you&#8217;re trying to display. To address this issue:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Choose a compatible font:<\/strong> Opt for a font known to support the range of characters you require. For instance, the built-in Noto Sans font covers a wide variety of languages, ensuring comprehensive character support.<\/li>\n<\/ul>\n\n\n\n<p>Remember, the accurate display of language-specific characters is pivotal for effective communication in your designs.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"WYSIWYGeditor\"><strong>WYSIWYG editor: Tips and Tools<\/strong><\/h1>\n\n\n\n<p>Here are some valuable tips and tools to help you make the most of it:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Adjusting text readability<\/strong><\/h3>\n\n\n\n<p>Encountering difficulties with input text readability? Whether it&#8217;s text appearing too large, small, or experiencing color issues, you can easily troubleshoot by toggling the <strong>WYSIWYG editor<\/strong>. Simply check the checkbox to reveal all formatting tags, providing better visibility and control over text formatting.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/pixelatto.notion.site\/image\/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F17a54a2f-7bb2-42e1-b625-50b1d19cf43f%2FUntitled.png?table=block&amp;id=bf428c4a-5c2f-4cef-8f40-acdec90aec72&amp;spaceId=87d95115-9037-4756-b44c-b2757164bdde&amp;width=1670&amp;userId=&amp;cache=v2\" alt=\"\" style=\"width:600px\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Pro tip:<\/strong> Disable the WYSIWYG checkbox to remove all formatting tags swiftly using the &#8220;Remove tags&#8221; button.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/pixelatto.notion.site\/image\/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F742e45c1-819f-4a5e-8da7-45c06cbce33b%2FUntitled.png?table=block&amp;id=9cc2a71d-5ef1-4ca3-9a74-9383ac8e1b16&amp;spaceId=87d95115-9037-4756-b44c-b2757164bdde&amp;width=1670&amp;userId=&amp;cache=v2\" alt=\"\" style=\"width:600px\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Utilizing formatting tools<\/strong><\/h3>\n\n\n\n<p>Harness the power of formatting buttons within the WYSIWYG editor to customize your text effortlessly. From setting text attributes like <strong>bold<\/strong>, <strong>italic<\/strong>, <strong>underline<\/strong>, <strong>strikethrough<\/strong>, to adjusting <strong>color<\/strong>, <strong>size<\/strong>, <strong>superscript<\/strong>, <strong>subscript<\/strong>, <strong>indentation<\/strong>, <strong>font<\/strong>, <strong>icon<\/strong>, <strong>variable<\/strong> y <strong>alignment<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img fetchpriority=\"high\" decoding=\"async\" width=\"652\" height=\"566\" src=\"https:\/\/ttc.secture-test.com\/wp-content\/uploads\/2024\/03\/Text-Panel-Formatting-Tools.png\" alt=\"\" class=\"wp-image-3156\" style=\"width:300px\"\/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"textproperties\">Text properties<\/h1>\n\n\n\n<p>The editor offers a comprehensive set of formatting tools, allowing you to customize your text to fit your design needs:<\/p>\n\n\n\n<figure class=\"wp-block-image alignright size-full is-resized\"><img decoding=\"async\" width=\"626\" height=\"920\" src=\"https:\/\/ttc.secture-test.com\/wp-content\/uploads\/2024\/04\/Text-Panel-Properties.png\" alt=\"\" class=\"wp-image-4846\" style=\"width:355px;height:auto\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Color<\/strong>: Select the color of your text.<\/li>\n\n\n\n<li><strong>Background Color<\/strong>: Choose a background color that applies to the entire text panel, not just the text, to create a distinct block of color or to contrast with the page background.<\/li>\n\n\n\n<li><strong>Font<\/strong>: Choose a variety of fonts for your text. The dropdown is organized into several sections for ease of access:\n<ol class=\"wp-block-list\">\n<li>The five most recently selected fonts for quick reference.<\/li>\n\n\n\n<li>Fonts used elsewhere in your project to maintain consistency.<\/li>\n\n\n\n<li>Custom fonts added to the \/assets\/fonts\/ directory for personalized styling.<\/li>\n\n\n\n<li>Available system fonts that offer a broad selection.\n<ul class=\"wp-block-list\">\n<li><em><strong>Note<\/strong>: The list of recent and project-used fonts updates automatically. Remember to reload your project after adding new system fonts or copying fonts to the project folder to see them in the dropdown.<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>RTL (Right-To-Left)<\/strong>: Switch <strong>on<\/strong> for languages\/fonts that flow from right to left. Set text alignment to right and choose a compatible font to ensure proper character and ligature display. Be aware that certain languages or fonts may affect typography ligatures in RTL.<\/li>\n\n\n\n<li><strong>Autosize<\/strong>: Automatically adjust the text to fit within the panel dimensions.<\/li>\n\n\n\n<li><strong>Min and Max Size<\/strong>: Set the smallest and largest sizes for your text.<\/li>\n\n\n\n<li><strong>Font Style<\/strong>: Apply bold, italic, underline, or strikethrough styles to enhance text emphasis.<\/li>\n\n\n\n<li><strong>Alignment<\/strong>: Align your text to the left, center, right, or justify it within the panel.<\/li>\n\n\n\n<li><strong>Wrapping<\/strong>: Control how text wraps and handles overflow within the panel.<\/li>\n\n\n\n<li><strong>Overflow<\/strong>: Manage how text that exceeds the panel size is handled, with options like overflow, ellipsis, or truncate to ensure a clean and readable appearance.<\/li>\n\n\n\n<li><strong>Char and Line Spacing<\/strong>: Fine-tune the space between characters and lines for better readability.<\/li>\n\n\n\n<li><strong>Paragraph Spacing<\/strong>: Manage the spacing between paragraphs to structure your text clearly.<\/li>\n\n\n\n<li><strong>Outline Color<\/strong>: Add a distinct color outline to your text.<\/li>\n\n\n\n<li><strong>Outline Mode<\/strong>: Choose the mode for the text outline, with options like Outer, Centered, or Inner.<\/li>\n\n\n\n<li><strong>Outline Thickness<\/strong>: Determine the thickness of the text outline for visual emphasis. The outline size ranges between 0 and 100% relative to the font size.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"richtexttags\">Text panels: Rich text tags<\/h1>\n\n\n\n<p>Text panels in Tabletop Creator support a variety of rich text tags, allowing you to customize the styling and appearance of your text. When editing rich text tags, <strong>disable the WYSIWYG editor<\/strong> to make manual adjustments.<\/p>\n\n\n\n<p>There are tags that support additional values; if they are numeric, you can use percentages like <code>80%<\/code> <code>-20%<\/code> or in discrete values like <code>20<\/code> <code>-35<\/code> <code>0.5<\/code>.<\/p>\n\n\n\n<p>Remember to close a tag with this format: <code>&lt;\/TAG_NAME&gt;<\/code> (for example: <code>&lt;\/b&gt;<\/code>, <code>&lt;\/align&gt;<\/code>, <code>&lt;\/font&gt;<\/code>).<\/p>\n\n\n\n<p>Here&#8217;s a comprehensive list of supported tags:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Tag<\/th><th>Description<\/th><\/tr><\/thead><tbody><tr><td>&lt;b&gt;<\/td><td>Apply bold styling.<\/td><\/tr><tr><td>&lt;i&gt;<\/td><td>Apply italic styling.<\/td><\/tr><tr><td>&lt;u&gt;<\/td><td>Apply underline styling.<\/td><\/tr><tr><td>&lt;s&gt;<\/td><td>Apply strikethrough styling.<\/td><\/tr><tr><td>&lt;color=#RRGGBB&gt;<\/td><td>Change the text color.<\/td><\/tr><tr><td>&lt;color=#RRGGBBAA&gt;<\/td><td>Change the text color.<\/td><\/tr><tr><td>&lt;alpha=#AA&gt;<\/td><td>Change the text alpha color.<\/td><\/tr><tr><td>&lt;mark=#RRGGBBAA&gt;<\/td><td>Add an overlay to highlight text.<\/td><\/tr><tr><td>&lt;size=75%&gt;<\/td><td>Adjust the font size.<\/td><\/tr><tr><td>&lt;sup&gt;<\/td><td>Apply superscript styling.<\/td><\/tr><tr><td>&lt;sub&gt;<\/td><td>Apply subscript styling.<\/td><\/tr><tr><td>&lt;indent=15%&gt;<\/td><td>Control horizontal caret position across lines; use with left alignment.<\/td><\/tr><tr><td>&lt;line-indent=20%&gt;<\/td><td>Insert horizontal space after it and before new lines.<\/td><\/tr><tr><td>&lt;align=&#8221;left&#8221;&gt;<\/td><td>Change text alignment to left.<\/td><\/tr><tr><td>&lt;align=&#8221;center&#8221;&gt;<\/td><td>Change text alignment to center.<\/td><\/tr><tr><td>&lt;align=&#8221;right&#8221;&gt;<\/td><td>Change text alignment to right.<\/td><\/tr><tr><td>&lt;align=&#8221;justified&#8221;&gt;<\/td><td>Change text alignment to justified.<\/td><\/tr><tr><td>&lt;cspace=80%&gt;<\/td><td>Adjust character spacing.<\/td><\/tr><tr><td>&lt;mspace=15&gt;<\/td><td>Set monospace character spacing.<\/td><\/tr><tr><td>&lt;space=30&gt;<\/td><td>Insert a horizontal offset.<\/td><\/tr><tr><td>&lt;margin=10&gt;<\/td><td>Adjust horizontal margins.<\/td><\/tr><tr><td>&lt;margin-left=10&gt;<\/td><td>Adjust left horizontal margin.<\/td><\/tr><tr><td>&lt;margin-right=10&gt;<\/td><td>Adjust right horizontal margin.<\/td><\/tr><tr><td>&lt;width=50%&gt;<\/td><td>Adjust horizontal size of text area, limited by panel size.<\/td><\/tr><tr><td>&lt;pos=45%&gt;<\/td><td>Control horizontal caret position for one line.<\/td><\/tr><tr><td>&lt;line-height=120%&gt;<\/td><td>Adjust line height; use with &lt;voffset=30&gt; to avoid auto-adjust for displaced text.<\/td><\/tr><tr><td>&lt;voffset=30&gt;<\/td><td>Apply vertical offset to text; line height adjusts automatically.<\/td><\/tr><tr><td>&lt;font=&#8221;Arial&#8221;&gt;<\/td><td>Switch fonts; embed icons from vector icon fonts.<\/td><\/tr><tr><td>&lt;lowercase&gt;<\/td><td>Alter capitalization to lowercase.<\/td><\/tr><tr><td>&lt;uppercase&gt;<\/td><td>Alter capitalization to uppercase.<\/td><\/tr><tr><td>&lt;smallcaps&gt;<\/td><td>Decrease size of non-uppercase characters; appears like uppercase.<\/td><\/tr><tr><td>&lt;nobr&gt;<\/td><td>Prevent text separation by word wrapping.<\/td><\/tr><tr><td>&lt;noparse&gt;<\/td><td>Ignore rich text tags within enclosed text.<\/td><\/tr><tr><td>&lt;unicode&gt;<\/td><td>Render unicode characters without actual characters. Use with &lt;font&gt; for icons. Example: &lt;unicode&gt;2665&lt;\/unicode&gt; \u2192 \u2665 (U+2665 BLACK HEART SUIT).<\/td><\/tr><tr><td>&lt;nbsp&gt;<\/td><td>Provides a space that will not be affected by word wrapping, providing a space that won&#8217;t be affected by word breaks.<\/td><\/tr><tr><td>&lt;zwsp&gt;<\/td><td>Represents a zero-width space, useful for separating words or characters without adding visible space on the page.<\/td><\/tr><tr><td>&lt;br&gt;<\/td><td>Indicates a line break. Used to break a line of text and start on a new line.<\/td><\/tr><tr><td>&lt;i angle=#&gt;&lt;\/i&gt;<\/td><td>Allows rotating the text within it by a specified angle, specified by the # value in degrees, using a style-like tag format.<\/td><\/tr><tr><td>&lt;rotate=#&gt;&lt;\/rotate&gt;<\/td><td>Allows rotating the text within it by a specified angle, specified by the # value in degrees, using a specific rotation tag.<\/td><\/tr><tr><td>&lt;allcaps&gt;<\/td><td>Converts all text contained within it to uppercase, regardless of its original case.<\/td><\/tr><\/tbody><\/table><\/figure>","protected":false},"excerpt":{"rendered":"<p>Render text using these panels. Explore numerous tags for formatting custom parts of your text. In this article, you will find the following information: Font usage optimization and troubleshooting Here&#8217;s some valuable information to ensure optimal font utilization and troubleshoot display problems: 1. Leveraging system fonts Utilize all the fonts available in your system to [&hellip;]<\/p>","protected":false},"author":7,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,14],"tags":[],"class_list":["post-3141","post","type-post","status-publish","format-standard","hentry","category-panels","category-documentation"],"_links":{"self":[{"href":"https:\/\/ttc.secture-test.com\/es\/wp-json\/wp\/v2\/posts\/3141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ttc.secture-test.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ttc.secture-test.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ttc.secture-test.com\/es\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/ttc.secture-test.com\/es\/wp-json\/wp\/v2\/comments?post=3141"}],"version-history":[{"count":13,"href":"https:\/\/ttc.secture-test.com\/es\/wp-json\/wp\/v2\/posts\/3141\/revisions"}],"predecessor-version":[{"id":5377,"href":"https:\/\/ttc.secture-test.com\/es\/wp-json\/wp\/v2\/posts\/3141\/revisions\/5377"}],"wp:attachment":[{"href":"https:\/\/ttc.secture-test.com\/es\/wp-json\/wp\/v2\/media?parent=3141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ttc.secture-test.com\/es\/wp-json\/wp\/v2\/categories?post=3141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ttc.secture-test.com\/es\/wp-json\/wp\/v2\/tags?post=3141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}