Watch a live product demo 👀 See how Sanity powers richer commerce experiences

Formatting Text in Portable Text Fields - Alignment, Font, Colors

8 replies
Last updated: Dec 1, 2021
Good morning. Our client has requested functionality for formatting text (in portable text fields) in Sanity Studio (alignment, font, colors). While this should be possible to do, I read in a comment on Stack Overflow that this is not what Sanity Studio is meant for, and that Sanity Studio is meant for only structuring text and not modifying design. Can you comment on this? Is it a bad idea to add this kind of functionality to portable text fields?
Nov 8, 2021, 9:31 AM
I think it is more a philosophical standpoint. Content and presentation should be separate concerns. A design system should be concerned with which font and colour to use, and a content author should focus on creating compelling content. Sanity's 'Content is data' philosophy takes this even further (if you want to go further). Whether it is truly a bad idea really depends on the client and the use case though
Nov 8, 2021, 9:52 AM
Thank you for the input. Based on what you wrote, I found some more information here:

https://www.sanity.io/blog/content-is-data

https://www.sanity.io/guides/how-to-use-structured-content-for-page-building
I see what you mean about separate concerns, though. But in this use case (small company with non-tech-savvy persons deciding both presentation and content) it would be difficult to have a good separation between presentation and content.
Nov 8, 2021, 10:20 AM
I allow editors to do basic formatting in sanity.Things like bold, right/left alignment of text in certain components.
I used to allow them to set colors, but found that it lead to some very low contrast text.

Sanity is not a WSYG editor, something I’m very happy about. My philosophy is that I’ll allow editors to change anything that won’t screw up the accessibility of the web page.

And give your editors live preview so they can see how things look.

There is nothing in sanity stopping you from doing this, it’s just a question of what is it a good idea to let editors change? It’s easier (in my mind) for all parties involved to just give the editors what they need

Edit: for some of my pages I also allow the owners to set the color themes of the website through a settings tab in Sanity. Easier if you use CSS in JS instead of pure CSS/SCSS
Nov 8, 2021, 10:20 AM
"My philosophy is that I’ll allow editors to change anything that won’t screw up the accessibility of the web page."
This one I really liked.
😊 As a hired-in consultant it would be difficult for me to deny the client any functionality as long as they're paying for the implementation. But I can at least warn about the problems with it. What they do from there is up to them.
Nov 8, 2021, 10:29 AM
If you are Norwegian (I’ll just assume you are) remember that Norwegian law requires WCAG 2.0 conformance, can be usefull as an argument.
Nov 8, 2021, 10:29 AM
There is an element that "the client is always right" - but, even with "non-tech-savvy persons deciding both presentation and content" if they are doing both at the same time, on the fly. At somepoint they'll end up in a world of inconsistency and that can be avoided with a bit of planning and structure.
Nov 8, 2021, 10:32 AM
Hi
user M
I have the exact same client request did you manage to find a solution?
Nov 19, 2021, 2:04 PM
user M
Hi there. No, it hasn't been implemented yet. But I think simple controls like colors and alignment have to be implemented. I'm a hired-in consultant, so I'm really not in a position to say no.
Dec 1, 2021, 11:24 AM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
- Template

Official(made by Sanity team)

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen
Go to Clean Next.js + Sanity app

Blog with Built-in Content Editing
- Template

Official(made by Sanity team)

A Sanity-powered blog with built-in content editing and instant previews.

Go to Blog with Built-in Content Editing