Screenplay Callouts

Share & showcase
1

I made this little snippet to format custom callouts for a faux-screenplay look. It’s not super practical for actual writing but it does make quotes look nice!

Screenshot_2024-06-25_at_23.01.53
Screenshot_2024-06-25_at_23.01.532674×1460 183 KB

.callout[data-callout="action"] { 
    --callout-color: 0,0,0; 
    background-color: transparent;
    text-align: center; 
    margin:auto !important;
    border: none !important;
    max-width: 70%;
    font-style: italic;
}
.callout[data-callout="action"] .callout-title { 
    display:none;
}
.callout[data-callout="action"] .callout-icon {
    display:none
}
.callout[data-callout="action"] .callout-title-inner {  
    display:none
}
.callout[data-callout="action"] .callout-content { 
    color: var(--text-faint);
    padding:0px;
    text-align: center; 
}
.callout[data-callout="action"] .callout-content p { 
    margin-block-start: 0px;
    margin-block-end: 0px;
}

.callout[data-callout="dialogue"] { 
    --callout-color: 0,0,0; 
    background-color: transparent;
}
.callout[data-callout="dialogue"] .callout-title { 
    padding:0px 5px;
    margin-bottom: -61px; /* adjust this margin as needed*/
    text-transform: uppercase;
    color: var(--text-normal);
    max-height:50px;
    font-size: var(--font-adaptive-normal); 
    border-bottom: 1px solid transparent;  
    max-width: 100px
}
.callout[data-callout="dialogue"] .callout-icon {
    display:none
}
.callout[data-callout="dialogue"] .callout-content { 
    padding:10px 15px 0px; 
    font-size: var(--font-adaptive-normal);
    margin-left: 125px
}
10 Likes