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 font types for different lines and create badges more creatively.
In this Blog, I will be discussing how I implemented Different Font types for Different Line in Badgeyay Backend in my Pull Request.
To implement Different Font type for Different Line feature, first, the component in SVG that is determining the font 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 font-family and its default value is set to sans-serif. 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 font-type value from the frontend.
- Using the same for the font-type in SVG..
- Changing the built SVG accordingly.
In this Blog, I will be dealing with changing the SVG in Backend according to Font type provided by the User in the Frontend.
def change_font_family(self, filename, badge_size, paper_size, Font_1, // Values from Frontend Font_2, font_3, font_4, font_5): """ Module to change Font Family of each badge lines :param `filename` - svg file to modify. :param `font_1` - Family to be applied on first line :param `font_2` - Family to be applied on Second line :param `font_3` - Family to be applied on Third line :param `font_4` - Family to be applied on Fourth line :param `font_5` - Family to be applied on Fifth line """ // Storing the Values passed altogether in a list. font = [1, font_1, font_2, font_3, font_4, font_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] == 'font-family': style_detail[ind] = "font-family:" + font[row] style_detail = ';'.join(style_detail) text_nodes = path.getchildren() path.set("font-family", style_detail) for t in text_nodes: text_style_detail = t.get("style") text_style_detail = text_style_detail.split(";") // Fill the font family argument of the selected object by changing the value of font-family. text_style_detail[-1] = "font-family:" + font[row] text_style_detail = ";".join(text_style_detail) t.set("style", text_style_detail) etree.ElementTree(element).write(filename, pretty_print=True) print("Font Family Saved!")
After all the changes, the Updated SVG is used for Badge Generation with different font type embedded.
Now, we are done with implementation of Different Font type for Different Line in
Badgeyay Backend.
Resources: