Horizontal Scrollbars

Are a thing. Quite a big thing. I like to keep an eye on ideas about good practice for presenting information on the web. I still haven’t got my head round the alt tag for images – where and how to use the alternative text and image title attributes for instance. And is opening an image in a separate tab good or bad? And how much do I care?

At the moment I’m using the twentysixteen theme. I quite like it. Nice and simple. Recently I wanted to paste a bit of code so I selected Code Block in the Gutenberg editor. It looked terrible. A sort of unwrapped inverse video that I found not very clear to read.

So I tried it with the preformatted block option. I think it looks better. Cleaner, and with a border. But the code I pasted was wrapped, and I find that difficult to read.

But is it just me? I started searching for how to add a horizontal scrollbar to the code or preformatted block and found it a muddy field. First discovery I made was that this behaviour seemed to be particular to the twenty sixteen theme; the other themes I tried defaulted to horizontal scrolling.

And I seemed to be in a minority in liking horizontal scrolling. All the search results were for people trying to work out how to disable horizontal scrolling, whereas I seemed alone in wishing to find out how to enable it. I’m intrigued to find that on the whole it seems people don’t like horizontal scrollbars in code windows.

But I like it so I tried to work out how to enable it. I think I’ve sorta managed it but whether it’s right I’m not sure. Seems to work. I used the Inspect facility of Firefox to prod and poke and try a few things, then I added:

.wp-block-preformatted {
    white-space: pre;
    overflow-wrap: normal;
}

and

.wp-block-code {
    white-space: pre;
    overflow-wrap: normal;
}

to the Additional CSS section of my theme customisation.

That seemed to work so I went hunting for the settings. I’m using a child-theme and I quite like to know where things live. I looked for recently changed files but there were no likely culprits. I was a bit puzzled so back to the internet, and I discover that these customisations are saved in the database itself. I’m not sure why, but I wasn’t keen on this. I’d prefer it if they were there, in green and black in a text file that I could see.

So I’ve removed the code from my Additional CSS bit, and put it in style.css in my child-theme directory, and it still seems to work.

I do like the way other themes do it though. I think the styling is nicer in twentytwenty but I don’t like the way it displays categories and tags in block capitals. Maybe I’ll tinker in that direction somewhere down the line.

(Visited 21 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.