{"id":22577,"date":"2025-12-14T10:01:35","date_gmt":"2025-12-14T07:01:35","guid":{"rendered":"https:\/\/jewelsbygalla.com\/eg\/?page_id=22577"},"modified":"2026-01-21T17:52:57","modified_gmt":"2026-01-21T14:52:57","slug":"size-guide","status":"publish","type":"page","link":"https:\/\/jewelsbygalla.com\/eg\/en\/size-guide\/","title":{"rendered":"Size Guide"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"22577\" class=\"elementor elementor-22577\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"e-con-top elementor-element elementor-element-1a100d9 e-flex e-con-boxed e-con e-parent\" data-id=\"1a100d9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d9a4040 elementor-widget elementor-widget-html\" data-id=\"d9a4040\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<html>\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n    <title>Ring Size Calibrator<\/title>\r\n  <\/head>\r\n  <body>\r\n    <div class=\"calibration-wrap\">\r\n      <h3>Screen calibration<\/h3>\r\n      <p class=\"muted\">\r\n        Place a real bank card on the screen. Adjust the slider until the black\r\n        rectangle matches the card width. (Standard card width = <b>85.60mm<\/b>)\r\n      <\/p>\r\n\r\n      <div class=\"calibration-row\">\r\n        <div class=\"card-guide\">\r\n          <div id=\"cardBox\" class=\"card-box\"><\/div>\r\n          <div class=\"card-label\">\r\n            Target: 85.60mm card width\r\n            <span id=\"pxInfo\" class=\"px-info\"><\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"controls\">\r\n          <label>\r\n            Adjust card width:\r\n            <input\r\n              id=\"calSlider\"\r\n              type=\"range\"\r\n              min=\"200\"\r\n              max=\"600\"\r\n              value=\"340\"\r\n            \/>\r\n          <\/label>\r\n\r\n          <button id=\"saveBtn\" type=\"button\">Save calibration<\/button>\r\n          <button id=\"resetBtn\" type=\"button\" class=\"ghost\">Reset<\/button>\r\n\r\n          <p class=\"muted small\">\r\n            Tip: Keep browser zoom at 100% for best results. If you zoom later,\r\n            you\u2019ll need to calibrate again.\r\n          <\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <hr \/>\r\n\r\n    <div class=\"rings-wrap\">\r\n      <div class=\"rings-header\">\r\n        <h3>Ring sizes (EU 44\u201360)<\/h3>\r\n        <div class=\"status\">\r\n          Calibration: <span id=\"calStatus\">Not saved<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"rings-scroll\">\r\n        <svg\r\n          id=\"ringsSvg\"\r\n          class=\"rings-svg\"\r\n          aria-label=\"Ring size circles\"\r\n        ><\/svg>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n      \/\/ --- Ring diameters in mm (from your table) ---\r\n      const RINGS = [\r\n        { size: 44, mm: 14.0 },\r\n        { size: 45, mm: 14.3 },\r\n        { size: 46, mm: 14.6 },\r\n        { size: 47, mm: 15.0 },\r\n        { size: 48, mm: 15.3 },\r\n        { size: 49, mm: 15.6 },\r\n        { size: 50, mm: 15.9 },\r\n        { size: 51, mm: 16.2 },\r\n        { size: 52, mm: 16.6 },\r\n        { size: 53, mm: 16.9 },\r\n        { size: 54, mm: 17.2 },\r\n        { size: 55, mm: 17.5 },\r\n        { size: 56, mm: 17.8 },\r\n        { size: 57, mm: 18.1 },\r\n        { size: 58, mm: 18.5 },\r\n        { size: 59, mm: 18.8 },\r\n        { size: 60, mm: 19.1 },\r\n      ];\r\n\r\n      const CARD_MM = 85.6; \/\/ standard credit\/debit card width in mm\r\n      const STORAGE_KEY = 'pxPerMmCalibration_v1';\r\n\r\n      const cardBox = document.getElementById('cardBox');\r\n      const slider = document.getElementById('calSlider');\r\n      const saveBtn = document.getElementById('saveBtn');\r\n      const resetBtn = document.getElementById('resetBtn');\r\n      const pxInfo = document.getElementById('pxInfo');\r\n      const ringsSvg = document.getElementById('ringsSvg');\r\n      const calStatus = document.getElementById('calStatus');\r\n\r\n      \/\/ Apply slider to calibration rectangle\r\n      function updateCardBox() {\r\n        const px = Number(slider.value);\r\n        cardBox.style.width = px + 'px';\r\n        cardBox.style.height = (px * (53.98 \/ 85.6)).toFixed(2) + 'px'; \/\/ keep card aspect ratio\r\n        pxInfo.textContent = `(${px}px wide)`;\r\n      }\r\n\r\n      \/\/ Compute px\/mm from current calibration\r\n      function getPxPerMmFromSlider() {\r\n        const cardWidthPx = Number(slider.value);\r\n        return cardWidthPx \/ CARD_MM; \/\/ px per mm\r\n      }\r\n\r\n      function loadCalibration() {\r\n        const saved = localStorage.getItem(STORAGE_KEY);\r\n        if (!saved) return null;\r\n\r\n        const obj = JSON.parse(saved);\r\n        if (!obj || typeof obj.pxPerMm !== 'number') return null;\r\n        return obj;\r\n      }\r\n\r\n      function saveCalibration() {\r\n        const pxPerMm = getPxPerMmFromSlider();\r\n        const data = {\r\n          pxPerMm,\r\n          savedAt: Date.now(),\r\n          devicePixelRatio: window.devicePixelRatio,\r\n        };\r\n        localStorage.setItem(STORAGE_KEY, JSON.stringify(data));\r\n        renderRings();\r\n      }\r\n\r\n      function resetCalibration() {\r\n        localStorage.removeItem(STORAGE_KEY);\r\n        renderRings();\r\n      }\r\n\r\n      \/\/ Render ring circles using SVG in true mm (converted via calibrated pxPerMm)\r\n      function renderRings() {\r\n        ringsSvg.innerHTML = '';\r\n\r\n        const cal = loadCalibration();\r\n\r\n        if (!cal) {\r\n          calStatus.textContent = 'Not saved';\r\n          calStatus.className = 'bad';\r\n          ringsSvg.innerHTML = `<text x=\"0\" y=\"18\" font-size=\"14\">\r\n        Please calibrate first to get accurate physical sizes.\r\n      <\/text>`;\r\n          ringsSvg.setAttribute('width', '100%');\r\n          ringsSvg.setAttribute('height', '40');\r\n          return;\r\n        }\r\n\r\n        \/\/ If zoom\/DPI changed, your old calibration is likely wrong.\r\n        \/\/ We can warn (and still render).\r\n        const dprChanged = cal.devicePixelRatio !== window.devicePixelRatio;\r\n        calStatus.textContent = dprChanged\r\n          ? 'Saved (but zoom\/DPI changed \u2014 recalibrate)'\r\n          : 'Saved';\r\n        calStatus.className = dprChanged ? 'warn' : 'good';\r\n\r\n        const pxPerMm = cal.pxPerMm;\r\n\r\n        \/\/ layout\r\n        const gap = 14; \/\/ px between circles\r\n        const stroke = 6; \/\/ thicker ring border\r\n        const labelGap = 10;\r\n        const topPad = 10;\r\n\r\n        \/\/ convert diameters to px\r\n        const items = RINGS.map((r) => ({\r\n          ...r,\r\n          px: r.mm * pxPerMm,\r\n        }));\r\n\r\n        const maxDiameter = Math.max(...items.map((i) => i.px));\r\n        const height = Math.ceil(topPad + maxDiameter + 30); \/\/ room for label\r\n        let x = 0;\r\n\r\n        \/\/ total width\r\n        const totalWidth = items.reduce((sum, i, idx) => {\r\n          return sum + i.px + (idx === items.length - 1 ? 0 : gap);\r\n        }, 0);\r\n\r\n        \/\/ Keep a fixed internal coordinate system (viewBox) for accuracy,\r\n        \/\/ but let CSS control display size (responsive).\r\n        ringsSvg.removeAttribute('width');\r\n        ringsSvg.setAttribute('height', height);\r\n        ringsSvg.setAttribute(\r\n          'viewBox',\r\n          `0 0 ${Math.ceil(totalWidth)} ${height}`,\r\n        );\r\n\r\n        \/\/ draw\r\n        items.forEach((item, idx) => {\r\n          const d = item.px;\r\n          const r = d \/ 2;\r\n\r\n          const cy = topPad + maxDiameter \/ 2;\r\n          const cx = x + r;\r\n\r\n          \/\/ circle\r\n          const c = document.createElementNS(\r\n            'http:\/\/www.w3.org\/2000\/svg',\r\n            'circle',\r\n          );\r\n          c.setAttribute('cx', cx);\r\n          c.setAttribute('cy', cy);\r\n          c.setAttribute('r', Math.max(0, r - stroke \/ 2));\r\n          c.setAttribute('fill', 'none');\r\n          c.setAttribute('stroke', '#000');\r\n          c.setAttribute('stroke-width', stroke);\r\n          c.setAttribute('stroke-linecap', 'round');\r\n          c.setAttribute('stroke-linejoin', 'round');\r\n          ringsSvg.appendChild(c);\r\n\r\n          \/\/ label\r\n          const t = document.createElementNS(\r\n            'http:\/\/www.w3.org\/2000\/svg',\r\n            'text',\r\n          );\r\n          t.setAttribute('x', cx);\r\n          t.setAttribute('y', cy + r + labelGap + 12);\r\n          t.setAttribute('text-anchor', 'middle');\r\n          t.setAttribute('font-size', '11');\r\n          t.innerHTML = `\r\n            <tspan x=\"${cx}\" dy=\"0\">EU ${item.size}<\/tspan>\r\n            <tspan x=\"${cx}\" dy=\"14\">(${item.mm}mm)<\/tspan>\r\n          `;\r\n          ringsSvg.appendChild(t);\r\n\r\n          x += d + gap;\r\n        });\r\n      }\r\n\r\n      \/\/ --- Events ---\r\n      slider.addEventListener('input', updateCardBox);\r\n      saveBtn.addEventListener('click', () => {\r\n        saveCalibration();\r\n      });\r\n      resetBtn.addEventListener('click', () => {\r\n        resetCalibration();\r\n      });\r\n\r\n      \/\/ If window size changes or DPR changes (zoom often changes DPR), re-render.\r\n      window.addEventListener('resize', renderRings);\r\n\r\n      \/\/ init\r\n      updateCardBox();\r\n\r\n      \/\/ If we have saved calibration, we can *optionally* pre-set slider\r\n      \/\/ based on pxPerMm * CARD_MM. This keeps UI consistent.\r\n      const cal = loadCalibration();\r\n      if (cal) {\r\n        const suggestedPx = Math.round(cal.pxPerMm * CARD_MM);\r\n        slider.value = Math.min(\r\n          Math.max(suggestedPx, Number(slider.min)),\r\n          Number(slider.max),\r\n        );\r\n        updateCardBox();\r\n      }\r\n      renderRings();\r\n    <\/script>\r\n\r\n    <style>\r\n      \/* limit width on desktop, center everything *\/\r\n.calibration-wrap,\r\n.rings-wrap {\r\n  font-family: Arial, sans-serif;\r\n  max-width: 1000px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.calibration-row {\r\n  display: grid;\r\n  \/* grid-template-columns: 1fr 320px; *\/\r\n  gap: 18px;\r\n  align-items: start;\r\n}\r\n\r\n\/* mobile stack *\/\r\n@media (max-width: 800px) {\r\n  .calibration-row {\r\n    \/* stack columns on smaller screens *\/\r\n    display: grid;\r\n    grid-template-columns: 1fr;\r\n    gap: 12px;\r\n  }\r\n\r\n  button,\r\n  button.ghost {\r\n    width: 100%;\r\n    margin-left: 0 !important;\r\n  }\r\n\r\n  .controls {\r\n    display: grid;\r\n    gap: 10px;\r\n  }\r\n\r\n  .card-box {\r\n    width: 100%;\r\n    max-width: 320px;\r\n    margin: 0 auto;\r\n  }\r\n}\r\n\r\n\/* Extra tweaks for very narrow phones *\/\r\n@media (max-width: 480px) {\r\n  .card-box {\r\n    max-width: 280px;\r\n  }\r\n\r\n  \/* allow the rings area to behave well on narrow screens: keep horizontal scroll\r\n     but don't force a min-width that stretches the layout *\/\r\n  .rings-svg {\r\n    min-width: unset;\r\n    width: max-content;\r\n  }\r\n\r\n  .rings-header h3 { font-size: 16px; }\r\n  .status { font-size: 12px; }\r\n}\r\n\r\n.card-box {\r\n  border: 2px solid #000;\r\n  background: transparent;\r\n  border-radius: 6px;\r\n  box-sizing: border-box;\r\n  width: 340px;\r\n  max-width: 100%; \/* \u2705 prevent overflow on small screens *\/\r\n}\r\n\r\n\/* make slider full width always *\/\r\n.controls input[type='range'] {\r\n  width: 100%;\r\n}\r\n\r\n\/* Responsive scroll container for the rings *\/\r\n.rings-scroll {\r\n  margin-top: 14px;\r\n  overflow-x: auto;\r\n  overflow-y: hidden;\r\n  border: 1px solid #ddd;\r\n  padding: 10px;\r\n  max-width: 100%;\r\n  -webkit-overflow-scrolling: touch;\r\n}\r\n\r\n\/* SVG responsive display *\/\r\n.rings-svg {\r\n  display: block;\r\n  height: auto;\r\n  width: max-content; \/* \u2705 keep true internal width; container scrolls *\/\r\n  min-width: 100%;    \/* \u2705 on wide screens, fill nicely *\/\r\n}\r\n\r\n\/* small typography tweaks *\/\r\n.muted { color: #555; margin: 6px 0 14px; }\r\n.muted.small { font-size: 12px; }\r\n\r\n.rings-header {\r\n  display: flex;\r\n  align-items: baseline;\r\n  justify-content: space-between;\r\n  gap: 10px;\r\n  flex-wrap: wrap; \/* \u2705 prevent overflow on mobile *\/\r\n}\r\n\r\n.status { font-size: 13px; }\r\n\r\n.good { color: #0a7a2f; font-weight: 700; }\r\n.warn { color: #b36b00; font-weight: 700; }\r\n.bad  { color: #b00020; font-weight: 700; }\r\n\r\n\/* @media (max-width: 767px){\r\n  .calibration-row {\r\n    display: flex !important;\r\n    flex-direction: column !important;\r\n  }\r\n} *\/\r\n    <\/style>\r\n  <\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f4f472 elementor-widget elementor-widget-image\" data-id=\"2f4f472\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"880\" height=\"1540\" src=\"https:\/\/jewelsbygalla.com\/eg\/wp-content\/uploads\/sites\/2\/2025\/12\/Infographic-International-Ring-Size-Conversion-Chart.png\" class=\"attachment-full size-full wp-image-22579\" alt=\"\" srcset=\"https:\/\/jewelsbygalla.com\/eg\/wp-content\/uploads\/sites\/2\/2025\/12\/Infographic-International-Ring-Size-Conversion-Chart.png 880w, https:\/\/jewelsbygalla.com\/eg\/wp-content\/uploads\/sites\/2\/2025\/12\/Infographic-International-Ring-Size-Conversion-Chart-171x300.png 171w, https:\/\/jewelsbygalla.com\/eg\/wp-content\/uploads\/sites\/2\/2025\/12\/Infographic-International-Ring-Size-Conversion-Chart-585x1024.png 585w, https:\/\/jewelsbygalla.com\/eg\/wp-content\/uploads\/sites\/2\/2025\/12\/Infographic-International-Ring-Size-Conversion-Chart-768x1344.png 768w, https:\/\/jewelsbygalla.com\/eg\/wp-content\/uploads\/sites\/2\/2025\/12\/Infographic-International-Ring-Size-Conversion-Chart-878x1536.png 878w, https:\/\/jewelsbygalla.com\/eg\/wp-content\/uploads\/sites\/2\/2025\/12\/Infographic-International-Ring-Size-Conversion-Chart-64x112.png 64w\" sizes=\"(max-width: 880px) 100vw, 880px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Ring Size Calibrator Screen calibration Place a real bank card on the screen. Adjust the slider until the black rectangle matches the card width. (Standard card width = 85.60mm) Target: 85.60mm card width Adjust card width: Save calibration Reset Tip: Keep browser zoom at 100% for best results. If you zoom later, you\u2019ll need to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-22577","page","type-page","status-publish","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/jewelsbygalla.com\/eg\/en\/wp-json\/wp\/v2\/pages\/22577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jewelsbygalla.com\/eg\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jewelsbygalla.com\/eg\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jewelsbygalla.com\/eg\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jewelsbygalla.com\/eg\/en\/wp-json\/wp\/v2\/comments?post=22577"}],"version-history":[{"count":7,"href":"https:\/\/jewelsbygalla.com\/eg\/en\/wp-json\/wp\/v2\/pages\/22577\/revisions"}],"predecessor-version":[{"id":23693,"href":"https:\/\/jewelsbygalla.com\/eg\/en\/wp-json\/wp\/v2\/pages\/22577\/revisions\/23693"}],"wp:attachment":[{"href":"https:\/\/jewelsbygalla.com\/eg\/en\/wp-json\/wp\/v2\/media?parent=22577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}