diff --git a/app/controllers/help_controller.rb b/app/controllers/help_controller.rb
index 5fc0b0a28c1..ea7cb26eec7 100644
--- a/app/controllers/help_controller.rb
+++ b/app/controllers/help_controller.rb
@@ -17,6 +17,9 @@ class HelpController < ApplicationController
skins_basics
skins_creating
skins_parents
+ skins_wizard_font_size
+ skins_wizard_font
+ skins_wizard_vertical_gap
symbols_key
tags_additional
tags_categories
diff --git a/app/views/help/skins_wizard_font.html.erb b/app/views/help/skins_wizard_font.html.erb
new file mode 100644
index 00000000000..2dd0f17d0b8
--- /dev/null
+++ b/app/views/help/skins_wizard_font.html.erb
@@ -0,0 +1,3 @@
+
<%= t(".default_html", default_fonts: tag.code(t(".default_fonts"))) %>
+<%= t(".description") %>
+<%= t(".single_or_double_quotes_html", double_quote_example: tag.kbd('"Lucida Grande"'), single_quote_example: tag.kbd("'Lucide Sans Unicode'")) %>
diff --git a/app/views/help/skins_wizard_font_size.html.erb b/app/views/help/skins_wizard_font_size.html.erb
new file mode 100644
index 00000000000..0b9481a1f85
--- /dev/null
+++ b/app/views/help/skins_wizard_font_size.html.erb
@@ -0,0 +1,2 @@
+<%= t(".default_html", one_hundred_percent: tag.code(t(".one_hundred_percent"))) %>
+<%= t(".description_html", one_hundred_typed: tag.kbd("100")) %>
diff --git a/app/views/help/skins_wizard_vertical_gap.html.erb b/app/views/help/skins_wizard_vertical_gap.html.erb
new file mode 100644
index 00000000000..e76f74df0ae
--- /dev/null
+++ b/app/views/help/skins_wizard_vertical_gap.html.erb
@@ -0,0 +1,3 @@
+<%= t(".default_html", default_value: tag.code(t(".default_value"))) %>
+<%= t(".description") %>
+<%= t(".examples_html", typed_two: tag.kbd("5"), typed_zero_point_five: tag.kbd("0.5")) %>
diff --git a/app/views/skins/_wizard_form.html.erb b/app/views/skins/_wizard_form.html.erb
index 4e768b65ece..abcc5e0da1b 100644
--- a/app/views/skins/_wizard_form.html.erb
+++ b/app/views/skins/_wizard_form.html.erb
@@ -19,7 +19,7 @@
-
<%= f.label :font, ts('Font') %>
- <%= link_to_help('skins-wizard-font') %>
+ <%= link_to_help_modal(help_skins_wizard_font_path, t(".font_help_title")) %>
-
<%= f.text_field :font, "aria-describedby" => "font-field-notes" %>
@@ -30,7 +30,7 @@
-
<%= f.label :base_em, ts('Percent of browser font size') %>
- <%= link_to_help('skins-wizard-font-size') %>
+ <%= link_to_help_modal(help_skins_wizard_font_size_path, t(".font_size_help_title")) %>
-
<%= f.text_field :base_em, "aria-describedby" => "base-em-field-notes" %>
@@ -51,7 +51,7 @@
-
<%= f.label :paragraph_margin, ts('Vertical gap between paragraphs') %>
- <%= link_to_help('skins-wizard-vertical-gap') %>
+ <%= link_to_help_modal(help_skins_wizard_vertical_gap_path, t(".vertical_gap_help_title")) %>
-
<%= f.text_field :paragraph_margin %>
diff --git a/config/locales/views/en.yml b/config/locales/views/en.yml
index 03b5b0cf4cb..9f90a93d02a 100644
--- a/config/locales/views/en.yml
+++ b/config/locales/views/en.yml
@@ -1607,6 +1607,20 @@ en:
load_archive_skin_components: If you create a replacement skin, you might want to load up all the skins that make up the current default Archive site as parents. This option is only available when you select "replace archive skin entirely" from the "What it does" menu. After that, you can edit your skin and delete just the ones you don't want. This will be easier if you are using nearly all of them, since there are a lot!
load_archive_skin_components_header: Load Archive Skin Components
skins_interface_faq: the Skins and Interface FAQ
+ skins_wizard_font:
+ default_fonts: "'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, sans-serif, 'GNU Unifont'"
+ default_html: 'The default is: %{default_fonts}'
+ description: Put any font name in here, and if it's installed on your computer, it'll work for you. If you use several different devices, specify some fall-back fonts, with commas in between the names, in case one of your devices doesn't have the first font.
+ single_or_double_quotes_html: You can use either single or double quotation marks around fonts with multi-word names, e.g. %{single_quote_example} or %{double_quote_example}.
+ skins_wizard_font_size:
+ default_html: 'The default is: %{one_hundred_percent}'
+ description_html: Font sizes on the Archive are based on a percentage of your browser's default font size. Use a number smaller than 100 to make the Archive's text smaller, or use a number larger than 100 to make the text larger. Entering %{one_hundred_typed} will keep the Archive's default font sizes.
+ one_hundred_percent: 100%
+ skins_wizard_vertical_gap:
+ default_html: 'The default is: %{default_value}'
+ default_value: 1.1286em
+ description: Put any number in here and it will be applied as a multiple of the work's font size. A larger number will give you bigger spacing between paragraphs.
+ examples_html: For example, most users see works at a font size of 15 pixels. Entering %{typed_two} will create a vertical gap of 30 pixels, and entering %{typed_zero_point_five} will create a gap of about 8 pixels.
symbols_key:
categories:
alt: Second Square
@@ -2942,8 +2956,11 @@ en:
revert_to_default: Revert to Default Skin
wizard_form:
description: Description
- skins_parents_help_title: Skins parents
+ font_help_title: Fonts
+ font_size_help_title: Font Sizes
+ skins_parents_help_title: Skins Parents
title: Title
+ vertical_gap_help_title: Vertical Gaps
stats:
index:
flat_view: Flat View
diff --git a/config/routes.rb b/config/routes.rb
index 0d145b1826c..85531a532e0 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -675,6 +675,9 @@
get "/help/skins-basics.html", to: redirect("/help/skins_basics")
get "/help/skins-creating.html", to: redirect("/help/skins_creating")
get "/help/skins-parents.html", to: redirect("/help/skins_parents")
+ get "/help/skins-wizard-font-size.html", to: redirect("/help/skins_wizard_font_size")
+ get "/help/skins-wizard-font.html", to: redirect("/help/skins_wizard_font")
+ get "/help/skins-wizard-vertical-gap.html", to: redirect("/help/skins_wizard_vertical_gap")
get "/help/symbols-key.html", to: redirect("/help/symbols_key")
get "/help/additional-tags-help.html", to: redirect("/help/tags_additional")
get "/help/categories-help.html", to: redirect("/help/tags_categories")
diff --git a/public/help/skins-wizard-font-size.html b/public/help/skins-wizard-font-size.html
deleted file mode 100644
index 895c3ed39f5..00000000000
--- a/public/help/skins-wizard-font-size.html
+++ /dev/null
@@ -1,2 +0,0 @@
-
The default is: 100%
-Font sizes on the Archive are based on a percentage of your browser's default font size. Use a number smaller than 100 to make the Archive's text smaller, or use a number larger than 100 to make the text larger. Entering 100 will keep the Archive's default font sizes.
diff --git a/public/help/skins-wizard-font.html b/public/help/skins-wizard-font.html
deleted file mode 100644
index 03290e3ed20..00000000000
--- a/public/help/skins-wizard-font.html
+++ /dev/null
@@ -1,3 +0,0 @@
-The default is: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, sans-serif, 'GNU Unifont'
-Put any font name in here, and if it's installed on your computer, it'll work for you. If you use several different devices, specify some fall-back fonts, with commas in between the names, in case one of your devices doesn't have the first font.
-You can use either single or double quotation marks around fonts with multi-word names, e.g. "Lucida Grande" or 'Lucide Sans Unicode'.
diff --git a/public/help/skins-wizard-vertical-gap.html b/public/help/skins-wizard-vertical-gap.html
deleted file mode 100644
index a496fb8f690..00000000000
--- a/public/help/skins-wizard-vertical-gap.html
+++ /dev/null
@@ -1,3 +0,0 @@
-The default is: 1.1286em
-Put any number in here and it will be applied as a multiple of the work's font size. A larger number will give you bigger spacing between paragraphs.
-For example, most users see works at a font size of 15 pixels. Entering 2 will create a vertical gap of 30 pixels, and entering 0.5 will create a gap of about 8 pixels.