Techniques for visually rendering a set of characters and other elements in a visual design
Systems and methods for visually rendering a set of characters in a visual design are disclosed. According to certain aspects, an electronic device may determine a position for a character sizing box within a container element of the visual design. Further, the electronic device may determine a placement location for a set of characters within the character sizing box. Additionally, the electronic device may generate and display a visual rendering of the visual design that may comprise the set of characters within the character sizing box which is positioned within the container element, where the visual rendering may comprise additional content positioned relative to the set of characters according to a layout format.
1. A computer-implemented method of visually rendering a set of characters in a visual design, the computer-implemented method comprising:
determining, by at least one computer processor, a position for a character sizing box within a container element of the visual design, the position based on a shape of the container element;
determining, by the at least one computer processor based on a horizontal center and a vertical center of each of the set of characters, a placement position for the set of characters to be centered within the character sizing box;
identifying, by the at least one computer processor, a layout format of the set of characters relative to additional content of the visual design;
generating, by the at least one computer processor, a visual rendering of the visual design comprising (i) the set of characters within the container element according to the placement position within the character sizing box, and (ii) the additional content relative to the set of characters according to the layout format; and
displaying, in a user interface, the visual rendering.
2. The computer-implemented method of claim 1 , wherein an aspect ratio of the character sizing box is not the same as an aspect ratio of the container element.
3. The computer-implemented method of claim 1 , wherein generating the visual rendering comprises:
generating, by the at least one computing processor, the visual rendering further comprising an outline of the container element, wherein a thickness of the outline is based on a font of the set of characters.
4. The computer-implemented method of claim 1 , wherein the layout format is either a stacked layout format or a side-by-side layout format.
5. The computer-implemented method of claim 4 , wherein when the layout format is the stacked layout format, the container element is depicted on top of the additional content, where a width of the container element matches a width of the additional content.
6. The computer-implemented method of claim 1 , further comprising:
adjusting, by the at least one computer processor within the character sizing box, the set of characters based on at least one of an ascender or a descender present in the set of characters.
7. A system for visually rendering a set of characters in a visual design, comprising:
a user interface;
a memory storing a set of computer-readable instructions; and
at least one processor interfacing with the user interface and the memory, and configured to execute the set of computer-readable instructions to cause the at least one processor to:
determine a position for a character sizing box within a container element, the position based on a shape of the container element of the visual design,
determine, based on a horizontal center and a vertical center of each of the set of characters, a placement position for the set of characters to be centered within the character sizing box,
identify a layout format of the set of characters relative to additional content of the visual design,
generate a visual rendering of the visual design comprising (i) the set of characters within the container element according to the placement position within the character sizing box, and (ii) the additional content relative to the set of characters according to the layout format, and
cause the user interface to display the visual rendering.
8. The system of claim 7 , wherein an aspect ratio of the character sizing box is not the same as an aspect ratio of the container element.
9. The system of claim 7 , wherein to generate the visual rendering, the at least one processor is configured to:
generate the visual rendering further comprising an outline of the container element, wherein a thickness of the outline is based on a font of the set of characters.
10. The system of claim 7 , wherein the layout format is either a stacked layout format or a side-by-side layout format.
11. The system of claim 10 , wherein when the layout format is the stacked layout format, the container element is depicted on top of the additional content, where a width of the container element matches a width of the additional content.
12. The system of claim 7 , wherein the at least one processor is configured to execute the set of computer-readable instructions to further cause the at least one processor to:
adjust, within the character sizing box, the set of characters based on at least one of an ascender or a descender present in the set of characters.
13. A non-transitory computer-readable storage medium having stored thereon a set of instructions, executable by at least one processor, for visually rendering a set of characters in a visual design, the set of instructions comprising:
instructions for determining a position for a character sizing box within a container element of the visual design, the position based on a shape of the container element;
instructions for determining, based on a horizontal center and a vertical center of each of the set of characters, a placement position for the set of characters to be centered within the character sizing box;
instructions for identifying a layout format of the set of characters relative to additional content of the visual design;
instructions for generating a visual rendering of the visual design comprising (i) the set of characters within the container element according to the placement position within the character sizing box, and (ii) the additional content relative to the set of characters according to the layout format; and
instructions for displaying, in a user interface, the visual rendering.
14. The non-transitory computer-readable storage medium of claim 13 , wherein an aspect ratio of the character sizing box is not the same as an aspect ratio of the container element.
15. The non-transitory computer-readable storage medium of claim 13 , wherein the instructions for generating the visual rendering comprise:
instructions for generating, by the at least one computing processor, the visual rendering further comprising an outline of the container element, wherein a thickness of the outline is based on a font of the set of characters.
16. The non-transitory computer-readable storage medium of claim 13 , wherein the layout format is either a stacked layout format or a side-by-side layout format.
17. The non-transitory computer-readable storage medium of claim 16 , wherein when the layout format is the stacked layout format, the container element is depicted on top of the additional content, where a width of the container element matches a width of the additional content.