How to use the drawing tool titled "Draw a pedigree chart in SVG format"
The drawing tool is easy to use; so it may be unnecessary to read this manual before using the tool. If you feel that the tool is somewhat awkward to use, please read the outline. When you need more detailed information, please read other sections as necessary.
(0) Outline
The tool's page includes: a region for displaying the pedigree chart (family tree chart); a region for indicating the information about the person at the mouse pointer; menu buttons; and submenus. When you click a menu button for the type of the operation you want to do, the input forms of the submenus belonging to that type will be displayed. Enter necessary data to the input form and thereby build a pedigree chart step by step.
- To add an individual person, use [Individuals] - [Add a person] submenu.
- To connect persons by a horizontal line (horizontal link) to indicate marriage or the like, use [Horizontal links] menu.
- To connect persons by a vertical line (vertical link) to indicate parent-and-child relation or the like, use [Vertical links] menu.
- To move one or more persons, use [Moving persons] menu.
- To shift the whole chart or increase or decrease a margin, use [Whole chart] menu.
- To save a pedigree chart, either finished or in progress, use [Output] menu. Several subsubmenus belong to [Output] menu. You can save the pedigree chart in SVG format, and also can download a set of files constituting a pedigree chart viewer.
- To read data that has been created, use [Read-in] menu.
- As the pedigree chart becomes larger (i.e., as persons and links increase), finding your target person from a pull-down list will be more difficult. When you feel such difficulty, hover the mouse pointer over the target person in the chart. The information (such as the ID and coordinates) about the person will be displayed in the region just below the pedigree chart. Some browser may fail to quickly react to such mouse hovering, but will react if you shake the mouse pointer over the target person for a while. The pull-down lists are sorted by the ID; and in the pull-down lists, each person is indicated by his/her ID and name. So, indication of the target person's ID will help you to search a pull-down list for the target person.
Do not hesitate to contact me on Twitter.
(1) [Individuals] menu
To add an individual person, use [Add a person] submenu. Other submenus are not always necessary.
(1-1) [Mode for character spacing] submenu
[Wide mode] is recommended when you intend to write the name of (and/or an annotation for) a person in Han characters, Kana characters, etc. On the other hand, [narrow mode] is recommended when you intend to write the name of (and/or an annotation for) a person in Latin characters etc. The mode selected by this submenu affects the width occupied by character strings of the names and annotations of persons written in horizontal direction.
I'm sorry that this tool might fail to support other writing systems, especially, right-to-left writing systems such as Arabic script.
(1-2) [Add a person] submenu
- Enter the name of the person you want to add.
- Mark the checkbox if the name should be displayed vertically.
- Select the style to be applied to the rectangle indicating the person: “neutral” for gray, “feminine” for orange, and “masculine” for green. You can change the style later by manually editing the CSS file and/or SVG file.
- Specify where the newly added person should be located. You can specify that the person should be located at random. Instead, you can specify an existing person as a reference point and specify that the newly added person should be located at the upper left of the reference point person, just above him/her, at the upper right of him/her, on the left-hand side of him/her, on the right-hand side of him/her, at the lower left of him/her, just below him/her, or at the lower right of him/her.
- Click [add this person as specified above] button after specifying the above details.
(1-3) [Rename a person] submenu
Select a person you want to rename, from the pull-down list. Then, enter the new name.
If the new name is longer than the current name, the rectangle of the renamed person will be expanded automatically. Conversely, if the new name is shorter than the current name, you can choose whether to shrink the rectangle so that it will fit the new name or to let the rectangle's size remain as it is.
(1-4) [Increase the height of a rectangle] submenu
To draw a person having many horizontal links (e.g., an emperor having many concubines) and the linked many persons, and arrange them neatly and comprehensibly, the rectangle of the former person should have a sufficient height. Use this submenu in such a case in order to increase, as needed, the height of the rectangle of the person who have (or is intended to have) many horizontal links.
(1-5) [Annotate a person] submenu
You can annotate a person as you like. The annotation can be any text, such as the posthumous name, temple name, courtesy name, pseudonym, alias, year of birth, year of death, etc. The color of the annotation is selectable from the predefined choices. You can change the color later by manually editing the CSS file and/or SVG file.
There is no feature for modifying or removing annotations. Please manually edit SVG file to modify or remove an annotation.
(1-6) [Add a circular badge (in which a number is written) to a person] submenu
Use this submenu in order to indicate figures indicating a numerical order such as the order of siblings, order of emperors of a dynasty, order of succession to the throne at a certain point in time, etc.
- The integers from 0 to 999 can be used.
- The badge has the shape of a circle. The color of the badge is selectable from the predefined choices. You can change the color later by manually editing the CSS file and/or SVG file.
- You can select which of the four corners of the rectangle the badge should be put at. In other words, you can put four badges at maximum to one person.
This submenu can be used for other purposes than indication of the numerical order. For example, this submenu can be used to (temporarily or permanently) mark a certain person. The mark might be, for example, a black badge of No. 0 that is put on the lower right corner of him/her.
For example, a badge as a mark may mean that (1) you suspended the drawing operations, (2) you leaved the marked person unsettled, and (3) you intend to study his/her descendants and to add them to the pedigree chart later.
As another example, two or more badges of the same number (and the same color) may be used as marks to mean that two or more rectangles indicate the same single person. Such usage will be helpful when the pedigree chart is highly complicated, where arranging multiple rectangles for the single person separately may be helpful in simplifying the chart and making the chart easier to understand at a glance.
There is no feature for modifying or removing a badge. Please manually edit SVG file to modify or remove a badge.
(1-7) [Look at a selected person] submenu
When a person is selected from the pull-down list, the selected person will be displayed at the center of the region for the pedigree chart. This submenu is provided for a case where so many persons (e.g., hundreds or more) are included in the pedigree chart that you cannot remember the location of each person in the chart and you have to look around the whole chart for a person you want to see.
There may be room for improvement. Sometimes, finding a target person from the pull-down list seems to be difficult, too.
(1-8) [Remove a person] submenu
Select a person to remove, and then remove him/her.
(2) [Horizontal links] menu
Use [Horizontal links] menu in order to connect two persons by a horizontal line (horizontal link) to indicate marriage or the like. In many cases, [Add a horizontal link] submenu will suffice.
(2-1) [Add a horizontal link] submenu
Select two persons that you want to connect by a horizontal link, from the two pull-down lists; and select the type of the horizontal link (i.e., a single-line link or a double-line link). Then, click [add a new link as specified] button. If necessary, one of the two selected persons will be automatically moved downwards so that the link connecting them will be (not slanted but) horizontal.
By default, on each vertical edge of the rectangle that indicates each person, the 1/8, 2/8, 3/8, 4/8, 5/8, 6/8, and 7/8 points (from the top to the bottom) can be an end point of a horizontal link. With no details specified, the 4/8 point (i.e., the middle point of the vertical edge) will be automatically selected as an end point of a horizontal link. If the 4/8 point is already occupied, the 2/8 point will be selected. If the 2/8 point is also already occupied, then the 6/8 point will be selected. As such, the position of the end point will be selected in accordance with the descending priority of 4/8, 2/8, 6/8, 1/8, 7/8, 3/8, and 5/8. The above-mentioned selection will be done automatically.
By manually editing the SVG file of the pedigree chart, you can modify a solid line of a horizontal link (either single-line link or double-line link) to a dashed line.
(2-2) [Add a horizontal link with details specified] submenu
Use this submenu when you want to specify the end points of a horizontal link. This submenu is convenient for a case where there is a person to be connected with many persons (such as an emperor having many concubines).
Select (1) the person on the left-hand side of a horizontal link, (2) the position on the right vertical edge of his/her rectangle, i.e., the position that should be the end point of the horizontal link, (3) the person on the right-hand side of the horizontal link, (4) the position on the left vertical edge of his/her rectangle, i.e., the position that should be the end point of the horizontal link, and (5) the type of the horizontal link. Then, click [add the new link as specified above] button. If necessary, one of the two selected persons will be automatically moved downwards so that the link connecting them will be (not slanted but) horizontal.
(2-3) [Increase the allowable number of horizontally connectable partners] submenu
By default, each person is set to be connectable with other seven persons on his/her right-hand side and with yet other seven persons on his/her left-hand side. Even this default setting, however, might be insufficient for a certain person who should be connected with many persons (e.g., an emperor having many concubines). In such a case, use this submenu.
Select the target person, select the left or right vertical edge of the rectangle of him/her, and click [increase the allowable number of partners] button. Then, the number of horizontal links that are allowed to be connected to the selected edge of the rectangle of the target person will be increased.
The number of horizontal links that are allowed to be connected to a vertical edge is 2n − 1 (n ≥ 3). In other words, the number is 7, 15, 31, 63, ….
It is rare that the pedigree chart includes a person to be connected with fifteen (15) or thirty one (31) persons on his/her one side (either right-hand side or left-hand side). This submenu is helpful not only in such a rare case but also in more frequent cases to improve the appearance of the chart.
For example, assume that you want to connect five (5) persons to a target person on his/her right-hand side. In this case, which is not so extraordinary, this submenu will be helpful as explained below.
First, use this submenu to increase the number of horizontal links allowed to be connected to the target person on his/her right-hand side so that the number will be fifteen (15). Next, connect the five persons to the target person so that the five horizontal link are connected to the 2/16, 5/16, 8/16, 11/16, and 14/16 points (from the top to the bottom) on the right vertical edge of the rectangle of the target person. These steps make the intervals between the five horizontal links wider than the intervals of the case where this submenu were not be used and the links were connected to the positions at 2/8, 3/8, 4/8, 5/8, 6/8 on the right vertical edge (i.e., 3/16 of the length of the edge is longer than 1/8 of that). Dispersing the horizontal links from the top to the bottom of a vertical edge in a balanced manner (and thereby making the intervals between them wider) can help to improve the appearance and visibility of the chart.
(2-4) [Remove a horizontal link] submenu
Select a horizontal link to remove, and then remove it.
(3) [Vertical links] menu
Use [Vertical links] menu in order to connect persons by a vertical line (vertical link) to indicate parent-and-child relation or the like. In many cases, [Add a vertical link] submenu will suffice.
(3-1) [Add a vertical link] submenu
You can add a vertical link from a parent to a child (either a solid line or a dashed line). You can also add a vertical link from parents who are connected by a horizontal link, to a child (either a solid line or a dashed line).
You can choose either a solid line or a dashed line as you like. For example, a solid line may be used for the relation between a parent and his/her biological child, whereas a dashed line may be used for the relation between a parent and his/her adopted child. As another example, a dashed line may be used for connecting an ancestor and his/her descendant, with some persons in between on the lineage omitted.
When a new vertical link is connected to the upper or lower horizontal edge of the rectangle of a person, the position to which the vertical link should be connected is decided as below. If no vertical link is connected on the edge, then the new vertical link will be connected to the middle point of the edge. If the line type (which is either a solid line or a dashed line) of the new vertical link is the same as that of a link already connected to the middle point of the edge, then the new vertical link will be connected to the middle point of the edge. In other cases, the new vertical link will be connected to the 1/4 position from the left or right on the edge.
(3-2) [On a horizontal link, adjust the position from which vertical links are to run down] submenu
By default, a vertical link to a child from parents who are connected by a horizontal link runs down from the middle point of the horizontal link. This submenu is provided for adjusting the position on the horizontal link from which the vertical link runs down. This submenu will be convenient, for example, when the pedigree chart is very large and complicated.
(3-3) [Remove a vertical link] submenu
Select a vertical link to remove, and then remove it.
(4) [Moving persons] menu
Submenus for several ways of moving persons are provided.
Please note that the undo feature is not provided. When you try moving one or more persons and the result is undesirable, (1) save your data of the previous step by [Download the SVG file of any preferable step] menu, (2) read the saved SVG file from [Read an SVG file created and saved before] menu, and (3) restart your work. Steps (1) and (2) will undo the undesired operation.
Sometimes, the motion of the one or more persons can be cancelled out by simply carrying out the opposite motion, but such cancellation does not always work well. In general, when multiple persons are moved at once, there may be no motion that can cancel out the previously performed motion. Thus, the above steps (1), (2) and (3) will be needed.
(4-1) [Move a person] submenu
Select a person to be moved and the moving direction. Specify how much the selected person should be moved.
Note: When the names of persons are written vertically, the alignment of the rectangles in the horizontal direction will be kept tidy if you move persons horizontally in units of 84 pixels.
(4-2) [Align a person with another] submenu
Select a target person to be moved, a reference person whose position should be used as the reference point, and the type of alignment.
(4-3) [Move a person with reference to his/her parent(s) or child(ren)] submenu
You can move a selected person horizontally so that the vertical link from his/her parent(s) will be straight. You can also move a selected person horizontally so that he/she will be positioned at the center, in the horizontal direction, of the position(s) of his/her child(ren) connected to the lower horizontal edge of his/her rectangle.
(4-4) [Move down a person and his/her descendants] submenu
A selected person and his/her descendants will be moved down together. In addition, any person connected by a horizontal link with any of thus moved persons (and the descendants of such a connected person) will also be moved down cascadingly. You can specify how much they should be moved down.
(4-5) [Move persons cascadingly to the right] submenu
A selected person and all the persons reachable from him/her by following any links downwards or rightwards will be moved together to the right. You can specify how much they should be moved.
(4-6) [Move persons cascadingly to the left] submenu
A selected person and all the persons reachable from him/her by following any links downwards or leftwards will be moved together to the left. You can specify how much they should be moved.
(5) [Whole chart] menu
Submenus relating to the whole chart (not relating to an individual part of the chart) are provided.
(5-1) [Shift the whole chart] submenu
When you want to adjust a margin (the top, bottom, left, or right margin) of the pedigree chart, use this submenu and shift the whole chart upwards, downwards, to the left, or to the right. When the chart has been shifted unexpectedly, shift the chart again in the opposite direction to cancel the unexpected shifting.
(5-2) [Modify the height of the whole chart] submenu
Use this submenu when you want to increase the height of the whole pedigree chart or you want to reduce the bottom margin (by decreasing the height of the whole pedigree chart). If you want to reduce the top margin, shift the whole chart upwards by [Shift the whole chart] submenu.
(5-3) [Modify the width of the whole chart] submenu
Use this submenu when you want to increase the width of the whole pedigree chart or you want to reduce the right margin (by decreasing the width of the whole pedigree chart). If you want to reduce the left margin, shift the whole chart leftwards by [Shift the whole chart] submenu.
(5-4) [Set the margins] submenu
Use this submenu when you want to set the same value to the top, bottom, left, and right margins of the chart. This submenu will be useful when used to finish the chart.
(5-5) [Modify the title of the chart] submenu
It would be useful to embed a title into the SVG file of the created pedigree chart. When the chart is opened by a Web browser, the title will be displayed as tooltip text. The title may also be read out by a screen reader.
This submenu is provided to enter the title. The initial value of the title is the empty string.
(5-6) [Modify the description of the chart] submenu
This submenu is provided to enter a description of the pedigree chart. The description will be embedded into the SVG file of the created pedigree chart. The embedded description may be read out by a screen reader (while the description is invisible). The initial value of the description is the empty string. Depending on your purpose of the pedigree chart, please consider embedding a description to improve the accessibility.
(6) [Output] menu
In many cases, [Download the SVG file of the current state] submenu will suffice. Because no undo feature is implemented, [Download the SVG file of any preferable step] submenu is provided instead. [Download a pedigree chart viewer] submenu allows you to download a set of files constituting a simple viewer for the created pedigree chart. A few other output features are also provided.
(6-1) [See the SVG code] submenu
This submenu seems to be unnecessary in most cases because this is provided chiefly for debugging.
(6-2) [Download the SVG file of the current state] submenu
You can download the data of the current pedigree chart as an SVG file. You can specify the prefix of the file name as you like.
You can also specify whether to let the custom data attributes remain or to delete them. Let the custom data attributes remain if you intend to open the downloaded file later by this tool to further edit the pedigree chart. Delete the custom data attributes only when you finish editing the pedigree chart and you don't intend to open the chart by this tool any more. In such a case, if you want to reduce the size of the SVG file before using the file in another app, deletion of the custom data attributes will be useful.
Web browsers can be used to browse the downloaded SVG file. So as to browse it in the same style (e.g., in the same color, of the same line width, etc.) as the one applied during editing, put the downloaded SVG file and the CSS file for it on the same folder on your computer.
(6-3) [Download the SVG file of any preferable step] submenu
As mentioned above, no undo feature is provided. Instead, you can download the data of each step as an SVG file.
The character string entered in the input field for the prefix of the file name in [Download the SVG file of the current state] submenu will be used as the prefix of the name of the SVG file downloaded from this submenu.
Web browsers can be used to browse the downloaded SVG file. So as to browse it in the same style (e.g., in the same color, of the same line width, etc.) as the one applied during editing, put the downloaded SVG file and the CSS file for it on the same folder on your computer.
(6-4) [Output the list of names] submenu
You can download, as a text file, the list of the names of the persons included in the pedigree chart. You can choose whether to additionally output, to the text file, the annotations (i.e., notes) that have been added by using [Annotate a person] submenu.
(6-5) [Download a pedigree chart viewer] submenu
The first three files of the following list will be automatically downloaded. Put the following six files on the same directory on your computer and open the HTML file by a Web browser. It will work as a simple viewer for the pedigree chart.
- The SVG file of the pedigree chart will be downloaded with the file name such as
pedigree_viewer_yyyy-mm-dd_hhmmss.sss.svg
. - The HTML file for the body of the viewer will be downloaded with the file name such as
pedigree_viewer_yyyy-mm-dd_hhmmss.sss.html
. - The JavaScript file including data definitions that will be necessary for the viewer to work will be downloaded with the file name such as
pedigree_viewer_yyyy-mm-dd_hhmmss.sss.js
. - Manually download the common CSS file (
pedigree_svg.css
) for the SVG file of the pedigree chart. - Manually download the common CSS file (
pedigree_viewer.css
) for the HTML file for the body of the viewer. - Manually download the common JavaScript file (
pedigree_viewer.js
) that will be necessary for the viewer to work.
For simply browsing the pedigree chart, the viewer will be useful enough as it is. There is, however, room for improvement in convenience of the viewer. The viewer will be made more convenient by editing the HTML file for the body of the viewer to add information about the persons, horizontal links, and vertical links in the pedigree chart.
The viewer is designed so that when invoked with a query string such as ?pid=p123
, the viewer will display the detailed information about the specified person (in this example, the person whose ID is p123
) and display him/her at the center.
If no query string is specified, the person having the lowest ID, which is p0
in most cases, will be regarded as the specified person.
When linking from any other HTML file to the viewer, it will be useful to specify the linked location (i.e., the value of the href
attribute) as pedigree_viewer_yyyy-mm-dd_hhmmss.sss.html?pid=p123
, for example.
By clicking the “Chart” button or the “List” button at the upper right corner of the viewer, you can switch between the chart mode and list mode.
In the chart mode, the pedigree chart is displayed.
In the list mode, the pedigree chart is hidden, and the list you have edited (i.e., the list, each item of which includes information about a person, a horizontal link, or a vertical link in the chart) is displayed.
By default, the viewer is opened in the chart mode.
If the viewer is opened with the query string ?page_style=list
, the list mode is applied.
(7) [Read-in] menu
This menu is for reading data that has been created.
(7-1) [Read an SVG file created and saved before] submenu
By using this submenu, an SVG file that has been saved by [Download the SVG file of the current state] submenu, [Download the SVG file of any preferable step] submenu, or [Download a pedigree chart viewer] submenu can be read into the tool. After the SVG file has been read, you can edit the pedigree chart as you like. When you finish editing, save an SVG file again as you need.
(7-2) [Read automatically saved SVG data] submenu
The data of the pedigree chart may accidentally disappear while you are editing the pedigree chart. For example, while you are editing the pedigree chart, you might accidentally go to another page (for example by tapping the browser's [Back] button), reload this tool's page, or close the tab of this tool's page. In some cases, the data may remain fortunately; but in other cases, the data may disappear. It may perhaps depends on your browser's settings.
This submenu may serve as measures against such disappearance of data. However, it is not recommended to rely on this submenu too much because your browser's settings may decide whether the data will be successfully restored in response to a click on [read it and display the chart as read] button.
(8) Editing saved data manually
You can change the appearance of the pedigree chart as you like, simply by editing one or more files using a text editor. You can also make the pedigree chart viewer more convenient by adding descriptions.
(8-1) Editing the SVG file of the pedigree chart
If you want to modify the style applied to the pedigree chart, or if you want to remove a badge or an annotation that you have added mistakenly, edit the SVG file manually. SVG files are, in fact, plain text files; so you can edit them easily by using a text editor.
You can modify the style by editing the style
element, which is written as shown below and can be found near the beginning of the SVG file of the pedigree chart.
<style> @import url(pedigree_svg.css); </style>
For example, a new style for emperors may be defined as below.
In this case, specify the value emperor
(instead of the value neutral
, feminine
, or masculine
) for the class
attribute of the rect
elements that correspond to the persons to whom you want to apply this new style.
<style>
@import url(pedigree_svg.css);
rect.emperor {
stroke: hsl(255, 100%, 50%);
fill: hsla(255, 100%, 70%, 0.5);
}
</style>
In another case, your new style definition such as the above one may be added to pedigree_svg.css
instead of the style
element within the SVG file.
In such a case, editing the SVG file will solely mean editing the class
attribute of the rect
elements.
In yet another case, your new style may be defined in a new CSS file.
Let the name of the new CSS file be user_defined.css
, for example.
In this case, edit the style
element of the SVG file as shown below (and of course, also edit the class
attribute of the rect
elements as appropriate).
<style>
@import url(pedigree_svg.css);
@import url(user_defined.css);
</style>
If you have added an incorrect annotation mistakenly, delete the text
element corresponding to it.
An illustrative text
element of an annotation is shown below.
A text
element of an annotation has the id
attribute whose value has the form of “p
+ number + n
+ number” (e.g., p22n0
as below).
<text writing-mode="tb" id="p22n0" x="10332" y="1512" textLength="48" lengthAdjust="spacing" dx="8" dy="0" class="note blue">梁武帝</text>
If you have added an incorrect badge mistakenly, delete the circle
element and the text
element that correspond to the badge.
An illustrative pair of a circle
element and a text
element corresponding to a badge is shown below.
The circle
element for a badge has the id
attribute whose value has the form of “p
+ number + b_
+ position” (e.g., p2b_upper_right
as below), and the text
element for the badge has the id
attribute whose value has the form of “p
+ number + bn_
+ position” (e.g., p2bn_upper_right
as below).
<circle id="p2b_upper_right" cx="1722" cy="282" r="17" fill="darkblue"></circle>
<text id="p2bn_upper_right" x="1710" y="290" textLength="8" dx="8" dy="0" class="num_badge">1</text>
You can modify the color of a badge by changing the value of the fill
attribute of the circle
element.
See the <color> CSS data type for details of how to specify the color.
The tool provides no choice of a dashed line for drawing a horizontal link, but you can modify any horizontal link to be drawn by a dashed line.
Specifically, in the class
attribute of the path
element for drawing a horizontal link, add the value dashed
so that the result will be class="double dashed"
or class="single dashed"
.
(8-2) Editing the HTML file of the viewer
The viewer for the pedigree chart includes an HTML file. By editing the HTML file, you can make the viewer more convenient so that the chart and some descriptions about persons in the chart can be seen at once. The recommended way of editing the HTML file is explained below.
Modify the paragraph shown below (i.e., modify the contents of this p
element).
It may be useful to write a general explanation about the pedigree chart in this paragraph.
<div id="info_all">
<p>Edit this paragraph as you like.</p>
Below this p
element, a dl
element exists, which includes pairs of dt
element and dd
element.
Each pair corresponds to a person, a horizontal link (indicating marriage etc.), or a vertical link (indicating parent-and-child relation etc.).
It will be helpful to write a description about the person or the link in the dd
element.
Any note and/or any link may be embedded in the dd
element as shown below (see the italicized portion).
<dt id="p162_t">Sima Yi</dt>
<dd id="p162_d">
<button type="button" onclick="look_at('p162')">Look at Sima Yi</button>
<button type="button" onclick="reselect('p162')">Select Sima Yi</button>
Sima Yi (司馬懿). 179 - 251. His courtesy name is Zhongda (仲達).
[<a href="https://en.wikipedia.org/wiki/Sima_Yi">Wikipedia</a> |
<a href="https://zh.wikisource.org/wiki/%E6%99%89%E6%9B%B8/%E5%8D%B7001">Book of Jin</a>]
</dd>
(8-3) Editing the CSS file for the SVG file
The CSS file (named pedigree_svg.css
) for the SVG file can be edited.
For example, edit the fill
properties (for the background color of rectangles, and the text color), and the stroke
properties (for the color of the outlines of rectangles, and the color of horizontal and vertical links), as you like.
See the <color> CSS data type for details of how to specify the color.
As an example, an alternative CSS file (monochrome_svg.css
) is provided.
This CSS is designed so that the main body of a pedigree chart (i.e., all the parts except for annotations and badges) will be displayed in black and white.
Download monochrome_svg.css
, rename it pedigree_svg.css
, put it and the SVG file of a pedigree chart in the same folder on your computer.
Then, the pedigree chart will be displayed in black and white.
If you want to eliminate the outlines of the rectangles, modify the value of the stroke
property to none
as shown below.
rect.neutral, rect.feminine, rect.masculine {
stroke: none;
fill: white;
}
You can also modify the font-family
property as you like.
A dashed line can be changed to a dot-and-dash line or a dotted line.
Such change can be done by editing the value of the stroke-dasharray
attribute set for a dashed line.
See the stroke-dasharray
attribute for details.
A new class can be defined, of course.
For example, a class for emperors defined as to rect
elements may be useful, and a class for a particular lineage defined as to path
elements may also be useful.
(8-4) Editing the CSS file for the HTML file
The viewer for the pedigree chart includes the CSS file (named pedigree_viewer.css
) for the HTML file.
You can change the appearance of the viewer by editing this CSS file.
Edit some properties such as color
, background
, border-color
, font-family
, etc. as you like.
See the <color> CSS data type for details of how to specify the color.