As part of a University assignment, I was required to create a short XML document for technical communicators who need to learn about an aspect of ethics or intellectual property. The document should be 500 words and with metadata and appropriate XML elements, styled in CSS or XSLT.
Note: I submitted this blog post to my University forums as part of my project reflection.
What happened?
The assignment was to create a short XML document for technical communicators who need to learn about an aspect of ethics or intellectual property. The document should be 500 words and with metadata and appropriate XML elements, styled in CSS or XSLT. It wasn’t a requirement, but I did start this by sketching out my design. I like to sketch and wireframe anything web related before starting as it gives me a good reference point to work from. I applied Gestalt principles to my design; header and footer were the same shapes for similarity, all the content was grouped together inside a border to show proximity, the background colour was white, with colour applied to the inner elements, to demonstrate figure and ground (Brinck et al. 2003 pp. 193).
My XML and CSS assignment sketch
What was I thinking? How was I feeling?
I have had some web development experience in the past as well as experience using XML and XSLT. My initial thoughts were to style the document using XSLT, as can you use transform to turn XML into XHTML. My initial thought was to use DIV elements for the structure of my document, with inline CSS. W3schools advise against styling XML with CSS (w3schools 2018) which is why I initially chose to use XSLT.
What was good and bad?
I discovered that XSLT was not the best route for this assignment, this is because there are 10 elements in my XML document, each of which I wanted to apply different styling to. When I tried to apply the styling inline alongside the DIV elements, it became very messy and complicated to manage. I am familiar with XSLT but not an expert and soon exhausted my options on researching this path. I turned back to CSS instead and was able to apply all the styling I wanted with all the desired functionality. I suppose I wanted to challenge myself by going down the XSLT route but ran out of time to really explore it fully.
I am much more familiar with CSS which was good. However there were a few things I needed to research, for example, some of my reference URLs were very long, and when I resized the browser window, the text would spill over into other elements, applying the overflow-wrap: break-word property fixed this. I did notice, however, that sometimes depending on where you placed your XML the elements inherit some CSS styling. I had to nest some of these inside other tags to get some styling to apply correctly, for example, one body_text area contained a nested header.
Differences in the way that the browsers view CSS styling was a significant pain, I started out using Internet Explorer, but borders didn’t look right and responsiveness didn’t work very well, I soon turned to Chrome as it more accurately represented my vision.
If I had to do this again, what would I do differently?
I suppose the difficulties of this assignment came from my previous experiences, and my indset was that I could use XML like HTML (by using DIVs classes) Overall, I managed to achieve what I wanted and kept quite close to my original sketch. However, it’s made me think more about how XML is used in industry; if it is not best practice to style with CSS, then XSLT and Javascript is probably something for me to focus on if I see myself doing something like this in the future.
References
Brinck, T., Gergle, D. and Wood, S. (2003). Usability for the Web. San Francisco, Calif., [etc.]: Morgan Kaufmann.
w3schools.com (2018) Available at: https://www.w3schools.com/xml/xml_display.asp [Accessed 22 Feb. 2018].