Cross browser semibold

ci/release/changelogs/next.md

@@ -7,3 +7,4 @@
 #### Bugfixes ⛑️
 
 - Fixes grid layouts not applying on objects with a constant near [#1173](https://github.com/terrastruct/d2/issues/1173)
+- Fixes markdown header rendering in firefox and safari [#1177](https://github.com/terrastruct/d2/issues/1177)

d2cli/main.go

@@ -100,6 +100,7 @@ func Run(ctx context.Context, ms *xmain.State) (err error) {
 	fontRegularFlag := ms.Opts.String("D2_FONT_REGULAR", "font-regular", "", "", "path to .ttf file to use for the regular font. If none provided, Source Sans Pro Regular is used.")
 	fontItalicFlag := ms.Opts.String("D2_FONT_ITALIC", "font-italic", "", "", "path to .ttf file to use for the italic font. If none provided, Source Sans Pro Regular-Italic is used.")
 	fontBoldFlag := ms.Opts.String("D2_FONT_BOLD", "font-bold", "", "", "path to .ttf file to use for the bold font. If none provided, Source Sans Pro Bold is used.")
+	fontSemiboldFlag := ms.Opts.String("D2_FONT_SEMIBOLD", "font-semibold", "", "", "path to .ttf file to use for the semibold font. If none provided, Source Sans Pro Semibold is used.")
 
 	ps, err := d2plugin.ListPlugins(ctx)
 	if err != nil {
@@ -120,7 +121,7 @@ func Run(ctx context.Context, ms *xmain.State) (err error) {
 		return nil
 	}
 
-	fontFamily, err := loadFonts(ms, *fontRegularFlag, *fontItalicFlag, *fontBoldFlag)
+	fontFamily, err := loadFonts(ms, *fontRegularFlag, *fontItalicFlag, *fontBoldFlag, *fontSemiboldFlag)
 	if err != nil {
 		return xmain.UsageErrorf("failed to load specified fonts: %v", err)
 	}
@@ -883,14 +884,15 @@ func loadFont(ms *xmain.State, path string) ([]byte, error) {
 	return ttf, nil
 }
 
-func loadFonts(ms *xmain.State, pathToRegular, pathToItalic, pathToBold string) (*d2fonts.FontFamily, error) {
-	if pathToRegular == "" && pathToItalic == "" && pathToBold == "" {
+func loadFonts(ms *xmain.State, pathToRegular, pathToItalic, pathToBold, pathToSemibold string) (*d2fonts.FontFamily, error) {
+	if pathToRegular == "" && pathToItalic == "" && pathToBold == "" && pathToSemibold == "" {
 		return nil, nil
 	}
 
 	var regularTTF []byte
 	var italicTTF []byte
 	var boldTTF []byte
+	var semiboldTTF []byte
 
 	var err error
 	if pathToRegular != "" {
@@ -911,6 +913,12 @@ func loadFonts(ms *xmain.State, pathToRegular, pathToItalic, pathToBold string)
 			return nil, err
 		}
 	}
+	if pathToSemibold != "" {
+		semiboldTTF, err = loadFont(ms, pathToSemibold)
+		if err != nil {
+			return nil, err
+		}
+	}
 
-	return d2fonts.AddFontFamily("custom", regularTTF, italicTTF, boldTTF)
+	return d2fonts.AddFontFamily("custom", regularTTF, italicTTF, boldTTF, semiboldTTF)
 }

d2renderers/d2fonts/d2fonts.go

@@ -64,9 +64,10 @@ const (
 	FONT_SIZE_XXL  = 28
 	FONT_SIZE_XXXL = 32
 
-	FONT_STYLE_REGULAR FontStyle = "regular"
-	FONT_STYLE_BOLD    FontStyle = "bold"
-	FONT_STYLE_ITALIC  FontStyle = "italic"
+	FONT_STYLE_REGULAR  FontStyle = "regular"
+	FONT_STYLE_BOLD     FontStyle = "bold"
+	FONT_STYLE_SEMIBOLD FontStyle = "semibold"
+	FONT_STYLE_ITALIC   FontStyle = "italic"
 
 	SourceSansPro FontFamily = "SourceSansPro"
 	SourceCodePro FontFamily = "SourceCodePro"
@@ -86,6 +87,7 @@ var FontSizes = []int{
 var FontStyles = []FontStyle{
 	FONT_STYLE_REGULAR,
 	FONT_STYLE_BOLD,
+	FONT_STYLE_SEMIBOLD,
 	FONT_STYLE_ITALIC,
 }
 
@@ -101,6 +103,9 @@ var sourceSansProRegularBase64 string
 //go:embed encoded/SourceSansPro-Bold.txt
 var sourceSansProBoldBase64 string
 
+//go:embed encoded/SourceSansPro-Semibold.txt
+var sourceSansProSemiboldBase64 string
+
 //go:embed encoded/SourceSansPro-Italic.txt
 var sourceSansProItalicBase64 string
 
@@ -110,6 +115,9 @@ var sourceCodeProRegularBase64 string
 //go:embed encoded/SourceCodePro-Bold.txt
 var sourceCodeProBoldBase64 string
 
+//go:embed encoded/SourceCodePro-Semibold.txt
+var sourceCodeProSemiboldBase64 string
+
 //go:embed encoded/SourceCodePro-Italic.txt
 var sourceCodeProItalicBase64 string
 
@@ -135,6 +143,10 @@ func init() {
 			Family: SourceSansPro,
 			Style:  FONT_STYLE_BOLD,
 		}: sourceSansProBoldBase64,
+		{
+			Family: SourceSansPro,
+			Style:  FONT_STYLE_SEMIBOLD,
+		}: sourceSansProSemiboldBase64,
 		{
 			Family: SourceSansPro,
 			Style:  FONT_STYLE_ITALIC,
@@ -147,6 +159,10 @@ func init() {
 			Family: SourceCodePro,
 			Style:  FONT_STYLE_BOLD,
 		}: sourceCodeProBoldBase64,
+		{
+			Family: SourceCodePro,
+			Style:  FONT_STYLE_SEMIBOLD,
+		}: sourceCodeProSemiboldBase64,
 		{
 			Family: SourceCodePro,
 			Style:  FONT_STYLE_ITALIC,
@@ -164,6 +180,11 @@ func init() {
 			Family: HandDrawn,
 			Style:  FONT_STYLE_BOLD,
 		}: fuzzyBubblesBoldBase64,
+		{
+			Family: HandDrawn,
+			Style:  FONT_STYLE_SEMIBOLD,
+			// This font has no semibold, so just reuse bold
+		}: fuzzyBubblesBoldBase64,
 	}
 
 	for k, v := range FontEncodings {
@@ -195,6 +216,14 @@ func init() {
 		Family: SourceCodePro,
 		Style:  FONT_STYLE_BOLD,
 	}] = b
+	b, err = fontFacesFS.ReadFile("ttf/SourceCodePro-Semibold.ttf")
+	if err != nil {
+		panic(err)
+	}
+	FontFaces[Font{
+		Family: SourceCodePro,
+		Style:  FONT_STYLE_SEMIBOLD,
+	}] = b
 	b, err = fontFacesFS.ReadFile("ttf/SourceCodePro-Italic.ttf")
 	if err != nil {
 		panic(err)
@@ -211,6 +240,14 @@ func init() {
 		Family: SourceSansPro,
 		Style:  FONT_STYLE_BOLD,
 	}] = b
+	b, err = fontFacesFS.ReadFile("ttf/SourceSansPro-Semibold.ttf")
+	if err != nil {
+		panic(err)
+	}
+	FontFaces[Font{
+		Family: SourceSansPro,
+		Style:  FONT_STYLE_SEMIBOLD,
+	}] = b
 	b, err = fontFacesFS.ReadFile("ttf/SourceSansPro-Italic.ttf")
 	if err != nil {
 		panic(err)
@@ -239,6 +276,10 @@ func init() {
 		Family: HandDrawn,
 		Style:  FONT_STYLE_BOLD,
 	}] = b
+	FontFaces[Font{
+		Family: HandDrawn,
+		Style:  FONT_STYLE_SEMIBOLD,
+	}] = b
 }
 
 var D2_FONT_TO_FAMILY = map[string]FontFamily{
@@ -259,7 +300,7 @@ func AddFontStyle(font Font, style FontStyle, ttf []byte) error {
 	return nil
 }
 
-func AddFontFamily(name string, regularTTF, italicTTF, boldTTF []byte) (*FontFamily, error) {
+func AddFontFamily(name string, regularTTF, italicTTF, boldTTF, semiboldTTF []byte) (*FontFamily, error) {
 	customFontFamily := FontFamily(name)
 
 	regularFont := Font{
@@ -316,6 +357,24 @@ func AddFontFamily(name string, regularTTF, italicTTF, boldTTF []byte) (*FontFam
 		FontEncodings[boldFont] = FontEncodings[fallbackFont]
 	}
 
+	semiboldFont := Font{
+		Family: customFontFamily,
+		Style:  FONT_STYLE_SEMIBOLD,
+	}
+	if semiboldTTF != nil {
+		err := AddFontStyle(semiboldFont, FONT_STYLE_SEMIBOLD, semiboldTTF)
+		if err != nil {
+			return nil, err
+		}
+	} else {
+		fallbackFont := Font{
+			Family: SourceSansPro,
+			Style:  FONT_STYLE_SEMIBOLD,
+		}
+		FontFaces[semiboldFont] = FontFaces[fallbackFont]
+		FontEncodings[semiboldFont] = FontEncodings[fallbackFont]
+	}
+
 	FontFamilies = append(FontFamilies, customFontFamily)
 
 	return &customFontFamily, nil

d2renderers/d2svg/d2svg.go

@@ -1434,6 +1434,20 @@ func EmbedFonts(buf *bytes.Buffer, diagramHash, source string, fontFamily *d2fon
 		),
 	)
 
+	appendOnTrigger(
+		buf,
+		source,
+		[]string{`class="md"`},
+		fmt.Sprintf(`
+@font-face {
+	font-family: %s-font-semibold;
+	src: url("%s");
+}`,
+			diagramHash,
+			fontFamily.Font(0, d2fonts.FONT_STYLE_SEMIBOLD).GetEncodedSubset(corpus),
+		),
+	)
+
 	appendOnTrigger(
 		buf,
 		source,
@@ -1769,6 +1783,7 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 			css = strings.ReplaceAll(css, "font-bold", fmt.Sprintf("%s-font-bold", diagramHash))
 			css = strings.ReplaceAll(css, "font-mono", fmt.Sprintf("%s-font-mono", diagramHash))
 			css = strings.ReplaceAll(css, "font-regular", fmt.Sprintf("%s-font-regular", diagramHash))
+			css = strings.ReplaceAll(css, "font-semibold", fmt.Sprintf("%s-font-semibold", diagramHash))
 			fmt.Fprintf(upperBuf, `<style type="text/css">%s</style>`, css)
 		}
 

d2renderers/d2svg/github-markdown.css

@@ -70,7 +70,6 @@
 
 .md h1 {
   margin: 0.67em 0;
-  font-weight: 600;
   padding-bottom: 0.3em;
   font-size: 2em;
   border-bottom: 1px solid var(--color-border-muted);
@@ -240,35 +239,30 @@
 .md h6 {
   margin-top: 24px;
   margin-bottom: 16px;
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.25;
-  font-family: "font-regular";
+  font-family: "font-semibold";
 }
 
 .md h2 {
-  font-weight: 600;
   padding-bottom: 0.3em;
   font-size: 1.5em;
   border-bottom: 1px solid var(--color-border-muted);
 }
 
 .md h3 {
-  font-weight: 600;
   font-size: 1.25em;
 }
 
 .md h4 {
-  font-weight: 600;
   font-size: 1em;
 }
 
 .md h5 {
-  font-weight: 600;
   font-size: 0.875em;
 }
 
 .md h6 {
-  font-weight: 600;
   font-size: 0.85em;
   color: var(--color-fg-muted);
 }
@@ -465,7 +459,7 @@
   margin-top: 16px;
   font-size: 1em;
   font-style: italic;
-  font-weight: 600;
+  font-family: "font-semibold";
 }
 
 .md dl dd {
@@ -474,7 +468,7 @@
 }
 
 .md table th {
-  font-weight: 600;
+  font-family: "font-semibold";
 }
 
 .md table th,
@@ -677,7 +671,7 @@
 }
 
 .md .csv-data th {
-  font-weight: 600;
+  font-family: "font-semibold";
   background: var(--color-canvas-subtle);
   border-top: 0;
 }

e2etests/regression_test.go

@@ -668,6 +668,19 @@ x: {
 	y
 	z
 }
+`,
+		},
+		{
+			name: "md_font_weight",
+			script: `
+explanation: |md
+# I can do headers
+
+- lists
+- lists
+
+And other normal markdown stuff
+|
 `,
 		},
 	}