Stylesheet for ETNA XML editor
Document Actions
Last week I worked on writing some CSS to change how CNXML documents will look in the new ETNA editor. As you may have seen, the documents first looked something like this:
My first draft of a new style essentially tried to mimic current module look while also 1) adding a dotted line to show the outline of the different elements, 2) making the background a little darker than the editable elements, with sections only a little lighter, and 3) retaining Laurent's idea of putting "Name:" whenever there were names (well, titles in the above case), which I liked for an editor:
I then had the idea that maybe I should treat all those "Definition:" and "Meaning:" type things before the elements in the same way that I had treated the "Name:" text, since I wasn't sure it made too much sense for them to be treated distinctly at an editing level (maybe it would be more appropriate at a more polished "this is what your published module will look like" level or something, where the "Name:" text would also disappear):
But then I felt like they were just too distracting, so I styled them differently, and also added those same little tags to even more elements, as can be seen in this next iteration (the currently committed one) before term and para (though I left them out of certain elements, such as bulleted list items, since I felt that the bullet was a good enough indicator). Additionally, I added borders to the elements, such as example, that have borders on live modules:
I also tried other things, such as having those little tags only appear when one was hovering over an element, which was 1) distracting, and 2) not good if you had your mouse hovered over one element but wanted to know what your sibling element's name was. I also thought about making that dotted border dashed instead, to better convey its temporality, but it ended up seeming distracting to me:
Let me know if you have any suggestions or critiques. Thanks!
I don't think it is needed to add a label on all elements. For exemple, "name" elements are in fact, a title for few elements. So, by applying specific CSS Style, the user can see the difference between the content of a name element, and other contents. Same comment about para element. A user can see that he writes or read a paragraph. The "para" label isn't necessary in my opinion.
An other example, in the "definition" element. With the tag "definition", we see that the content is a definition. So i think it is not necessary to add the label "term" before the term content. The user guess that it is a term. Of course, we should keep the "meaning" label for the meaning element, because we can add other contents in the definition element like "example" (well, with CSS selector, i think we can hide this "meaning" label if there is only one "meaning" element).
So I think you can avoid to set such label, to increase the readability. Keep only label on important elements, and try to use different style to show different elements. But i know this is not very easy :-)
Notice that i have included your stylesheet in a new release of the CNXML extension. Thank you for your work ! :-)