<text> maybe better against <path> for expressing String information

[ShangChien]

from rdkit import Chem
from rdkit.Chem import Draw
mol=Chem.MolFromSmiles('C1=CC=C2C3=CC=CC=C3OC2=C1')
drawer = Draw.MolDraw2DSVG(300, 300)
drawer.DrawMolecule(mol)
drawer.FinishDrawing()
svg = drawer.GetDrawingText()
with open("mol1.svg", "w") as f:
    f.write(svg)

Get SVG with above code, inspect the result:

long path string for the atom Oxygen

I would like to propose that using the <text> element in place of the <path> element to represent text information in the output. This would provide a more semantically meaningful representation of the text and could make it easier to process the information programmatically,like this:

Advantages:

1. Semantic meaning: The <text> element is a standard HTML element specifically designed for representing text content, providing a more semantically meaningful representation of the text information in the output.
2. Programmatic processing: Text information represented using the <text> element is easier to process programmatically, as text-based search and extraction algorithms can more easily identify and extract relevant information.
3. Accessibility: The use of the <text> element can improve the accessibility of the output for users with disabilities, as screen readers can more easily read and interpret the information.
4. Interoperability: The <text> element is a widely-supported standard in many different platforms and technologies, making the output more easily interoperable with other tools and technologies that support it.

By using the <text> element in place of the <path> element can improve the quality and usability of the output, making it easier to process, access, and integrate with other tools and technologies.

[greglandrum]

@ShangChien A path is used by default because we're using freetype to get the best text quality in the output.
If you want to disable this, you can use the noFreetype optional argument:

In [5]: d2d = Draw.MolDraw2DSVG(-1,-1,noFreetype=True)

Then the SVG will contain text elements instead of paths

[ShangChien]

Thanks for your answer,
It was an oversight on my part not to check its parameters carefully. MolDraw2DSVG() is nice work for provide option to users!

[ShangChien]

Dear @greglandrum :
By the way, how to set noFreetype=True in rdkit,js. The svg picture is much suitable in web application.

[DavidACosgrove]

Hi @ShangChien, Generally the SVG is intended for humans to look at and, as Greg says, the visual appearance is much tidier using the FreeType paths as we can control the position of the characters much more precisely. You make a good point about accessibility, though. As someone whose wife spent 20 years teaching visually impaired children, I feel remiss not thinking about that. Also, as a developer who spends more time looking at the text of the SVGs than most, not knowing which path is drawing which character is frustrating. @greglandrum, I wonder if we can overlay the <text> on top of the path with a colourless, transparent font and background so we can have the best of both worlds? It would be trivial to implement if it’s technically possible. Although I wonder if screen readers would ignore it if it’s not visible. Dave

On Fri, 10 Feb 2023 at 07:49, Greg Landrum ***@***.***> wrote: @ShangChien <https://github.com/ShangChien> A path is used by default because we're using freetype to get the best text quality in the output. If you want to disable this, you can use the noFreetype optional argument: In [5]: d2d = Draw.MolDraw2DSVG(-1,-1,noFreetype=True) Then the SVG will contain text elements instead of paths — Reply to this email directly, view it on GitHub <#6076 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACGF2FXU2AWX2I32WC2YETLWWXXHJANCNFSM6AAAAAAUXKBP74> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

-- David Cosgrove Freelance computational chemistry and chemoinformatics developer http://cozchemix.co.uk

[greglandrum]

@DavidACosgrove

I wonder if we can overlay the on top of the path with a colourless, transparent font and background so we can have the best of both worlds? It would be trivial to implement if it’s technically possible. Although I wonder if screen readers would ignore it if it’s not visible.

Even if screen readers ignore it, if it worked it might still be useful for allowing text to be copied out of SVGs and, theoretically, for searching for text in SVGs.
I wonder if it's worth the additional complexity - both in the code and in the output SVG.

[ShangChien]

May be we can still use path to draw characters in proper position, with add extra text in class attribute, like this:

...
<path class='atom-10 text-O' 
d='M 142.8 209.3
Q 142.8 205.5, 144.6 203.4
Q 146.5 201.3, 150.0 201.3
Q 153.5 201.3, 155.4 203.4
Q 157.2 205.5, 157.2 209.3
Q 157.2 213.1, 155.3 215.3
Q 153.4 217.4, 150.0 217.4
Q 146.5 217.4, 144.6 215.3
Q 142.8 213.1, 142.8 209.3
M 150.0 215.7
Q 152.4 215.7, 153.7 214.1
Q 155.0 212.4, 155.0 209.3
Q 155.0 206.2, 153.7 204.6
Q 152.4 203.1, 150.0 203.1
Q 147.6 203.1, 146.3 204.6
Q 145.0 206.2, 145.0 209.3
Q 145.0 212.5, 146.3 214.1
Q 147.6 215.7, 150.0 215.7
' fill='#FF0000'/>

By doing so, others or developers can clearly and easily know what the path draws.

[DavidACosgrove]

Hi @ShangChien, It did occur to me that something like that could be helpful, be minimally intrusive and, crucially, be very little work. I will implement it in the next few days. Dave

…

On Sat, Feb 11, 2023 at 7:43 AM shang chien ***@***.***> wrote: May be we can still use path to draw characters in proper position, with add extra text in class attribute, like this: ... <path class='atom-10 text-O' d='M 142.8 209.3 Q 142.8 205.5, 144.6 203.4 Q 146.5 201.3, 150.0 201.3 Q 153.5 201.3, 155.4 203.4 Q 157.2 205.5, 157.2 209.3 Q 157.2 213.1, 155.3 215.3 Q 153.4 217.4, 150.0 217.4 Q 146.5 217.4, 144.6 215.3 Q 142.8 213.1, 142.8 209.3 M 150.0 215.7 Q 152.4 215.7, 153.7 214.1 Q 155.0 212.4, 155.0 209.3 Q 155.0 206.2, 153.7 204.6 Q 152.4 203.1, 150.0 203.1 Q 147.6 203.1, 146.3 204.6 Q 145.0 206.2, 145.0 209.3 Q 145.0 212.5, 146.3 214.1 Q 147.6 215.7, 150.0 215.7 ' fill='#FF0000'/> By doing so, others or developers can clearly and easily know what the path draws. — Reply to this email directly, view it on GitHub <#6076 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACGF2FU6PGDWSB2R7HPL3JTWW47ILANCNFSM6AAAAAAUXKBP74> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- David Cosgrove Freelance computational chemistry and chemoinformatics developer http://cozchemix.co.uk