Watch a quick 1.5 minute video on EditLive! 9’s styling functionality:
EditLive! 9 is almost here and over the coming weeks I’ll be publishing a series of posts discussing the new features and improvements in the release. With EditLive! 9 we’ve focused on modern rich text editing requirements. The release has a huge feature set from working with styles – the topic of this post – through to embedding rich social and cloud-based media in your content.
The relationship between HTML and CSS is one of the most important principles in creating web content. However, in my experience, it’s also one of the harder concepts to explain to authors coming from a Microsoft Word background. With the advent of responsive design using CSS3 and HTML5, styling has become more complex in rich text editors. With EditLive! 9, we’ve added several new features to help make working with styles much more author-friendly.
The primary mechanism for working with styles in EditLive! 9 remains in the styles dropdown. Unlike other rich text editors, EditLive! combines its style and paragraph formatting dropdowns together to hide some of the complexities of CSS and provide a familiar user experience. This dropdown provides a context sensitive interpretation of your stylesheet and ensures users are only ever presented with list of styles that are valid for the current cursor location. Effectively EditLive! understands the complexities of your CSS so that your users don’t have to.
With the advent of today’s more complex style sheets for implementing responsive design, web application styling or portal look and feels EditLive!’s style context sensitivity was only a partial solution to the CSS usability issue. So with EditLive! 9 we’ve added some new tools to work with styling.
Make Everything Stylish
We’ve extended the usage of the styling dropdown in this release to enable authors to focus more on styling for specific elements.
In EditLive! 9, properties dialogs in the rich text editor now provide the author the ability to set the style of the relevant element or elements within the dialog. Only those styles that are valid for the current elements are presented to the user to ensure that the document remains valid.
User Friendly Class Names
Sure p.perfectForDesktops may seem like a great descriptive name to your web designer, but it can also result in a messy UI for your users. EditLive! 9 addresses this issue by automatically converting camelCase, hyphen-ated or under_scored CSS names into author-friendly names.
So p.perfectForDesktops becomes “Paragraph (Perfect for Desktops)”. Similarly h1.hyphenated-heading becomes “Heading 1 (Hyphenated Heading)” and h2.underscores_too becomes “Heading 2 (Underscores Too)”.
White-listing and Black-listing
Invariably in any stylesheet there are styles that have been added for design purposes that aren’t desirable to expose to authors. This is most common when working with very large stylesheets. For example, we do a lot of work with IBM WebSphere the main content stylesheet often includes styling associated with navigation and application look and feel.
Rather than force you to have a separate authoring stylesheet that you need to maintain, EditLive! 9 enables you to make a blacklist or whitelist styles configuration. In either case the rich text editor will render content using the full stylesheet, but it will only make a subset of styles available to authors.
Administrators can choose to specify a blacklist of styles, where the full stylesheet will be presented except for the specified styles, or a whitelist of styles, where only the specified styles will be presented within the dropdown.
EditLive! 9 Does It with Style
If you want to make your complex stylesheet usable, then the new styling features of EditLive! 9 can take care of the hard work so that you don’t have to. Built on EditLive!’s existing context sensitive styling features the new functionality makes it easier than ever before to create content with elegance, panache and all out style.