Soma Design

One of the banes of con­tent man­age­ment is the style incon­sis­ten­cies intro­duced when some­one does a copy and paste from MS Word direct­ly into the rich text edi­tor of their CMS, intro­duc­ing dif­fer­ent font fam­i­lies, line spac­ing and inden­ta­tion. One line of defense against this is Word­Press’ TinyM­CE edi­tor’s “Paste from Word” but­ton that con­tent authors should be trained to use in an ide­al world.

But, in the real world, train­ing is spot­ty, often for­got­ten and authors will still paste direct­ly from Word. Com­pound­ing this is that the edi­tor cur­rent­ly needs to be expand­ed to even see this func­tion­al­i­ty. Also, the dis­ad­van­tage of past­ing plain text is that authors lose for­mat­ting such as bold and ital­ics, which is frus­trat­ing. In an effort to com­bat this, I’ve come up with the fol­low­ing defen­sive CSS styles that I will add to all future sites I deliv­er to clients.

.MsoNormal {
margin: [normal <p> margins here] !important;
text-indent: 0 !important;
}
.MsoNormal span, font {
font-size: inherit !important;
font-family: inherit !important;
color: inherit !important;
}

Notes:

• the .MsoNormal class is, in my expe­ri­ence, always attached to a <p> ele­ment. If you are set­ting mar­gins specif­i­cal­ly on the <p> ele­ment, you can­not tell it to inher­it, because there’s noth­ing to inher­it from. Instead, match the mar­gin styling on the appro­pri­ate <p> element