fixed phonetics formatting and designs for original docs and metadata printing

Author: nguyen-katie

website/src/pages/documents/document-info.css.ts

@@ -119,7 +119,7 @@ export const label = style({
       fontFamily: `"Quattrocento", serif`,
       fontStyle: "normal",
       fontWeight: 700,
-      fontSize: "20px",
+      fontSize: "19px",
       lineHeight: 1.2,
     },
   },

website/src/pages/documents/document.css.ts

@@ -418,6 +418,31 @@ export const printBodyContent = style({
   },
 })
 
+export const printPronunciationMode = style({})
+
+globalStyle(
+  `.${printBodyContent}.${printPronunciationMode} .${annotationSection.story}`,
+  {
+    "@media": {
+      [mediaQueries.print]: {
+        gridTemplateColumns: "repeat(3, 188px)",
+        columnGap: vspace.half,
+      },
+    },
+  }
+)
+
+globalStyle(
+  `.${printBodyContent}.${printPronunciationMode} .${wordGroupInline} div`,
+  {
+    "@media": {
+      [mediaQueries.print]: {
+        width: "188px",
+      },
+    },
+  }
+)
+
 export const printHideParagraphTranslation = style({
   "@media": {
     [mediaQueries.print]: { display: "block" },
@@ -510,14 +535,3 @@ globalStyle(
     },
   }
 )
-
-globalStyle(
-  `.${printBodyContent} .${wordGroup}:last-child, .${printBodyContent} .${wordGroupInline}:last-child`,
-  {
-    "@media": {
-      [mediaQueries.print]: {
-        breakAfter: "auto",
-      },
-    },
-  }
-)

website/src/pages/documents/document.page.tsx

@@ -240,11 +240,15 @@ export const TabSet = ({
             <span className={css.printSectionHeadingRule} />
           </h2>
           <div
-            className={
-              levelOfDetail >= LevelOfDetail.Segmentation
-                ? `${css.printBodyContent} ${css.printHideParagraphTranslation}`
-                : css.printBodyContent
-            }
+            className={[
+              css.printBodyContent,
+              levelOfDetail >= LevelOfDetail.Pronunciation &&
+                css.printHideParagraphTranslation,
+              levelOfDetail === LevelOfDetail.Pronunciation &&
+                css.printPronunciationMode,
+            ]
+              .filter(Boolean)
+              .join(" ")}
           >
             <EditWordCheckProvider>
               <FormProvider>
@@ -276,7 +280,7 @@ export const TabSet = ({
                   <span className={css.printSectionHeadingRule} />
                 </h2>
                 <div className={css.printImageSource}>
-                  Image Source: {doc.sources[0]?.name ?? "Source unknown"}
+                  Image Source: {page.image!.url}
                 </div>
                 <img
                   className={pageImageCss.pageImage}

website/src/pages/documents/print-document.css.ts

@@ -124,9 +124,9 @@ export const printLegendBox = style({
     [mediaQueries.print]: {
       display: "block",
       textAlign: "left",
-      marginTop: vspace.one,
-      paddingTop: "0.794rem",
-      paddingBottom: vspace.half,
+      marginTop: vspace.quarter,
+      paddingTop: vspace.quarter,
+      paddingBottom: vspace.quarter,
       borderRadius: "15px",
       backgroundColor: "#f0f0f0d1",
       border: "1px solid #000",

website/src/pages/documents/print-document.tsx

@@ -118,7 +118,6 @@ export const PrintLayout = (p: {
           }
         `}
         </style>
-        <style>{`div { border: 1px solid black; }`}</style>
       </Helmet>
       <div className={css.printHeader}>
         <div className={css.printHeading}>