The new CodeSelect copy button - JavaScript vs non-JavaScript version:
The non-JavaScript version has leading empty space. Where the JavaScript version has the copy button there, there non-JavaScript doesn’t have the copy button there since this is impossible to implement without JavaScript.
The leading empty space in the non-JavaScript version does not result in copying actual white space characters. That issue does not exist. The non-JavaScript simply suffers from an optical design limitation.
That non-JavaScript version design-only limitation is technically unfixable without making the JavaScript version of the wiki look worse. To remove the leading space in the non-JavaScript version, it would be required for the JavaScript version to initially have a similar design as the non-JavaScript version and then once JavaScript is load, the wiki would have a noticeable “jump” of text as the copy button would be injected on the left side.
Since most users have JavaScript enabled and non-JavaScript users are used to all kinds of weirdness anyhow and since non-JavaScript version is fully functional nonetheless besides the design-only limitation, I’ve elected for that way.
Other alternatives considered:
- A) On the JavaScript version the copy button could “slide-in” to avoid the “jump”. But that would look very playful, perhaps silly, such an animation could take away attention form more important things.
- B) Moving the copy button which is now on the left side over to the right side. But that imo looks worse.
- C) Moving the copy button further to the left but that would break the design. The normal text would be aligned (vertically evenly start from the left side) but the copy buttons would stand out on the left.
Would be lots of extra time spent for the non-JavaScript version with questionable results.