Alignment classes

The Old Way

Many rich-text editors produce inline styles for alignment:

  
      
    This image is aligned to the right of the paragraph.  

This gets the job done, but there are caveats. For example, what if you want to add a left margin to the image so the paragraph doesn't hug it so tightly? You can't reliably do that with inline styles.

The New Way

Leafpub solves this problem by using classes instead of inline styles for alignment. This results in clean, semantic markup, but comes at a small cost, as each theme will need to provide some basic alignment classes.

• align-left
• align-center
• align-right
• align-justify

Base Styles

The following CSS can be used as a starting point for your theme. Of course, you can modify them as needed to make them work well with your theme.

/*  
Required classes for alignment. We need these because Leafpub  
generates classes instead of inline styles for alignment.  
*/  

.align-left {  
    text-align: left;  
}  

.align-center {  
    text-align: center;  
}  

.align-right {  
    text-align: right;  
}  

.align-justify {  
    text-align: justify;  
}  

img.align-left,  
[data-embed].align-left {  
    float: left;  
    margin-right: 1em;  
}  

img.align-center,  
[data-embed].align-center {  
    display: block;  
    margin-left: auto;  
    margin-right: auto;  
}  

img.align-right,  
[data-embed].align-right {  
    float: right;  
    margin-left: 1em;  
}