[{"data":1,"prerenderedAt":104},["ShallowReactive",2],{"help-article-\u002Fhelp\u002Fexpressions-and-logic\u002Fguide-dynamic-text-layouts":3},{"id":4,"title":5,"body":6,"category":91,"description":92,"extension":93,"keywords":94,"meta":95,"navigation":96,"order":97,"path":98,"rawbody":99,"seo":100,"stem":101,"updated":102,"__hash__":103},"help\u002Fhelp\u002Fexpressions-and-logic\u002Fguide-dynamic-text-layouts.md","Guide: Dynamic text layouts",{"type":7,"value":8,"toc":88},"minimark",[9,19,27,33,60,63,70],[10,11,12,13,18],"p",{},"Text in Bluepic resizes and wraps to fit its box, so when content comes from an ",[14,15,17],"a",{"href":16},"\u002Fhelp\u002Finput-fields\u002Ftext-input-fields","input field"," you rarely know its final size. Expressions let the rest of the layout move with it, so nothing overlaps and the spacing stays even.",[10,20,21,22,26],{},"The trick is to position elements relative to each other using ",[14,23,25],{"href":24},"\u002Fhelp\u002Fexpressions-and-logic\u002Felement-metadata-subproperties","element measurements"," instead of fixed coordinates.",[10,28,29],{},[30,31,32],"strong",{},"Example: a caption that follows a headline.",[34,35,36,40,52],"ol",{},[37,38,39],"li",{},"Place your headline and caption text elements.",[37,41,42,43,47,48,51],{},"Select the caption and open the ",[14,44,46],{"href":45},"\u002Fhelp\u002Fexpressions-and-logic\u002Fexpression-tool","expression tool"," on its ",[30,49,50],{},"Y"," position.",[37,53,54,55,59],{},"Set it to ",[56,57,58],"code",{},"headline.bottom + 20",".",[10,61,62],{},"Now the caption always sits 20 pixels below the headline. A long headline pushes the caption down, a short one pulls it up, and the gap stays the same.",[10,64,65],{},[66,67],"img",{"alt":68,"src":69},"","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002F8aba5b9e-8ba3-46c7-0f1b-c0be7f85ef00\u002Fmax",[10,71,72,73,76,77,80,81,84,85,59],{},"You can chain this: give a third element a Y of ",[56,74,75],{},"caption.bottom + 20"," and the whole stack reflows together. The same idea works sideways with ",[56,78,79],{},"left"," and ",[56,82,83],{},"right",", for example placing a badge at ",[56,86,87],{},"title.right + 10",{"title":68,"searchDepth":89,"depth":89,"links":90},2,[],"expressions-and-logic","Build layouts that reflow automatically as text gets longer or shorter.","md",[],{},true,70,"\u002Fhelp\u002Fexpressions-and-logic\u002Fguide-dynamic-text-layouts","---\ntitle: \"Guide: Dynamic text layouts\"\ndescription: \"Build layouts that reflow automatically as text gets longer or shorter.\"\ncategory: expressions-and-logic\norder: 70\nkeywords: []\n---\nText in Bluepic resizes and wraps to fit its box, so when content comes from an [input field](\u002Fhelp\u002Finput-fields\u002Ftext-input-fields) you rarely know its final size. Expressions let the rest of the layout move with it, so nothing overlaps and the spacing stays even.\n\nThe trick is to position elements relative to each other using [element measurements](\u002Fhelp\u002Fexpressions-and-logic\u002Felement-metadata-subproperties) instead of fixed coordinates.\n\n**Example: a caption that follows a headline.**\n\n1. Place your headline and caption text elements.\n2. Select the caption and open the [expression tool](\u002Fhelp\u002Fexpressions-and-logic\u002Fexpression-tool) on its **Y** position.\n3. Set it to `headline.bottom + 20`.\n\nNow the caption always sits 20 pixels below the headline. A long headline pushes the caption down, a short one pulls it up, and the gap stays the same.\n\n![](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002F8aba5b9e-8ba3-46c7-0f1b-c0be7f85ef00\u002Fmax)\n\nYou can chain this: give a third element a Y of `caption.bottom + 20` and the whole stack reflows together. The same idea works sideways with `left` and `right`, for example placing a badge at `title.right + 10`.\n",{"title":5,"description":92},"help\u002Fexpressions-and-logic\u002Fguide-dynamic-text-layouts","2026-06-16","mPvybX7j5OURJPEKkjw4iVOmKdU8Mt105_WVKSgpuvg",1789292811947]