diff --git a/public/_redirects b/public/_redirects new file mode 100644 index 0000000..e85fd48 --- /dev/null +++ b/public/_redirects @@ -0,0 +1,3 @@ +# Both forms are listed: redirects run before html_handling, so a bare path would otherwise take two hops. +/guides/span-wallpaper-across-two-monitors-mac /guides/span-wallpaper-across-multiple-monitors-mac/ 301 +/guides/span-wallpaper-across-two-monitors-mac/ /guides/span-wallpaper-across-multiple-monitors-mac/ 301 diff --git a/src/pages/404.astro b/src/pages/404.astro index 89ee9aa..dc345a8 100644 --- a/src/pages/404.astro +++ b/src/pages/404.astro @@ -28,8 +28,8 @@ const destinations: Destination[] = [ { name: 'Guides', path: '/guides/', - what: 'Spanning two monitors, and how bezel compensation works', - words: 'bezel compensation span two monitors gap seam tutorial how to step by step', + what: 'Spanning several monitors, and how bezel compensation works', + words: 'bezel compensation span multiple monitors gap seam tutorial how to step by step', }, { name: 'About', diff --git a/src/pages/guides/bezel-compensation.astro b/src/pages/guides/bezel-compensation.astro index 832787a..fa81fae 100644 --- a/src/pages/guides/bezel-compensation.astro +++ b/src/pages/guides/bezel-compensation.astro @@ -87,7 +87,7 @@ import TextPage from '../../layouts/TextPage.astro'

SpreadPaper is written in Swift and SwiftUI, sandboxed, and released under the MIT licence. It needs macOS 15 Sequoia or later, on Intel or Apple silicon. The code is at github.com/spreadpaper/SpreadPaper, so none of the above has to be taken on trust.

Got an arrangement this handles badly, a mix of densities that comes out wrong, or a correction to the write-up? Open an issue and it gets fixed in the app or on this page.

-

Next: if you came for the theory and now want the steps, spreading one wallpaper across two monitors on a Mac covers the practical side, from choosing an image to applying it across both screens. The rest of the writing is on the guides page.

+

Next: if you came for the theory and now want the steps, spreading one wallpaper across multiple monitors on a Mac covers the practical side, from choosing an image to applying it across every screen. The rest of the writing is on the guides page.

diff --git a/src/pages/guides/index.astro b/src/pages/guides/index.astro index efb8f40..6999df4 100644 --- a/src/pages/guides/index.astro +++ b/src/pages/guides/index.astro @@ -2,7 +2,7 @@ import Prose from '../../components/Prose.astro' import TextPage from '../../layouts/TextPage.astro' -const SPAN = '/guides/span-wallpaper-across-two-monitors-mac/' +const SPAN = '/guides/span-wallpaper-across-multiple-monitors-mac/' const BEZEL = '/guides/bezel-compensation/' /** A question someone arrives with, and the section of a guide that answers it. */ @@ -16,18 +16,18 @@ type Question = { const questions: Question[] = [ { - q: 'Why does macOS put the same wallpaper on every screen?', - src: 'Spread one wallpaper across two monitors', - href: `${SPAN}#why`, + q: 'Why does macOS not run one wallpaper across my screens?', + src: 'Span a wallpaper across multiple monitors', + href: `${SPAN}#macos`, }, { - q: 'How do I get one photograph across two monitors?', - src: 'Spread one wallpaper across two monitors', + q: 'How do I get one photograph across several monitors?', + src: 'Span a wallpaper across multiple monitors', href: `${SPAN}#steps`, }, { q: 'Can I do it without installing anything?', - src: 'Spread one wallpaper across two monitors', + src: 'Span a wallpaper across multiple monitors', href: `${SPAN}#manual`, }, { @@ -41,16 +41,16 @@ const questions: Question[] = [ href: `${BEZEL}#example`, }, { - q: 'What about three displays, or a portrait screen?', - src: 'Spread one wallpaper across two monitors', - href: `${SPAN}#more-displays`, + q: 'What about three displays, a portrait screen or mixed sizes?', + src: 'Span a wallpaper across multiple monitors', + href: `${SPAN}#setups`, }, ] --- + +

How macOS handles wallpaper

+

+ Each display takes its own image. System Settings sets one image per display, and macOS runs + no single image across all of them. +

+

+ Spanning one image therefore means cutting the photograph into one piece per display, sized to + that display's own resolution, positioned to match where the monitors sit on your desk, then + setting each piece as that display's wallpaper. An app can do it in a few clicks, or you can + do it by hand. Both routes are below. +

+ +

What you need before you start

+

+ The image has to cover the bounding box of your display arrangement: the arrangement in + System Settings, in points, times the scale of the sharpest display. Summed widths give the + same number only for matched displays side by side. Anything smaller is enlarged to fit, which + is where soft wallpapers come from. +

+
+
+
Two 1080p side by side
+
3840 pixels across
+
+
+
Two 1440p side by side
+
5120 pixels across
+
+
+
Two 4K side by side
+
7680 pixels across
+
+
+
Three 4K side by side
+
11520 pixels across
+
+
+
Two 4K stacked
+
3840 pixels across, 4320 tall
+
+
+
A 4K display at 2x beside a 1080p display, both 1920 points wide
+
7680 pixels across, because the 4K display is the sharper one
+
+
+
A laptop 1512 points wide beside a display 2560 points wide, both at 2x
+
8144 pixels across
+
+
+

+ Aim a little above the number. Bezel compensation hides a strip of the image behind each + monitor's housing, and you want those pixels to exist rather than be invented by the scaler. +

+ +

Spanning the wallpaper with SpreadPaper

+

+ SpreadPaper needs macOS 15 Sequoia or later. It reads your display arrangement and does the + slicing for you. +

+
+
+
+

Arrange

+

+ Open System Settings, then Displays, and drag the rectangles until they match + how the monitors sit on your desk. SpreadPaper reads that arrangement, so + getting it right here is what makes everything afterwards line up. +

+
+
+
+
+

Install

+

+ Download SpreadPaper and drag it to your Applications folder. macOS + warns you the first time you open it, and the help page walks you + past that. +

+
+
+
+
+

Choose

+

+ Open the app and choose your image. The preview draws your displays in + their real arrangement with the photograph laid across them. +

+
+
+
+
+

Position

+

+ Drag the image into place, zoom to fill the width and flip it if the + composition works better reversed. Aim for a subject that no bezel cuts in half. +

+
+
+
+
+

Bezel gap

+

+ Raise the bezel value until a horizon or a roofline runs through the seam + unbroken. This is the step that makes the picture read as one picture instead + of two neighbouring ones. +

+
+
+
+
+

Apply

+

+ Click Save & Apply. Each display is rendered at its own native + resolution, so a 4K monitor gets 4K pixels and the 1080p monitor beside it gets its own. +

+
+
+
+
+

Save

+

+ Keep it as a preset to bring it back later. From there you can also set + a separate Light and Dark wallpaper, or put a set of images on a time of day schedule. +

+
+
+
+ + +

Two, three or more monitors, portrait and mixed sizes

+

+ The same steps spread one image over any number of displays. What changes is the size of the + image you need and how you arrange the displays. +

+

Three or more monitors

+

+ Arrange all of them in System Settings and choose an image as wide as the whole row. Three 4K + monitors side by side want 11520 pixels across. Set the bezel on each display: the gap between + two neighbours is the sum of their two facing frames. +

+

Mixed sizes and resolutions

+

+ Size the image for the sharpest display. Every display gets its own slice, rendered at its own + resolution, so a 4K display and a 1080p display beside it share one photograph and each + keeps its own pixels. +

+

A portrait screen

+

+ Rotate the display in System Settings and arrange it beside the others. It takes a taller + slice of the same photograph, so choose an image tall enough to stretch over the portrait + screen as well as wide enough to spread across the row. +

+

Monitors stacked vertically

+

+ Arrange them one above the other. The image now needs height: two 4K monitors stacked want 4320 pixels + tall. The vertical bezel is the one to set, because the frames that matter are the top and + bottom edges. +

+

A laptop beside an external display

+

+ Place the laptop in the arrangement where it sits on the desk, including how much lower its + screen is. SpreadPaper reads that offset and slices to match. Bezels are set per display, so + give the laptop its own value. +

+ +

Getting the join right across the bezels

+

+ The housings of two monitors sit between their panels, and the picture has to carry on behind + them the way a view carries on behind a window frame. Without compensation a horizon steps as + it crosses the join and a road kinks. +

+

+ Bezel compensation leaves out the strip of image that would fall behind the frames. The value + is in points, the same units as the display arrangement. Set it by eye: raise it until a long + straight line crosses the seam intact. On a pair of 27 inch 1440p monitors that usually lands + near 70. +

+
+

+ The bezel compensation guide goes through what to + measure, how to check the result, and why the gap is not the same as the frame you can see. +

+
+ +

Doing it by hand

+

+ You can do it in an image editor. Scale the photograph to the arrangement, cut one file per + display, and set each file as that display's wallpaper in System Settings. +

+

+ For each display, the slice is the part of the image over that display's rectangle in the + arrangement, with the bezel strips left out, exported at the display's own native resolution. + Nudging the photograph, moving a monitor or plugging in a laptop means cutting every slice + again. +

+ +

Fixing a soft image or a step at the seam

+
+
+
The wallpaper looks soft
+
Use an image at least as wide as the table above gives for your setup.
+
+
+
A horizon steps up or down at the seam
+
Raise the bezel value until the line runs through unbroken.
+
+
+
The picture is offset between displays at different heights
+
Match the arrangement in System Settings to how the displays sit on the desk, then reapply.
+
+
+ +

+ Where to go next: bezel compensation is the detail + behind the step that does most of the work. Help walks the first launch + warning through in three steps. The guides have the rest. +

+
+
diff --git a/src/pages/guides/span-wallpaper-across-two-monitors-mac.astro b/src/pages/guides/span-wallpaper-across-two-monitors-mac.astro deleted file mode 100644 index 1859ed3..0000000 --- a/src/pages/guides/span-wallpaper-across-two-monitors-mac.astro +++ /dev/null @@ -1,168 +0,0 @@ ---- -import Prose from '../../components/Prose.astro' -import TextPage from '../../layouts/TextPage.astro' ---- - - - -

Why macOS repeats the image instead of spreading it

-

- macOS treats each display as its own canvas. Pick a wide panorama in System Settings and every - monitor shows a scaled copy of the whole photograph, so a desk with two screens on it ends up - with two identical pictures. There is no hidden preference for this and no keyboard trick that - reveals one. The behaviour is the design. -

-

- Spanning one image therefore means doing something macOS will not do for you: cutting the - photograph into one piece per display, sized to that display's own resolution, positioned to - match where the monitors sit on your desk, then setting each piece as that display's - wallpaper. That is the work. An app can do it in a few clicks, or you can do it by hand, and - both routes are below. -

- -

What you need before you start

-
-
-
Displays
-
Two or more, connected, and arranged in System Settings the way they sit on the desk
-
-
-
An image
-
- Roughly as wide in pixels as your displays are put together, and a little wider is better -
-
-
-
A Mac
-
macOS 15 Sequoia or later, Intel or Apple silicon, if you are going to use SpreadPaper
-
-
-
Time
-
About five minutes, most of it spent choosing the photograph
-
-
-

- Width is the part people get wrong, so do the arithmetic first. Add up the horizontal - resolution of the displays you want to cover. Two 1080p monitors side by side want about 3840 - pixels across. Two 1440p monitors want about 5120. Two 4K monitors want roughly 7680. Anything - narrower than that is being enlarged to fit, which is where soft, mushy wallpapers come from. -

-

- Aim a little above the number rather than exactly at it. Bezel compensation hides a strip of - the image behind each monitor's housing, and you want those pixels to exist rather than be - invented by the scaler. -

- -

Spanning the wallpaper with SpreadPaper

-
    -
  1. - Open System Settings, then Displays, and check the arrangement. Drag the rectangles until - they match how the monitors actually sit, including which one is higher. SpreadPaper reads - that arrangement rather than asking you to describe it, so getting it right here is what - makes everything afterwards line up. -
  2. -
  3. - Download SpreadPaper and drag it to your Applications folder. macOS shows a warning the - first time you open it, because the app is not signed with a paid Apple Developer ID. The help page covers the two ways past it, and it only happens once. -
  4. -
  5. - Open the app and choose your image. The preview draws your displays in their real - arrangement with the photograph laid across them, so you are looking at the result rather - than at a file browser. -
  6. -
  7. - Position it. Drag the image to move it under the screens, zoom to fill the width, and flip - it horizontally if the composition works better reversed. Watch the preview rather than the - numbers: what you are aiming for is a subject that is not cut in half by a bezel. -
  8. -
  9. - Set the bezel gap. Raise it until a horizon or a roofline runs through the seam unbroken. - This is the step that makes the picture read as one picture instead of two neighbouring - ones. -
  10. -
  11. - Apply. Each display is rendered at its own native resolution, so a 4K monitor gets 4K pixels - and a 1080p monitor beside it gets its own, rather than both being cut from one shared - bitmap. -
  12. -
  13. - Save it as a preset if you want it back later. From there you can also set a separate Light - and Dark wallpaper, or put a set of images on a time of day schedule. -
  14. -
- -

Getting the join right

-

- The gap between two monitors is physical. Their housings sit next to each other and the - picture has to carry on behind that housing, the way a view carries on behind a window frame. - Without bezel compensation the wallpaper is continuous in pixels but not to your eye: a - horizon steps up as it crosses the join, a road kinks, a face gains a slice of extra cheek. -

-

- Bezel compensation deals with it by leaving out the strip of the image that would fall behind - the frames. The number you enter is how much housing sits between the two panels, in points, - the same units as the display arrangement. How many points a millimetre of plastic comes to - depends on the display, so set it by eye: raise the value until a long straight line crosses - the seam intact. On a pair of 27 inch 1440p monitors that usually lands near 70. -

-
-

- The bezel compensation guide goes through what to - measure, how to check the result, and why the gap is not the same as the frame you can see. -

-
- -

Doing it by hand instead

-

- You do not have to install anything. The manual route works, and it is worth knowing so you - can decide whether an app is worth it. -

-
    -
  1. - Work out each display's pixel rectangle inside the combined desktop, from the arrangement in - System Settings. -
  2. -
  3. Open the photograph in an image editor and scale it to the combined width.
  4. -
  5. - Add the bezel strips into your slice positions, so the pixels that would sit behind the - housings are dropped rather than shown. -
  6. -
  7. Export one file per display, each at that display's native resolution.
  8. -
  9. In System Settings, set each exported file as the wallpaper for its own display.
  10. -
-

- That is a reasonable afternoon's work for one image you intend to keep for a year. It becomes - tedious the moment anything changes. Nudging the photograph a little to the left means - recalculating every slice. A new picture means the whole sequence again. So does plugging in a - laptop, moving a monitor to the other side of the desk, changing a resolution, or deciding the - bezel strip was a bit too narrow. The arithmetic is not hard, there is only a lot of it, and - it comes back every time. -

- -

Three displays, portrait screens, and mixed sizes

-

- Nothing here is specific to two monitors. The same steps cover three, a portrait screen - standing beside a landscape one, or a laptop open next to an external display. Mixed - resolutions are fine, because each display is rendered at its own, and a portrait screen is a - taller slice of the same photograph. -

-

- What does change is the width you need. Three 4K monitors side by side want something close to - 11520 pixels across, and a laptop parked at the end of the row adds its own. If a wallpaper - looks soft on a wide setup, the source image is almost always the reason. -

- -

Where to go next

-

- Bezel compensation is the detail behind the step that - does most of the work. Help walks the first launch warning through in three steps. The guides have the rest. -

-
-