Opened 10 years ago

Closed 9 years ago

#754 closed enhancement (wontfix)

Reduce tab size in code samples

Reported by: dboulet's profile dboulet Owned by:
Milestone: Priority: low
Component: Codex Keywords: has-patch ui-feedback


I’d like to propose a small change to the appearance of tabs within code blocks in the Codex. By default, browsers display tabs within PRE tags with a width of 8 spaces—this often results in unwanted line breaks as the indentation pushes the code far to the right. Using the tab-size property in CSS, the width of the tabs can be reduced and the appearance of the indented code can be improved.

More about tab-size:

Attachments (2)

codex-pre-tab-size.patch (612 bytes) - added by dboulet 10 years ago.
code-indentation-tab-size.png (59.1 KB) - added by dboulet 9 years ago.
Code indented with tabs (tab-size set to 4 on the right)

Download all attachments as: .zip

Change History (8)

#1 @samuelsidler
10 years ago

In general, we're moving away from using the Codex. Do you see issues with code blocks on

#2 @dboulet
10 years ago

Good to know, samuelsidler. The same CSS could also be added to, though code examples seem to be more rare there.

#3 @melchoyce
9 years ago

  • Keywords ui-feedback added

Can you add a before/after screenshot of this applied to Thanks!

9 years ago

Code indented with tabs (tab-size set to 4 on the right)

#4 @dboulet
9 years ago

  • Priority changed from normal to low

I’ve attached a before/after screenshot of the page at, the default tab size is shown on the left, and the right side displays the result of using tab-size: 4;. I actually cheated a little here, as the actual code samples on the page are indented using spaces. I altered the source code of the page, changing the indentation to tabs in order to demonstrate the potential for change in my screenshot.

I’ve noticed that most code samples in the Codex and on are indented using spaces, I’m assuming this is for consistency in spacing. My hope was that this change would allow the indentation in online code samples to be converted to tabs, in accordance with the WordPress PHP Coding Standards. The main issue that I’m hoping to resolve is that I often copy/paste code from the Codex and end up with mixed indentation in my files.

This ticket was mentioned in Slack in #meta by ocean90. View the logs.

9 years ago

#6 @ocean90
9 years ago

  • Resolution set to wontfix
  • Status changed from new to closed

Browser support for tab-size isn't really great. With the new developer resource on the horizon, which is using spaces for indentation, that isn't quite an issue anymore.

Note: See TracTickets for help on using tickets.