No edit summary |
|||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
{{breadcrumb | {{breadcrumb | ||
| link1=[[FamilySearch Wiki:Manual of Style|Wiki Manual of Style]] | | link1=[[FamilySearch Wiki:Manual of Style|Wiki Manual of Style]] | ||
| link2= | | link2=[[FamilySearch Wiki:WCAG Required Changes to Wikitext Code|WCAG Required Changes to Wikitext Code]] | ||
| link3= | | link3= | ||
| link4= | | link4= | ||
| Line 11: | Line 11: | ||
*The [https://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial Wikipedia Manual of Style] that describes accessibility best practices was used to clarify what is allowed and not allowed when creating tables on the Research Wiki. | *The [https://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial Wikipedia Manual of Style] that describes accessibility best practices was used to clarify what is allowed and not allowed when creating tables on the Research Wiki. | ||
*See [[FamilySearch Wiki:Manual of Style-Table Examples|Manual of Style-Table Examples]] for examples of approved tables with wikitext. | *See [[FamilySearch Wiki:Manual of Style-Table Examples|Manual of Style-Table Examples]] for examples of approved tables with wikitext. | ||
==Checklist== | |||
*Defined as Wikitable | |||
*Scope defined | |||
*Row defined | |||
*Remove color | |||
==Color== | ==Color== | ||
*To solve contrast color of a table and the black and blue text, use [https://www.w3schools.com/colors/colors_picker.asp Color picker] at W3schools | *To solve contrast color of a table and the black and blue text, use [https://www.w3schools.com/colors/colors_picker.asp Color picker] at W3schools | ||
*Typically, the color must be at least 90% | *Typically, the color must be at least 90% | ||
*Known colors that pass [https://www.w3.org/TR/WCAG21/ WCAG 2.1 AA guidelines] | *Known colors that pass [https://www.w3.org/TR/WCAG21/ WCAG 2.1 AA guidelines] can be found below and on [[FamilySearch Wiki:WCAG Acceptable Table Colors|WCAG Acceptable Table Colors]] Wiki page. | ||
** | **Light pink: #FEE8E8 | ||
**Light lavender: #FCE6FE | |||
**Light violet: #F3ECFE | |||
**Light Cyan: #DBFBFD | |||
**Light blue: #E6F0FE | |||
**Light magenta: #F1EBF1 | |||
**Light peach: #FCECCC | |||
**Light green: #E2FCE0 | |||
== Creating New Tables == | == Creating New Tables == | ||
| Line 132: | Line 145: | ||
* '''Replace with:''' <span style="background:#E9EEF6> \1\n| </span> | * '''Replace with:''' <span style="background:#E9EEF6> \1\n| </span> | ||
* '''Action:''' Click '''Replace All'''. | * '''Action:''' Click '''Replace All'''. | ||
== Updating Existing Tables == | |||
These instructions use Notepad++'s "Replace" function with "Regular expression" search mode. There are two steps to reformat the header row and one step for the data rows. Make sure your cursor is at the beginning of the file before starting this process, or make sure the "Wrap Around" checkbox in the '''Replace''' window is checked. | |||
To edit the table in Notepad++ first copy the existing table from the FSRW using '''Edit Source''', use your cursor to highlight the table, press '''Ctrl+C''' to copy it, then create a new file in Notepad++ '''(CTRL+N)''' and paste the table '''(Ctrl+V)''' into the new file. | |||
=== Reformatting the Header Row === | |||
Perform these two steps in order: | |||
;Step 1: Change the first "!!" to "|" | |||
* '''Purpose:''' To correctly format the first header element. | |||
* '''Open Replace Dialog:''' Press Ctrl + H. | |||
* '''Search Mode:''' Select Regular expression. | |||
* '''Find what:''' <span style="background:#E9EEF6> ^! (.*?) !! </span> | |||
* '''Replace with:''' <span style="background:#E9EEF6> ! scope="col" | \1\n! scope="col" | </span> | |||
* '''Action:''' Click '''Replace All'''. | |||
;Step 2: Break up the remaining "!!" and add "! scope="col" |" | |||
* '''Purpose:''' To format the subsequent header elements onto new lines. | |||
* '''Open Replace Dialog:''' (If not already open) Press Ctrl + H. | |||
* '''Search Mode:''' Ensure Regular expression is still selected. | |||
* '''Find what:''' <span style="background:#E9EEF6> !! </span> | |||
* '''Replace with:''' <span style="background:#E9EEF6> \n! scope="col" | </span> | |||
* '''Action:''' Click '''Replace All'''. | |||
=== Reformatting Data Rows === | |||
This is a single step: | |||
* '''Purpose:''' Change each data row to add prefix text "! scope="row"", and the FSHI template with alternate text to the DGS number in the first column. | |||
*'''Open Replace Dialog:''' Press Ctrl + H. | |||
*'''Search Mode:''' Select Regular expression. | |||
*'''Find what:''' <span style="background:#E9EEF6>^\| (\d+) \|\|(.*)$ </span> | |||
* '''Replace with:''' <span style="background:#E9EEF6> ! scope="row" | <nowiki>{{FSHI|DGS=\1|alt=\1}}</nowiki>\n|\2 </span> | |||
*'''Action:''' Click '''Replace All'''. | |||
==Simple Table Design== | ==Simple Table Design== | ||
edits