Text Formatting, layout and styles

I’ve been playing around with text (the paragraph component) in Elements and I’m finding it very frustrating. The properties in the component inspector itself aren’t terribly useful for anything beyond a very simple, uniform block of text.

There’s the italic toggle which makes the entire block italic — I’m not sure who needs that? The underline, transform, and shadow do the same thing - apply the styling to the entire block of text. I can think of very few use cases (if any) where this behaviour would be desirable.

Normally in a paragraph of text you will have a base/paragraph style (font family, font size, line-height, etc), with which you may introduce runs/spans which can be used to alter sections of text within the paragraph - character styles. Common uses would be to bold, italicize, underline, strikethrough, change colour, font family/weight, size, super/subtext, etc. None of this is currently possible in Elements as the paragraph component is extremely limited in scope.

I’m going to spend some time with it over the weekend and try to come up with some more considered suggestions, but I would start by looking at Apple Pages for inspiration. One of the things I REALLY like is how they’ve used segmented controls to switch between areas of concerns such as style, layout, and more (everything else). With Elements everything is in one long, often unmanageable list of properties that aren’t always in the same order, or labelled in the same manner - which makes finding things extremely difficult.

4 Likes

Yes, just like the Heading component, the text editor is unfinished. We just need to circle back to it to polish it up.

The plan is to have some pop-up controls (or bar) attached to the text editor, so you can style the text easily with things like bold, italic, underline, and links.

2 Likes

This is something I noticed on the demos. Things seem to move around. They should be organized and consistent to help with muscle memory. Collapsable if possible and not a copyright infringement.