Inkscape and CSS text rendering

Post about projects that use Inkscape for web design.
Posts: 1
Joined: Fri Jun 17, 2011 7:15 am

Inkscape and CSS text rendering

Postby gorgoglionemeister » Fri Jun 17, 2011 7:32 am

Hi, I'm designing a website mockup with Inkscape. I would like to insert some text and I want this text displaying exactly as the future HTML/CSS I will code (especially about the "line-height" property and the position of the text within the line). I played with the text tool but I don't understood what the dashed rectangle that sorrounds the text when you click it is and how its (strange) position and dimensions are calculated. Can you help me? I don't know if you understood exactly
what I mean, feel free to ask me about it. Thanks. Antonio.

User avatar
Posts: 9534
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA

Re: Inkscape and CSS text rendering

Postby brynn » Wed Apr 18, 2012 7:43 am

Hi Antonio,
I don't know how I ever missed your message, which was posted originally so very long ago. Probably you have already figured this out. But just in case, I thought I'd answer, and also apologize that it didn't get answered in a timely manner.

The dashed line rectangle is called a bounding box. It's simply an indication that the object, or text in this case, is selected, and also a visual representation of the object's dimensions. I do know what you mean about it being strange on selected text, but I can't explain it.

Posts: 383
Joined: Fri Nov 19, 2010 3:04 pm

Re: Inkscape and CSS text rendering

Postby chriswww » Mon Aug 06, 2012 1:26 pm

the text dialog box (not the text tool) shows that you can set line height in percentages. Whether or not this relates to line-height in CSS i don't know. it would also be useful if you could set it in points, pixels, etc.
the time is nigh when your svg mockup will display natively in a browser...where you can apply CSS to svg directly.
and then one fine day the svg will no longer be a mockup but the actual code.

User avatar
Posts: 26
Joined: Mon Jul 01, 2013 11:03 pm
Location: Belgium

Re: Inkscape and CSS text rendering

Postby samueldellicour » Wed Jul 31, 2013 9:07 am

You can certainly use the line-height property from the Inkscape Text dialog in your css like this:
Suppose you have set a line-height of 140% for some text in Inkscape (for example for all paragraphs), then in your css you can use

Code: Select all

p { line-height: 1.4;}

Note that I'm not using units here, and this is totally fine.
Or you can use

Code: Select all

p { line-height: 1.4em; }

See more information about the subtle difference between the two approaches here:

Return to “Inkscape & the Web”

Who is online

Users browsing this forum: No registered users and 1 guest