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 sizes for different lines and create badges more creatively.
In this Blog, I will be discussing how I implemented Different Font Size for Different Line in Badgeyay Backend in my Pull Request.
To implement Different Font Size for Different Line feature, first, the component in SVG that is determining the font size 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 size for the badge is font-size and its default value is set to 31.25 px. 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-size value from the frontend.
- Using the same for the font-size in SVG..
- Changing the built SVG accordingly.
In this Blog, I will be dealing with changing the SVG in Backend according to Font Size provided by the User in the Frontend.
def change_font_size(self, filename, badge_size, paper_size, Font_size_1, // Values from Frontend font_size_2, font_size_3, font_size_4, font_size_5): """ Module to change size of each badge lines :param `filename` - svg file to modify. :param `font_size_1` - Size to be applied on first line :param `font_size_2` - Size to be applied on Second line :param `font_size_3` - Size to be applied on Third line :param `font_size_4` - Size to be applied on Fourth line :param `font_size_5` - Size to be applied on Fifth line """ // Storing the Values passed altogether in a list. font_size = [1, font_size_1, font_size_2, font_size_3, font_size_4, font_size_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-size': style_detail[ind] = "font-size:" + font_size[row] style_detail = ';'.join(style_detail) text_nodes = path.getchildren() path.set("font-size", style_detail) for t in text_nodes: text_style_detail = t.get("style") text_style_detail = text_style_detail.split(";") // Fill the font size argument of the selected object by changing the value of font-size. text_style_detail[-1] = "font-size:" + font_size[row] text_style_detail = ";".join(text_style_detail) t.set("style", text_style_detail) etree.ElementTree(element).write(filename, pretty_print=True) print("Font Size Saved!")
After all the changes, the Updated SVG is used for Badge Generation with different font size embedded
Now, we are done with implementation of Different Font Size for Different Line in
Badgeyay Backend.
Resources:
- Extracting map information from the SVG – Link
- LXML documentation – Link
- Parsing the SVG – Link
- Badgeyay Repository – Link
- Issue Link – Link
Pull Request Link – Link