Is there a way to showcase XML in a web browser while maintaining its whitespace and preserving its preformatted text?

In an attempt to simplify the process of formatting my reports, I am considering creating a basic XML language. This would resemble something like this:

<?xml-stylesheet href="./report.css"?>    
<report>
<title>A Tale of Two Cities</title>
<author>Charles Dickens</author>
<code>
int main (int argc, char **argv)
{       
    int x = 5;
}
</code>
</report>

The accompanying stylesheet, titled report.css, might contain rules such as:

title { 
    font-family: serif;
    background: white; 
    color: #003 
}

author { 
    font-size: large;
    margin: 1em 0 
}

code { 
    font-style: italic 
}

A challenge arises when attempting to preserve whitespace within certain tags, like code. While HTML offers the <pre> tag for this purpose, XML lacks a direct equivalent. Despite trying

<code xml:space="preserve">
, the browser still strips out the whitespace upon rendering due to it not being recognized as a text-only node. Is there a solution to ensure proper display in browsers (for subsequent PDF printing), or should I consider switching to LaTeX for producing aesthetically pleasing reports?

Answer №1

To make text maintain its formatting in CSS, use the property white-space: pre along with a monospace font. In the case of XML styling, remember to adjust the display property accordingly to prevent elements from appearing inline by default.

code {
  display: block;
  white-space: pre;
  font-family: Menlo, Monospace, Courier New;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Bootstrap 5: Mobile Menu Failure to Expand

I’ve been struggling with this issue for days now. I’ve searched everywhere for a solution, but to no avail. That’s why I’m turning to the experts here for help :-) The problem I’m facing is that my mobile menu won’t open. Nothing happens when ...

Can bootstrap columns be offset only on large devices?

Is there a way I can have the title column float to the right side of the page only on medium devices and larger screens, while keeping it centered for smaller devices like phones? Any advice is appreciated! <div class="section header"> <div ...

My desire is to have the left image's position set as sticky

Currently, I am attempting to update the image positioning on this page for the T500 Smart Watch: I want it to look similar to how it appears here: Here is the CSS code I have experimented with: .storefront-full-width-content.single-product div.product ...

Tips for troubleshooting ImageArray loading issues in AngularJS

Having some trouble learning Angular and getting stuck with this Image array. Can someone please help me understand what's wrong with my code and how to fix it? FilterAndImages.html <!DOCTYPE html> <html ng-app="store"> <head> < ...

Struggling to achieve success in redirecting with passport for Facebook

For a "todolist" web application that utilizes passport-facebook for third party authentication, the following code is implemented: passport.use(new FacebookStrategy({ clientID: '566950043453498', clientSecret: '555022a61da40afc8ead59 ...

Automating Indesign with HTML5 and JavaScript through IDML files

I am currently working on automating IDML files. My goal is to display an IDML template in an HTML5 editor. Within the sample.idml file, I have a basic TextFrame containing the text "Hello World." After unzipping the file and navigating to the stories fol ...

What's the issue with the addClass function not working as expected?

I am currently integrating the website's navbar using PHP, which is why I am unable to use class="active" to highlight the active tab on my navigation bar individually. To solve this issue, I attempted to add the active class to the corresponding tab ...

Using Accordions in Jquery to dynamically adjust page height during ajax calls

I am currently using AJAX to call in a page and animate its height successfully. However, I have encountered an issue with an accordion-like function that is supposed to toggle the visibility of an element and adjust the height of the containing element ac ...

On smaller device screens, the full-height sidebar and content area experience some disruption

How can I resolve the height issue with sidebar and content area on smaller devices, maintaining 100% height for both? I'm having trouble fixing it with the current code. I am aiming to create a fixed-width sidebar that expands to full width on small ...

Use Angular to update the text input value

I am currently working with a basic input that is showing a timestamp in milliseconds, which is stored on the scope. However, I am interested in having it display formatted time without needing to create a new variable. I am exploring a potential solutio ...

After all other content has been fully loaded, jQuery UI is then loaded onto

For a while now, I've been following a YouTuber's JQuery UI tutorial. Every time I refresh the page, my HTML loads first and then my CSS fills in, causing a momentary flash of HTML and CSS without the UI. Is this normal? Can it be prevented? Her ...

Creating Dynamic Website Titles with PHP and HTML

I am currently teaching myself web development and using the W3 validator to check my code. I have a document that loads like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Conten ...

Hover effects in CSS animations can be hit or miss, with some working smoothly while others may

Below is the HTML content: <div class="wrapper"> <figure align="center"><img src="http://www.felipegrin.com/port/or-site.jpg" alt=""><br><span>RESPONSIVE HTML5 WEBSITE FOR <br> OR LEDS COMPANY</span></fig ...

Leveraging the power of map in an Angular typescript file

I've been attempting to populate a Map in Angular by setting values dynamically. When certain buttons are clicked, the onClick function is invoked. typeArray: Map<number,string>; Rent(movieId: number){ this.typeArray.set(movieId,"Rental ...

Creating a binary tree in vanilla JavaScript and styling it with HTML and CSS

I'm facing a challenge with my homework. I am required to convert my JavaScript binary tree into HTML and CSS, strictly using vanilla JavaScript without any HTML code. I have the tree structure and a recursive function that adds all the tree elements ...

Inline-block styling behaving incorrectly within span element

I am facing an issue with aligning a validation message inline with a textbox in my HTML code. Despite trying various options, the validation message appears just below the textbox instead of beside it. Below is the snippet of the code in question: HTML ...

What is the best way to apply a class to a container when a component in AngularJS receives focus or is clicked?

I am trying to apply a class to the container when either the input field is focused or when the dropdown component receives focus or is clicked. The class should be removed when the focus is lost. The requirement is for the input container to have the &a ...

Turn off the CSS hover effect for a custom button if the ng disabled attribute is set to true

My goal is to disable custom buttons, and the disable(pointer) function is working correctly. The issue arises when we try to hover on the button, as the hover effect still works. I therefore need to disable hover as well. I am looking to apply ng-disabl ...

The method provided by the FullScreen API is not effective in cancelling the fullscreen mode

After testing my code in Google Chrome, I encountered the following error message: Uncaught TypeError: Object #<HTMLDivElement> has no method 'webkitCancelFullScreen' Interestingly, I also received a similar error while running the code i ...

Error loading console due to JSON data on website

After creating a Json data file named question.json with the following content: "Endocrinology":[ { "title":"Endocrinology", "id": "001", "date":"08J", "question":"In adult men, anterior pituitary insufficiency does not caus ...