[{"data":1,"prerenderedAt":103},["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,"seo":99,"stem":100,"updated":101,"__hash__":102},"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",{"title":5,"description":92},"help\u002Fexpressions-and-logic\u002Fguide-dynamic-text-layouts","2026-06-16","uP3nt1qnTdkii_csu-_TZm5xATpyCGO72xiwDV8pWdo",1787923688090]