Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay comes with many features for customising the process of generation of Badges. Now to provide more freedom to the user in generation of badges, I have worked on feature which will provide user more freedom in choosing different text alignment for different lines and create badges more creatively.
In this Blog, I will be discussing how I implemented different text alignment for Different Line in Badgeyay Backend in my Pull Request.
To implement different text alignment for Different Line feature, first, the component in SVG that is determining the text alignment of the label has to be identified. The label that determines the text on the badge is the <text> label and within it, the label that determines the properties of the text is <tspan>. So mainly we need to alter the properties in the tspan.
The property that determines the font type for the badge is text-align and its default value is set to start(right alignment). If the property in the labels changed, then we can see the corresponding changes in the PDF generated from the svg.
Now the challenges were:
- To Determine the text-align value from the frontend.
- Using the same for the text-align in SVG..
- Changing the built SVG accordingly.
In this Blog, I will be dealing with changing the SVG in Backend according to text-align property provided by the User in the Frontend.
def change_text_align(self, filename, badge_size, paper_size, align_1, // Values from Frontend align_2, align_3, align_4, align_5): """ Module to change Text Alignment of each badge line :param `filename` - svg file to modify. :param `align_1` - Text Alignment to be applied on first line :param `align_2` - Text Alignment to be applied on Second line :param `align_3` - Text Alignment to be applied on Third line :param `align_4` - Text Alignment to be applied on Fourth line :param `align_5` - Text Alignment to be applied on Fifth line """ // Storing the Values passed altogether in a list. align = [1, align_1, align_2, align_3, align_4, align_5] // Selecting the dimension config based on the parameters passed in the function. dimensions = badge_config[paper_size][badge_size] if config.ENV == 'LOCAL': filename = 'static/badges/' + dimensions.badgeSize + 'on' + dimensions.paperSize + '.svg' else: filename = os.getcwd() + '/api/static/badges/' + dimensions.badgeSize + 'on' + dimensions.paperSize + '.svg' tree = etree.parse(open(os.path.join(self.APP_ROOT, filename), 'r')) element = tree.getroot() for idx in range(1, dimensions.badges + 1): for row in range(1, 6): //Selecting the text element with the ID _id = 'Person_color_{}_{}'.format(idx, row) path = element.xpath(("//*[@id='{}']").format(_id))[0] style_detail = path.get("style") style_detail = style_detail.split(";") for ind, i in enumerate(style_detail): if i.split(':')[0] == 'text-align': style_detail[ind] = "text-align:" + align[row] style_detail = ';'.join(style_detail) text_nodes = path.getchildren() path.set("text-align", style_detail) for t in text_nodes: text_style_detail = t.get("style") text_style_detail = text_style_detail.split(";") // Fill the text-align argument of the selected object by changing the value of text-align. text_style_detail[-1] = "text-align:" + align[row] text_style_detail = ";".join(text_style_detail) t.set("style", text_style_detail) etree.ElementTree(element).write(filename, pretty_print=True) print("Text Alignment Saved!")
After all the changes, the Updated SVG is used for Badge Generation with different text-align embedded.
Now, we are done with implementation of different text alignment for Different Line in Badgeyay Backend.
Resources: