One place for hosting & domains

      How to Fix White Text and Missing Buttons in the WordPress Visual Editor (5 Steps)


      Picture this: You log in to your WordPress dashboard to write a new blog post. You fire up the Classic Editor, only to find a problem. All of the formatting buttons are missing, and the text is white and impossible to see.

      Encountering this error can be frustrating. It may even prevent you from getting work done, potentially putting you behind schedule. Fortunately, there are several solutions to this issue.

      In this article, we’ll look at exactly what this error involves and then walk you through how to fix it in five steps. Let’s get started!

      An Introduction to the White Text and Missing Buttons Error in the WordPress Visual Editor

      Before we dig into this error, let’s clarify exactly what we mean by the “visual editor.” This refers to the nicely-formatted editor you use to create your posts or pages in WordPress, whether that’s the Classic Editor or the newer Block Editor.

      The error we’re dealing with in this article occurs with the visual editor when using the Classic Editor plugin.

      The WordPress visual editor.

      The formatting buttons along the top suddenly vanish. Additionally, the text you write in the editor field may appear the same color as the background, making it unreadable.

      This makes using the Classic Editor pretty much impossible. If you rely on it to create your blog content, you’ll want to fix this problem as quickly as possible. Fortunately, this issue isn’t difficult to correct.

      What to Do Before You Start Troubleshooting

      Before you start troubleshooting, we recommend making a backup of your site. If you’re using DreamHost, we make the backup process incredibly easy.

      If you’re using a different hosting provider, it likely also offers a backup solution. You can consult the appropriate documentation for instructions. You can also opt for a WordPress backup plugin such as UpdraftPlus.

      Skip the WordPress Error Stress

      Avoid troubleshooting when you sign up for DreamPress. Our friendly WordPress experts are available 24/7 to help solve website problems — big or small.

      How to Fix White Text and Missing Buttons in the WordPress Visual Editor (In 5 Steps)

      This error is most likely either a problem with your browser cache or with the Classic Editor itself  — both of which can be easily fixed. We recommend following these five steps in order, and only proceeding to the next if you’re still experiencing the issue.

      Step 1: Clear Your Browser Cache

      The first and simplest method you can try is clearing your browser cache. Your browser saves versions of websites you visit (including your WordPress editor) to make loading them quicker.

      If your cache is corrupted or has stored a version of a page with errors, it may continue to load the broken page. Clearing the cache forces the browser to load a fresh copy of the editor, hopefully resolving the problem.

      To clear your cache in Google Chrome, click on the three-dot menu icon in the upper-right corner, and then click on Settings. Under the Privacy and security section, select Clear browsing data.

      Options for clearing user data and cache in Google Chrome.

      In the pop-up, make sure only Cached images and files is selected, and then click on Clear data. If you don’t use Chrome or want further guidance, you can refer to our guide on clearing your browser cache.

      Step 2: Deactivate All of Your WordPress Plugins

      Next, you can check if a plugin might be causing the issue. The best way to do this is to deactivate all your plugins (except for the Classic Editor), check to see if the problem is resolved, and then re-enable them one by one until the error returns.

      At that point, you’ll have isolated the problematic plugin. Then you can check for updates, look for alternatives, or simply leave it deactivated if it’s one you don’t depend on.

      To deactivate your WordPress plugins, head to the dashboard and navigate to Plugins > Installed Plugins.

      Check the box next to all of the plugins except for the Classic Editor. In the Bulk actions box, you can choose Deactivate and click on Apply. Then reload the WordPress editor and verify that everything is working properly.

      If deactivating your plugins resolved the error, your next step is to isolate the plugin that was causing it. You can go down the list one by one and click on the Activate button under the plugin’s name. After each one is reactivated, check to see if the error has reappeared. If not, you can move on until you find the problematic plugin.

      Step 3: Replace the TinyMCE Folder

      TinyMCE is the technical name for the WordPress Classic Editor. It’s an open-source editor that’s used by quite a few platforms, in addition to WordPress.

      An issue with the TinyMCE files can cause the editor’s buttons to disappear. To fix this, you can replace the folder with a fresh copy.

      First, download the version of WordPress your site is using. You can find the current version number by checking the bottom-right corner of any page in your WordPress dashboard.

      The WordPress version in use on a website.

      Open up the WordPress zip file and move the TinyMCE folder somewhere else, such as your desktop. It’s located at wp-includes/js/tinymce.

      Finally, you’ll need to access your WordPress site’s file system and replace the old folder with the new one. Head to your DreamPress account (see Step 1 for instructions). Under the Details section, click on Manage Files to open the DreamHost file browser.

      The DreamHost file manager.

      If you’re not a DreamHost customer, you can also access your site via Secure File Transfer Protocol (SFTP). Navigate to wp-includes/js and upload the new copy of the TinyMCE folder using the “up arrow” button in the bottom left. Then you can refresh your WordPress dashboard and check the editor again.

      Step 4: Modify the wp-config.php File

      If the above fixes haven’t worked, you can try modifying your wp-config.php file to force WordPress to load scripts individually. To do so, start by opening up your WordPress site in the DreamHost file manager or via SFTP, as outlined above.

      The wp-config.php file is located in the root directory of your site. Simply add the following line of code to the top of the file, right after the opening <php> tag:

      define(‘CONCATENATE_SCRIPTS’,false);

      Here’s what your code should look like:

      The wp-config.php file, showing the location of the opening <php> tag.

      When you’re done, save the file, refresh your site, and then try to load the visual editor again. If you’re still seeing the error message, proceed to the last step.

      Step 5: Install the Advanced Editor Tools Plugin

      Previously known as TinyMCE Advanced, the Advanced Editor Tools plugin is a version of the TinyMCE script that offers additional features.

      The Advanced Editor Tools plugin.

      Essentially, it provides you with a hybrid of the TinyMCE editor and the Block Editor. Also, it’s free to download and use.

      After you install and activate it, you can locate the settings by navigating to Settings > Advanced Editor Tools.

      The Advanced Editor Tools plugin settings.

      Once it’s activated and you’ve configured the settings to your liking, refresh your WordPress site. Now, when you go to a new WordPress post or page, you should see that the previously-missing buttons appear in your visual editor.

      Additional WordPress Issue Resources

      Want to learn more about fixing common WordPress errors? We’ve put together several guides to help you.

      Website Management Made Easy

      Let us handle the backend — we’ll manage and monitor your website so it’s safe, secure, and always up.

      WordPress Visual Editor Problem, Solved

      If your WordPress editor is experiencing problems, such as unreadable white text or disappearing buttons, don’t worry. Like many WordPress errors, this one is relatively simple to fix, and there are multiple methods you can try.

      As we’ve discussed, you can follow these five steps to resolve the white text and missing buttons error in the WordPress editor:

      1. Clear your browser cache.
      2. Deactivate your WordPress plugins.
      3. Replace the TinyMCE folder with a fresh copy.
      4. Modify your wp-config.php file.
      5. Install the Advanced Editor Tools plugin.

      If you want to make troubleshooting easier, consider using DreamPress, our managed WordPress hosting solution. With DreamPress, we take care of problems for you, so you can focus on what matters.



      Source link

      How To Lay Out Text with CSS


      The author selected the Diversity in Tech Fund to receive a donation as part of the Write for DOnations program.

      Introduction

      The way text is presented on a web page determines how legible the content is and how willing the reader is to read the content. Web typesetting, the art of laying out text, is about controlling the content to present the reader with a pleasant and efficient reading experience.

      This tutorial will teach you how to use the CSS properties that are most effective at laying out text content. You will use properties like line-height, letter-spacing, and text-transform with demo content to optimize for reading and define a content hierarchy by giving headings prominence. These concepts and approaches will help you better present content on your websites.

      Prerequisites

      Setting Up the HTML and CSS Files

      In this section you will set up the HTML content that you will style throughout the tutorial. The purpose of the HTML in this tutorial is to provide various elements and situations to style. You will also create your CSS file and set a base style.

      To begin, open index.html in your text editor and add the following HTML to the file:

      index.html

      <!doctype html>
      <html>
          <head>
          </head>
          <body>
          </body>
      </html>
      

      Next, in the <head> tag, you will add a meta tag for the character set for this page, a title element for the title of the page, a meta tag defining how the page should be handled on mobile devices, and the CSS files to load:

      index.html

      <!doctype html>
      <html>
          <head>
              <meta charset="UTF-8" />
              <title>Text Layout</title>
              <meta name="viewport" content="width=device-width" />
              <link rel="preconnect" href="https://fonts.gstatic.com" />
              <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&amp;family=Quicksand:wght@700&amp;display=swap" rel="stylesheet" />
              <link href="https://www.digitalocean.com/community/tutorials/styles.css" rel="stylesheet" />
          </head>
          <body>
          </body>
      </html>
      

      Notice that the CSS files include a couple of fonts from Google Fonts and the styles.css file you will create later in this section. If you’d like to learn more about how to use Google Fonts, check out How To Style Text Elements with Font, Size, and Color in CSS.

      Now you will set up the HTML content contained within the page’s <body> tag. This content will be contained in an <article>, which will have an <h1> element, a couple each of <h2> and <h3> elements, and several <p> elements throughout. You will fill these tags with text content from the Cupcake Ipsum filler text generator. This filler content will provide all that is needed to apply visual styles for this tutorial.

      Apply the HTML to your index.html, as shown in the highlighted sections of the following code block:

      index.html

      <!doctype html>
      <html>
          <head>
              ...
          </head>
          <body>
              <article>
                  <h1>Sugar plum chupa chups chocolate bar cupcake donut</h1>
                  <h2>Tootsie roll oat cake macaroon</h2>
                  <p>Jujubes brownie candy. Dessert tootsie roll pie gummi bears danish cotton candy. Sugar plum <strong>I love fruitcake pastry</strong>. Jelly-o gummi bears muffin gummi bears marzipan cheesecake donut gingerbread I love. Cupcake wafer cake.</p>
                  <p>Cupcake donut topping <em><strong>chupa chups halvah</strong></em> chupa chups. Macaroon tootsie roll cupcake caramels chocolate fruitcake gingerbread jelly-o. Tiramisu I love marshmallow jelly-o I love jelly beans candy gummi bears.</p>
                  <h2>Jelly beans tiramisu pastry danish donut</h2>
                  <h3>Lemon drops pastry marshmallow</h3>
                  <p>I love marshmallow candy. <em>Sesame snaps</em> muffin danish. Chocolate cake cookie jelly-o tiramisu halvah brownie halvah chocolate chocolate cake. Jelly-o caramels jujubes bonbon cupcake danish tootsie roll chocolate bar. Macaroon I love muffin candy canes sweet roll I love. I love bonbon marshmallow croissant ice cream I love gummi bears.</p>
                  <p>Pie apple pie I love jujubes biscuit I love. Chocolate cake pastry tiramisu <strong>soufflé powder caramels</strong> I love ice cream. Dragée liquorice toffee jelly jelly beans. Sesame snaps candy canes soufflé. Biscuit donut bear claw jujubes halvah pastry macaroon lemon drops. Tootsie roll dragée cookie candy soufflé dragée cupcake liquorice.</p>
                  <h3>Apple pie pudding topping</h3>
                  <p>Powder dragée sesame snaps candy canes jelly-o. Halvah gingerbread cheesecake wafer. <strong><em>Wafer tootsie roll</em></strong> I love I love. Cake toffee I love. Cotton candy cotton candy jelly beans I love bonbon toffee. Chupa chups chupa chups caramels ice cream halvah candy chocolate cake. Marshmallow carrot cake jelly beans.</p>
                  <p>Chocolate cake sweet roll pudding chocolate cake fruitcake bear claw.</p>
              </article>
          </body>
      </html>
      

      Save all these additions to your index.html file and then open the file in your web browser. As you write your styles, have the index.html file loaded in your browser to check how your styles are applied to the content:

      Content in a serif font with black text on a white background.

      Next, create a file in the same directory as index.html called styles.css and open the new file in your text editor.

      There are two font families that you will load from Google fonts. The first font will be the default font for the page, as it will be used by all content on the page.

      Create a body type selector and add a font-family property with the font stack 'Public Sans', sans-serif to set this as the new default font:

      styles.css

      body {
          font-family: 'Public Sans', sans-serif;
      }
      

      This applies the font to the body element. All the content in this example will inherit that font, without needing to be declared individually. The font name is Public Sans, and it will have a fallback font that uses the browser’s default sans-serif font. Fonts should always have a fallback font using a comma separated list called a font stack. Fallback fonts provide a readable option if the custom font doesn’t load or lacks a special character.

      Next, the heading elements, h1, h2, and h3, will get a special font for the rest of the page called Quicksand. Create a group selector consisting of the three headers h1, h2, h3 and apply the same font stack setup as the body with Quicksand:

      styles.css

      body {
          font-family: 'Public Sans', sans-serif;
      }
      
      h1, h2, h3 {
          font-family: 'Quicksand', sans-serif;
      }
      

      Save your changes to styles.css and return to your browser to reload index.html. The custom font will now load, as shown in the following image:

      Content with black text on a white background with heading text in a rounded sans serif font and the paragraphs in sans serif font.

      For the last part of setting up your files, return to your styles.css file in the text editor. Create singular type selectors for the h1, h2, h3, and p elements to define a font-size for each. Use the rem unit for value, setting the h1 to 2.5rem, the h2 to 1.875rem, the h3 to 1.5, and the p to 1.25rem:

      styles.css

      ...
      h1, h2, h3 {
          font-family: 'Quicksand', sans-serif;
      }
      
      h1 {
          font-size: 2.5rem; /* 40px */
      }
      
      h2 {
          font-size: 1.875rem; /* 30px */
      }
      
      h3 {
          font-size: 1.5rem; /* 24px */
      }
      
      p {
          font-size: 1.25rem; /* 20px */
      }
      

      The code block includes a comment that indicates what each rem value will return as a px unit. The rem unit gives the user more control over adjusting the font-size to a preferable ratio than the px value allows. For more on these units, read through How To Use Common Units in CSS.

      Save your changes to styles.css and return to your browser to reload the index.html file. The text font sizes will adjust to look similar to the following image:

      Content with black text on a white background with heading text in a rounded sans serif font and the paragraphs in sans serif font with various sized text.

      In this section you set up your HTML content in index.html and created your styles.css file. You applied the Google Font typefaces to the CSS globally on the body element and specifically to the h1, h2, and h3 elements. You also set the font-size values for all the text elements on the page. In the next section you will use the width property to create more readable line lengths.

      Improve Line Lengths Using width and max-width

      In this section, you will use the width and max-width properties to set an appropriate line length for the text.

      An often overlooked aspect of web typography is how long a line of text is presented. For both users in need of accessibility assistance and those without, the length of a line contributes significantly to the effort needed to read the text. The longer a line of text is the more likely the reader will have difficulty keeping track of the text. Shorter lines of text help the reader navigate and scan the content.

      Open styles.css in your text editor and write an article type selector to apply a width of 90% and add a margin property with a value of 0 auto. This combination will make sure the content is set to be 90% of the screen’s width, and the auto value in the margin will keep the content block in the middle of the page:

      styles.css

      ...
      article {
          margin: 0 auto;
          width: 90%;
      }
      

      Save these changes to styles.css and reload index.html in your browser. The text will be centered, but the lines of text will be very long. See the following image for how this will appear in your browser:

      Text content in black taking up 90% of the width, with equal spacing on either side.

      The ideal line length is between 45 and 75 characters, as explained by Clarissa Peterson in her talk on Responsive Typography. Longer than 75 characters and the reader can begin to lose track of what line they are reading. On the other hand, shorter than 45 characters and the readers eyes can become fatigued from the constant moving from line to line.

      Setting a width based on a character count is possible with a unit called the character unit, represented by ch in code. The ch unit is determined by the size of the zero character (0) in the font. Since the ideal line length is between 45–75 characters, you can set a max-width value in that range, and the article element will stop growing once it has reached that size.

      Return to the styles.css file in your text editor and, after the width property in the article type selector, add a max-width property and give it a value of 70ch:

      styles.css

      ...
      article {
          margin: 0 auto;
          width: 90%;
          max-width: 70ch;
      }
      

      This means that the maximum width the element is allowed to grow is the width of 70 zero characters of the font used in that space, which is the font set on the body element.

      Save these changes to your styles.css file and reload index.html in your browser. You will find the content centered in the page at a maximum width of approximately 70 characters long. Try resizing the width of your browser to watch the article container transition from a 90% width to its maximum width, as shown in the following animation:

      Animation showing a browser window with content growing in width with the window until the content reaches a maximum width.

      Note: Chris Coyier, of CSS Tricks, created a handy bookmarklet tool that will highlight the range of characters between 45 and 75 to help find the best width to set your content.

      In this section you learned that accessibility and legibility share a common ground with the line length of text content. You used the width property with the max-width property to set a size limiting the text length to 45–75 characters using the ch unit. In the next section, you will use the line-height property to set the appropriate spacing between lines of text.

      Using the line-height Property to Help Readability

      You will use the line-height property in this section to expand and contract the space between the lines of text. You may find that headings typically have less space between lines and that paragraph text tends to have more space. The goal for this spacing is to make the content easier to read. Similar to the width of lines of text, if the lines are too close together, the reader may be distracted by the line above or below. On the other hand, if the text is too far apart, the reader’s eyes can grow tired of jumping over the space between lines and find the text much harder to scan.

      Open your styles.css file in your text editor and go to the body selector. Like the font-family, you will use line-height to set a default distance between lines for the whole document. Add the line-height property and give a value of 1.5. This value is a measurement of the distance between baselines, the line on which the bottom of text rests:

      styles.css

      body {
          font-family: 'Public Sans', sans-serif;
          line-height: 1.5;
      }
      ...
      

      The default for line-height is tied to the keyword value of normal, which is equal to 1.2 of the font size. This means if the font-size is 16px, then the line-height when set to normal is approximately 19.2px. This is a good median value; however, paragraph text usually needs a bit more space, while a heading sometimes needs a bit less.

      Next, go to the group selector targeting h1, h2, h3 and set a line-height value to 1.15. This will bring the text between lines a bit closer together, and can help the presentation of long heading titles. Add the highlighted line in the following code block:

      styles.css

      ...
      h1, h2, h3 {
          font-family: 'Quicksand', sans-serif;
          line-height: 1.15;
      }
      ...
      

      Save your changes to styles.css and return to the browser to reload index.html. You will find the length of the content expand as more space is placed between lines of text. See the following image for how this appears in the browser:

      Text content in black on white with headlines closer together vertically and paragraph lines of text further apart.

      The value for the line-height property can accept fixed unit values, as well as pixel (px) or rem, but it is better to leave no unit as the default behavior is to multiply the value by the font-size.

      You used the line-height property in this section to make the content on the page more legible and easier to scan for the reader. In the next section, you will use the margin properties to set a defined amount of space between types of content as defined in the HTML.

      Using the margin Properties for Spacing

      In this section, you will use the margin property along with the adjacent sibling selector to apply different vertical spacing between the text elements. Where the line-height property gives control between lines of text in an element, margin can be used to adjust the spacing between content elements.

      To begin, return to styles.css in your text editor and find the h3 selector. In this situation, you will add spacing to the element to have more space above the text and less space beneath. This will cause it to be farther from the content above and closer to the content below.

      Add a margin property with a value of 2em 0 0.5em. This will apply spacing that is relative to the font-size value, meaning the top margin will be double the font-size at 48px and the bottom will be half the font-size at 12px:

      styles.css

      ...
      h3 {
          font-size: 1.5rem; /* 24px */
          margin: 2em 0 0.5em;
      }
      ...
      

      Since the margin works on the outside of the element, each element’s margin properties will overlap. This means that even though the h3 margin on the bottom side is equivalent to 12px, the <p> element’s margin is larger and therefore defines the space between the <h3> and <p>. You can solve this problem by using the adjacent sibling combinator, which is defined by a plus sign (+) between two selectors, with styles applied to the latter in the sequence.

      Create a new selector in styles.css in your text editor using the adjacent sibling combinator as h3 + p, then within the selector block add a margin-top property with a value of 0:

      styles.css

      ...
      h3 {
          font-size: 1.5rem; /* 24px */
          margin: 2em 0 0.5em;
      }
      
      h3 + p {
          margin-top: 0;
      }
      ...
      

      The way the adjacent sibling combinator works, this means that when the browser has an <h3> element and immediately following it is a <p> element, then these styles are applied to only that <p> element. Other <p> elements are unaffected.

      Save your changes to styles.css and load index.html in your browser. As shown in the following image, the space above the <h3> elements is now much larger and the space between the <h3> and first <p> after it is much closer.

      Black text content with a large spacing between two headers.

      In this section, you used the margin property to apply different spacing between the elements of the page. With the adjacent sibling selector, you set up conditionals that would apply a greater spacing amount if the <h3> element was preceded by a <p> element. In the next section, you will use the text-align property to adjust the placement of the text on a line.

      Using text-align for Effective Content Presentation

      You will now use the text-align property to change where the text is placed on a line. The property has four values: left, right, center, and justify. The default value for this property depends on the browser’s language setting. For languages that read from left to right, left is the default, while languages that read right to left have a default of right. The center property places the text in the center of the line of text and leaves an equal amount of blank space on either side of the line of text. Lastly, the justify value spreads the words out to the edges of the container, leaving visually inconsistent spaces between words.

      Open styles.css in your text editor and find the h3 type selector. Add a text-align property with a value of center as shown in the highlighted portion of the following code block:

      styles.css

      ...
      h3 {
          font-size: 1.5rem; /* 24px */
          margin: 2em 0 0.5em;
          text-align: center;
      }
      ...
      

      Save your changes to styles.css and reload the index.html file in your browser. The content of the two h3 level headings are now centered above their respective sections. See the following image for how this appears in the browser:

      Black sans serif text centered to the container.

      It is best to keep the text-align property set to the default, as this is best for the user and their settings. However, changing the alignment value can help distinguish some text better or provide a better aesthetic.

      You used text-align in this section to center text content within its container. You also learned how and when to use the other values available to the text-align property. In the next section, you will use the text-transform and letter-spacing properties to create visual personality while still keeping the text readable and maintaining efficient hierarchy.

      Using letter-spacing and text-transform

      Next, you will use the text-transform property and the letter-spacing property to adjust how the text of a headline appears. The text-transform property controls how text capitalization is formatted, providing options to change the text to uppercase, lowercase, or capitalize, which capitalizes the first letter of each word. The letter-spacing property is the value of space between each character. Together these two properties can create an aesthetic that is legible and stands out.

      Begin with the text-transform property by opening styles.css in your text editor and go to the h1 type selector. Since this heading is the title of the whole article, it makes sense to have title-case formatting.

      Add a text-transform property with a value of capitalize. This value will capitalize the first letter of each word, regardless of if it is capitalized in the HTML:

      styles.css

      ...
      h1 {
          font-size: 2.5rem; /* 40px */
          text-transform: capitalize;
      }
      ...
      

      Save this addition to your styles.css file, then open index.html in your browser. The heading copy now has the first letter of each word capitalized, as shown in the following image.

      Large black text in a rounded sans serif font, with the first letter of each word capitalized.

      Next, return to the styles.css file in your text editor and find the h3 type selector. This time you will set up the h3 style to be all uppercase letters in each word by adding a text-transform property with a value of uppercase. Add the highlighted line for the following code block to your styles.css file:

      styles.css

      ...
      h3 {
          font-size: 1.5rem; /* 24px */
          margin: 2em 0 0.5em;
          text-align: center;
          text-transform: uppercase;
      }
      ...
      

      After you have made this change, save styles.css and then refresh index.html in your browser. The h3 content will now be all uppercase, regardless of how it is written in the HTML. See the following image for how this appears in the browser:

      Horizontally centered content in a black rounded sans serif font, all uppercase.

      Note: When using CSS to apply uppercase styling to content, it can affect how screen readers interpret the content. For example, with Voice Over on macOS, a three-letter word that is set to uppercase by CSS will be read as an acronym instead of as a word. When using this styling approach, it is helpful to apply an aria-label attribute to the HTML element with how the content should be read.

      Now that the text is all uppercase, visually the text feels a little bunched together for the aesthetic of the design. Next, use the letter-spacing property to add 0.125em spacing between each character. See the highlighted code in the following code block:

      styles.css

      ...
      h3 {
          font-size: 1.5rem; /* 24px */
          margin: 2em 0 0.5em;
          text-align: center;
          text-transform: uppercase;
          letter-spacing: 0.125em;
      }
      ...
      

      Using the em unit on a letter-spacing property allows the spacing between characters to be proportional to the font-size. The 0.125em keeps the spacing at one-eighth the height of the font.

      Save your changes to styles.css and reload index.html in your browser to render the changes to the h3 content. See what this will look like in the following image:

      Horizontally centered content in a black rounded sans serif font, all uppercase, with extra space between each characer.

      In this section, you used the text-transform property to change the styles for the <h1> element to capitalize the first letter of each word. You also used the text-transform and letter-spacing properties to change the <h3> element to have all uppercase words with the characters spread apart. In the last section, you will use the font property to condense multiple properties into one.

      Using the font Shorthand

      In this last section, you will use the font property to condense multiple properties into a single property. The font property can be useful when defining several text-related values globally, and placed at a high level in the cascade. Be aware that using the font shorthand will overwrite the individual properties it contains.

      To start, return to your styles.css file in your text editor and go to the body selector. Here the font-family and line-height properties can be condensed into the font shorthand property. However, the font shorthand requires that both a font-size and font-family value are present. This means adding a font-size value in addition to the line-height and font-family values. See the highlighted section of the following code block for how to write this out:

      styles.css

      body {
          font: 1em/1.5 'Public Sans', sans-serif;
      }
      ...
      

      Notice that there is a forward slash (/) between the font-size value of 1em and the line-height value of 1.5. This is the only way to set a line-height value with the font shorthand property, and it must come after the font-size value. The font-size value is set to 1em since that is the least disruptive value and carries over the default font-size of the document regardless of its value. Additionally, the font property shorthand accepts values for the font-stretch, font-style,font-variant, and font-weight properties.

      Be sure to save your changes to styles.css in your text editor. Reload the index.html in your browser and verify there are no visual changes. Since a shorthand property combines existing properties into a single property, there are no changes to the styles.

      You used the font property in this last section of the tutorial to combine several properties into one, condensing the size of your CSS. This property, though very useful, must be used with consideration as it can require redefining properties due to its broad coverage.

      Conclusion

      Readable text layout can mark the difference between an effective and ineffective design. Laying out text is a subjective balance of providing sufficient space between text lines, words, and blocks to present the content in an unobtrusive manner. When working with text, poor layout can prevent readers from understanding the content. With these properties and their uses in mind, you will make well-read content.

      If you would like to read more CSS tutorials, try out the other tutorials in the How To Style HTML with CSS series.



      Source link

      How To Use Python-Markdown to Convert Markdown Text to HTML


      The author selected the COVID-19 Relief Fund to receive a donation as part of the Write for DOnations program.

      Introduction

      Markdown is a markup language commonly used to simplify the process of writing content in an easy-to-read text format, which a software tool or programming library can convert into HTML to display in a browser or another writing program. Because it uses plain-text syntax, Markdown is compatible with any text editor and can convert headings, lists, links, and other components. Bloggers, tutorial authors, and documentation writers use Markdown widely and websites, such as Github, StackOverflow, and The Python Package Index (PyPI), support it.

      You can learn how to use Markdown from the Markdown syntax standard. Alternatively, you can also try a different Markdown implementation in a web editor, like the DigitalOcean Markdown Preview or the StackEdit editor.

      Python-Markdown is a Python library that allows you to convert Markdown text to HTML in various ways. You can extend its functionality using its different extensions that provide additional features. Note however, that the Python-Markdown has a few minor differences with the standard Markdown syntax.

      In this tutorial, you will install the Python-Markdown library, use it to convert Markdown strings to HTML, convert Markdown files to HTML files, and use the Python-Markdown command line interface to convert Markdown to HTML.

      Prerequisites

      Before you start following this guide, you will need:

      Step 1 — Installing Python-Markdown

      In this step, you will install Python-Markdown and explore one of its functions to convert Markdown strings to HTML in the Python REPL.

      If you haven’t already activated your programming environment, make sure you’re in your project directory (pymark) and use the following command to activate the environment:

      Once you have activated your programming environment, your prompt will now have an env prefix like the following:

      Now you’ll install Python packages and isolate your project code away from the main Python system installation.

      Use pip to install the Python-Markdown library (markdown) by running the following command:

      Once the installation finishes successfully, you can experiment with it in the Python REPL, which you can open by typing the following command:

      You will notice a new prompt with the prefix >>>; you can use this to type in Python code and receive immediate output.

      First you will import the markdown package and use it to convert a piece of Markdown text from Markdown syntax to HTML:

      • import markdown
      • markdown.markdown('#Hi')

      In this code, you import the markdown package you installed earlier. You use the markdown.markdown() function to convert the Markdown text #Hi (with # representing an H1-level header) to its HTML equivalent. If you type the code into the Python REPL, you will receive the following output:

      Output

      '<h1>Hi</h1>'

      The HTML output is the equivalent of the #Hi Markdown text.

      You can use triple single quotes (''') to type multi-line Markdown text into the Python REPL like so:

      • import markdown
      • output = markdown.markdown('''
      • # Step 1
      • ## Step 2
      • * item 1
      • * item 2
      • Visit [the tutorials page](https://www.digitalocean.com/community/tutorials) for more tutorials!
      • ''')
      • print(output)

      In this example, you pass an H1 header, an H2 header, two list items, and a paragraph containing a link. You then save the output in a variable called output and print it with the print() Python function.

      You will receive the following output:

      Output

      <h1>Step 1</h1> <h2>Step 2</h2> <ul> <li>item 1</li> <li>item 2</li> </ul> <p>Visit <a href="https://www.digitalocean.com/community/tutorials">the tutorials page</a> for more tutorials!</p>

      You’ll notice that the output results in the HTML version of the provided Markdown text.

      Now that you’ve used the markdown package to convert Markdown text to HTML, you will make a small program to read and convert Markdown files to HTML files.

      Step 2 — Creating a Program to Convert Markdown Files to HTML

      In this step, you will create a Python program that reads a Markdown file, converts its contents to HTML using the markdown.markdown() function, and saves the HTML code in a new file.

      First, open a new file called Picnic.md to hold the Markdown text:

      Type the following Markdown text into it:

      pymark/Picnic.md

      # Things to bring
      
      * Food.
      * Water.
      * Knife.
      * Plates.
      

      In this file you have an H1 header and four list items.

      Once you’re done, save and close the file.

      Next, open a new file called convert.py to hold the code for converting the Picnic.md Markdown file to an HTML file:

      Type the following Python code into it:

      pymark/convert.py

      import markdown
      
      with open('Picnic.md', 'r') as f:
          text = f.read()
          html = markdown.markdown(text)
      
      with open('Picnic.html', 'w') as f:
          f.write(html)
      

      Here, you first import the markdown package. You use the open() function to open the Picnic.md file; passing the value 'r' to the mode parameter to signify that Python should open it for reading.

      You save the file object in a variable called f, which you can use to reference the file. Then you read the file and save its contents inside the text variable. After, you convert the text using markdown.markdown(), saving the result in a variable called html.

      With the same pattern, you open a new file called Picnic.html in writing mode ('w')—note that this file does not yet exist—and write the contents of the html variable to the file. This creates and saves the new file on your system. Using the with statement when opening a file guarantees that Python will close it once processing has finished.

      Save and close the file.

      Run the convert.py program:

      This creates a new file called Picnic.html in your project directory with the following contents:

      pymark/Picnic.html

      <h1>Things to bring</h1>
      <ul>
      <li>Food.</li>
      <li>Water.</li>
      <li>Knife.</li>
      <li>Plates.</li>
      </ul>
      

      Now that you know how to open and convert Markdown files using the markdown.markdown() function, you can generate Markdown text in Python and convert Markdown files without the need to read them first.

      Step 3 — Generating Markdown from Data and Converting it to HTML

      In this step, you will create a program that generates Markdown text from a Python dictionary, saves it to a Markdown file, and converts the Markdown text to an HTML file using the markdown.markdownFromFile() function.

      Your program will generate a Markdown file called cities.md with a list of countries and their top three largest cities. After, the program will convert the generated Markdown text into HTML, then it will save the HTML in a file called cities.html.

      First open a new Python file called citygen.py:

      Then add the following Python code:

      pymark/citygen.py

      import markdown
      
      
      country_cities = {'Japan': ['Tokyo', 'Osaka', 'Nagoya'],
                        'France': ['Paris', 'Marseille', 'Lyon'],
                        'Germany': ['Berlin', 'Hamburg', 'Munich'],
                        }
      

      In this code you first import the Python-Markdown library with import markdown. Then you define a country_cities dictionary containing a few countries as the keys and a list of the largest three cities for each country as the value. This dictionary is an example data structure; you can replace it with fetched data from a web API, a database, or any other data source.

      Next add the following code after your dictionary:

      pymark/citygen.py

      . . .
      with open('cities.md', 'bw+') as f:
          for country, cities in country_cities.items():
              f.write('# {}n'.format(country).encode('utf-8'))
              for city in cities:
                  f.write('* {}n'.format(city).encode('utf-8'))
          f.seek(0)
          markdown.markdownFromFile(input=f, output="cities.html")
      

      After constructing the dictionary that holds the data, you use the with open(...) as ... syntax to open a file called cities.md, which doesn’t exist yet. You open it in binary mode ('b') for writing and reading ('w+'). You use binary mode, because if you pass a string to markdown.markdownFromFile(), it will be interpreted as a path to a readable file on the file system (that is, '/home/file.md'). Also binary mode allows you to avoid issues related to converting characters to a platform-specific representation; this guarantees that the Python program will behave the same way on any platform.

      You then go through the dictionary’s items extracting each key that contains the country’s name and saving it in the country variable. Alongside this, you extract the value that represents the list of the country’s largest cities and save it in the cities variable.

      Inside the first loop, you write the country’s name to the new cities.md file in a # Markdown header (the <h1> HTML tag). n is a special character for inserting a new line. You use .encode() because you have opened the file in binary mode. The second for loop iterates through each city and writes its name to the Markdown file as a * list item (the <li> HTML tag).

      After the first loop finishes, you have moved to the end of the file, which means markdown.markdownFromFile() won’t be able to read its contents; therefore, you use f.seek(0) to go back to the top of the file. Before passing the f object to markdown.markdownFromFile() as input, to convert it to HTML and save it to a new file called cities.html.

      Once you’re done, save and close the file.

      Run the citygen.py program:

      This command will generate two files:

      • cities.md: A Markdown file with the following contents:

      pymark/cities.md

      # Japan
      * Tokyo
      * Osaka
      * Nagoya
      # France
      * Paris
      * Marseille
      * Lyon
      # Germany
      * Berlin
      * Hamburg
      * Munich
      
      • cities.html: An HTML file that contains the result of converting the contents of cities.md:

      pymark/cities.html

      <h1>Japan</h1>
      <ul>
      <li>Tokyo</li>
      <li>Osaka</li>
      <li>Nagoya</li>
      </ul>
      <h1>France</h1>
      <ul>
      <li>Paris</li>
      <li>Marseille</li>
      <li>Lyon</li>
      </ul>
      <h1>Germany</h1>
      <ul>
      <li>Berlin</li>
      <li>Hamburg</li>
      <li>Munich</li>
      </ul>
      

      You can also use the function markdown.markdownFromFile() to convert an existing Markdown file. For example, you can convert the Picnic.md file to a file called Picnic-out.html using the following code:

      example.py

      import markdown
      
      markdown.markdownFromFile(input="Picnic.md", output="Picnic-out.html")
      

      You can use the markdown.markdownFromFile() function to directly convert a file, if the file does not need any modification. If you do need to modify the Markdown file, you can read it, then convert it using the method demonstrated in Step 2.

      You’ve converted Markdown text to HTML in Python code, but Python-Markdown also provides a helpful command line interface (CLI) to quickly convert Markdown files to HTML—you’ll review this tool in the next step.

      Step 4 — Using Python-Markdown’s Command Line Interface

      In this step you will use Python-Markdown’s CLI to convert a Markdown file to HTML and print the output, or save it to an HTML file.

      You can run the Python-Markdown command line script using the -m flag supported by Python, which runs a library module as a script. For example, to convert a Markdown file, you can pass it to the markdown command as follows, replacing filename.md with the name of the file you want to convert:

      • python -m markdown filename.md

      Executing this command will print the HTML code for the Markdown text that’s present in the filename.md file.

      For example, to convert the Picnic.md file, run the following command:

      • python -m markdown Picnic.md

      This will print the following output:

      Output

      <h1>Things to bring</h1> <ul> <li>Food.</li> <li>Water.</li> <li>Knife.</li> <li>Plates.</li> </ul>

      To save the output to a file called output.html, use the following command:

      • python -m markdown Picnic.md -f output.html

      With this, you’ve now used the markdown command line interface to convert a Markdown file to HTML.

      Conclusion

      In this tutorial, you have used Python to convert Markdown text to HTML. You can now write your own Python programs that take advantage of the Markdown syntax in different contexts, such as web applications using a web framework like Flask or Django. For more on how to use Markdown, check out the Markdown website. For more information on using Markdown with Python, check out the Python-Markdown documentation.

      Here are a few extensions officially supported by Python-Markdown:

      • Extra: An extension that adds extra features to the standard Markdown syntax, such as defining abbreviations, adding attributes to various HTML elements, footnotes, tables, and other features.
      • CodeHilite: An extension that adds syntax highlighting to code blocks.
      • Table of Contents: An extension that generates a table of contents from a Markdown document and adds it into the resulting HTML document.



      Source link