Weight Unit Converter – Precision Engineering Tool<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap');\n \n body {\n font-family: 'Inter', sans-serif;\n background-color: #ffffff;\n color: #1f2937;\n }\n\n \/* Custom scrollbar for unit list *\/\n .unit-list-container::-webkit-scrollbar {\n width: 6px;\n }\n .unit-list-container::-webkit-scrollbar-track {\n background: #f1f5f9; \n }\n .unit-list-container::-webkit-scrollbar-thumb {\n background: #cbd5e1; \n border-radius: 3px;\n }\n .unit-list-container::-webkit-scrollbar-thumb:hover {\n background: #94a3b8; \n }\n\n \/* 3D Effect for Calculator Box *\/\n .calc-box {\n background: white;\n border: 1px solid #e2e8f0;\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);\n border-radius: 1rem;\n }\n\n \/* Reset WordPress Theme Styles Scope *\/\n #converter-wrapper {\n box-sizing: border-box !important;\n width: 100% !important;\n }\n #converter-wrapper *, #converter-wrapper *::before, #converter-wrapper *::after {\n box-sizing: inherit !important;\n }\n\n \/* Custom Responsive Layout for Calculator Row *\/\n .calc-row {\n display: flex !important;\n flex-direction: column !important;\n gap: 1rem !important;\n align-items: center !important;\n width: 100% !important;\n }\n @media (min-width: 768px) {\n .calc-row {\n flex-direction: row !important;\n align-items: flex-end !important; \/* Bottom align for label clearance *\/\n }\n }\n\n \/* Input Group Styling *\/\n .custom-input-group {\n display: flex !important;\n width: 100% !important;\n background-color: #ffffff !important;\n border: 1px solid #cbd5e1 !important;\n border-radius: 0.5rem !important;\n overflow: hidden !important;\n min-height: 56px !important;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;\n }\n \n .custom-input-field {\n flex: 1 1 auto !important;\n width: 1% !important; \/* Flex hack *\/\n min-width: 0 !important;\n border: none !important;\n background-color: #ffffff !important;\n margin: 0 !important;\n padding: 0 1rem !important;\n font-size: 1.25rem !important;\n font-weight: 600 !important;\n color: #0f172a !important;\n height: auto !important;\n min-height: 56px !important;\n }\n\n .custom-select-field {\n flex: 0 0 auto !important;\n width: auto !important;\n min-width: 90px !important;\n max-width: 160px !important;\n border: none !important;\n border-left: 1px solid #cbd5e1 !important;\n background-color: #f1f5f9 !important;\n margin: 0 !important;\n \/* Padding for custom arrow *\/\n padding: 0 2.5rem 0 1rem !important;\n font-size: 0.875rem !important;\n font-weight: 500 !important;\n color: #334155 !important;\n cursor: pointer !important;\n height: 100% !important;\n min-height: 56px !important; \n border-radius: 0 !important;\n \/* Kill default arrows completely *\/\n -webkit-appearance: none !important;\n -moz-appearance: none !important;\n appearance: none !important;\n \/* Add Custom Arrow SVG *\/\n background-image: url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'\/%3e%3c\/svg%3e\") !important;\n background-position: right 0.5rem center !important;\n background-repeat: no-repeat !important;\n background-size: 1.5em 1.5em !important;\n }\n\n #converter-wrapper input[type=\"number\"] {\n \/* Explicit reset for inputs *\/\n -webkit-appearance: none !important;\n -moz-appearance: textfield !important;\n appearance: none !important;\n outline: none !important;\n box-shadow: none !important;\n }\n\n \/* Swap Button Force Styles *\/\n #converter-wrapper #swapBtn {\n width: 48px !important;\n height: 48px !important;\n border-radius: 50% !important;\n background-color: #f1f5f9 !important;\n border: 1px solid #cbd5e1 !important;\n color: #64748b !important; \/* Enforce Gray *\/\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n cursor: pointer !important;\n transition: all 0.2s !important;\n flex-shrink: 0 !important;\n padding: 0 !important;\n margin: 0 !important;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;\n }\n #converter-wrapper #swapBtn:hover {\n background-color: #e2e8f0 !important;\n \/* Removed color inheritance, handled by svg rule below *\/\n border-color: #93c5fd !important;\n }\n #converter-wrapper #swapBtn svg,\n #converter-wrapper #swapBtn svg path {\n stroke: #64748b !important; \/* Force explicit Gray color on PATH level *\/\n fill: none !important;\n width: 24px !important;\n height: 24px !important;\n display: block !important;\n transition: stroke 0.2s !important;\n }\n #converter-wrapper #swapBtn:hover svg,\n #converter-wrapper #swapBtn:hover svg path {\n stroke: #2563eb !important; \/* Force explicit Blue on hover on PATH level *\/\n }\n \n #converter-wrapper input[type=\"number\"]:focus,\n #converter-wrapper select:focus {\n outline: none !important;\n box-shadow: none !important;\n border: none !important;\n }\n\n \/* Remove spin buttons explicitly *\/\n #converter-wrapper input::-webkit-outer-spin-button,\n #converter-wrapper input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n #converter-wrapper input[type=number] {\n -moz-appearance: textfield;\n }\n <\/style>\n<\/head>\n<body class=\"p-4 md:p-8 bg-transparent font-sans text-slate-900\">\n\n \n <div id=\"converter-wrapper\" class=\"max-w-5xl mx-auto w-full\">\n\n \n <header class=\"mb-8 text-center\">\n \n <p class=\"text-slate-600 leading-relaxed max-w-3xl mx-auto\">\n Precision engineering calculator for converting weight and mass units. Instantly switch between Metric (g, kg, t), Imperial (lb, oz, ton), and other specialized standards with real-time accuracy. Designed for mechanical engineering professionals and industrial applications.\n <\/p>\n <\/header>\n\n \n <div class=\"calc-box p-6 md:p-10 mb-12\">\n \n \n <div class=\"calc-row mb-8\">\n \n \n <div style=\"display: flex; flex-direction: column; width: 100%; flex: 1;\">\n <label for=\"inputValue\" class=\"text-xs font-bold text-slate-400 uppercase tracking-wider mb-2 ml-1\">Value<\/label>\n <div class=\"custom-input-group\">\n <input type=\"number\" id=\"inputValue\" value=\"1\" class=\"custom-input-field\" placeholder=\"Enter value\">\n <select id=\"inputUnit\" class=\"custom-select-field\">\n \n <\/select>\n <\/div>\n <\/div>\n\n \n <div style=\"display: flex; flex-direction: column; justify-content: flex-end; align-items: center;\">\n \n <div class=\"hidden md:block mb-2\" style=\"height: 1.5rem;\"><\/div> \n <button id=\"swapBtn\" title=\"Swap Units\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"width: 24px !important; height: 24px !important; display: block !important;\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4\" \/>\n <\/svg>\n <\/button>\n <\/div>\n\n \n <div style=\"display: flex; flex-direction: column; width: 100%; flex: 1;\">\n <label for=\"outputValue\" class=\"text-xs font-bold text-slate-400 uppercase tracking-wider mb-2 ml-1\">Result<\/label>\n <div class=\"custom-input-group\" style=\"background-color: #f8fafc !important;\">\n <input type=\"number\" id=\"outputValue\" class=\"custom-input-field\" style=\"background-color: #f8fafc !important;\" placeholder=\"Result\">\n <select id=\"outputUnit\" class=\"custom-select-field\" style=\"background-color: #e2e8f0 !important; border-left-color: #cbd5e1 !important;\">\n \n <\/select>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"mt-6 p-4 rounded-xl shadow-sm\" style=\"display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; background-color: #eff6ff !important; border: 1px solid #dbeafe !important; gap: 1rem !important;\">\n <div style=\"display: flex !important; align-items: baseline !important; gap: 0.25rem !important;\">\n <span id=\"highlightInput\" class=\"text-lg md:text-xl font-bold text-slate-700\" style=\"line-height: 1 !important;\">1<\/span>\n <span id=\"highlightInputUnit\" class=\"text-sm font-semibold text-slate-500\" style=\"line-height: 1 !important;\">kg<\/span>\n <\/div>\n <span class=\"text-lg text-blue-400 font-medium\" style=\"line-height: 1 !important;\">=<\/span>\n <div style=\"display: flex !important; align-items: baseline !important; gap: 0.25rem !important;\">\n <span id=\"highlightOutput\" class=\"text-xl md:text-2xl font-bold text-blue-700\" style=\"line-height: 1 !important;\">1000<\/span>\n <span id=\"highlightOutputUnit\" class=\"text-base font-bold text-blue-600\" style=\"line-height: 1 !important;\">g<\/span>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"flex flex-col gap-8 mb-16\">\n \n \n <div class=\"bg-slate-50 p-6 rounded-2xl border border-slate-200\">\n <h3 class=\"text-sm font-bold text-slate-500 uppercase tracking-widest mb-4 flex items-center gap-2\">\n Metric Units (SI)\n <\/h3>\n <div id=\"metricList\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"bg-slate-50 p-6 rounded-2xl border border-slate-200\">\n <h3 class=\"text-sm font-bold text-slate-500 uppercase tracking-widest mb-4 flex items-center gap-2\">\n Imperial Units\n <\/h3>\n <div id=\"imperialList\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"bg-slate-50 p-6 rounded-2xl border border-slate-200\">\n <h3 class=\"text-sm font-bold text-slate-500 uppercase tracking-widest mb-4 flex items-center gap-2\">\n Market & Other Units\n <\/h3>\n <div id=\"otherList\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3\">\n \n <\/div>\n <\/div>\n\n <\/div>\n\n \n <article class=\"prose prose-slate max-w-none bg-slate-50 p-8 rounded-2xl mb-10 shadow-sm border border-slate-100\">\n \n \n \n <p class=\"mb-6 text-slate-600 hidden\">\n \n <\/p>\n\n \n <div class=\"mb-8\">\n <h3 class=\"text-xl font-bold text-slate-800 mb-3\">How to Use This Calculator<\/h3>\n <ol class=\"list-decimal pl-5 text-slate-600 space-y-2\">\n <li><strong>Enter Value:<\/strong> Input the weight or mass figure in the left box.<\/li>\n <li><strong>Select Units:<\/strong> Choose your starting unit (e.g., <em>kg<\/em>) and target unit (e.g., <em>lbs<\/em>).<\/li>\n <li><strong>Real-Time Results:<\/strong> View the conversion instantly in the main display and the comprehensive list below.<\/li>\n <li><strong>Scientific Notation:<\/strong> For extreme values (over 1 million or under 0.01), the tool automatically switches to scientific notation (e.g., <code>1.5e+6<\/code>) for readability.<\/li>\n <\/ol>\n <\/div>\n\n \n <div class=\"bg-white border border-slate-200 rounded-lg p-6 mb-8\">\n <h3 class=\"text-xl font-bold text-slate-800 mb-4 mt-0\">RFQ Essentials & Common Questions<\/h3>\n \n <div class=\"space-y-5\">\n <div>\n <h4 class=\"font-semibold text-slate-900 text-sm mb-1\">Why is unit specification critical in RFQs?<\/h4>\n <p class=\"text-slate-600 text-sm\">Ambiguous units (e.g., “Ton”) cause up to 10% variance in material quantity. Always specify <strong>Metric Ton (1,000kg)<\/strong>, <strong>Short Ton (907kg)<\/strong>, or <strong>Long Ton (1,016kg)<\/strong> in your Request for Quotation.<\/p>\n <\/div>\n <div>\n <h4 class=\"font-semibold text-slate-900 text-sm mb-1\">How do I convert steel\/metal prices from per lb to per kg?<\/h4>\n <p class=\"text-slate-600 text-sm\">To convert price\/lb to price\/kg, multiply by <strong>2.2046<\/strong>. To convert price\/kg to price\/lb, divide by <strong>2.2046<\/strong>. This is crucial for comparing domestic (US) and international quotes.<\/p>\n <\/div>\n <div>\n <h4 class=\"font-semibold text-slate-900 text-sm mb-1\">What is the difference between Net Weight and Gross Weight?<\/h4>\n <p class=\"text-slate-600 text-sm\"><strong>Net Weight (NW)<\/strong> is the weight of the product alone. <strong>Gross Weight (GW)<\/strong> includes packaging (pallets, crates). Shipping costs are often calculated on Gross Weight, while raw material costs are based on Net Weight.<\/p>\n <\/div>\n <div>\n <h4 class=\"font-semibold text-slate-900 text-sm mb-1\">Troy Ounce vs. Ounce for Precious Metals<\/h4>\n <p class=\"text-slate-600 text-sm\">Gold and silver are measured in <strong>Troy Ounces (31.1g)<\/strong>, not standard Avoirdupois Ounces (28.35g). Use the “Ounce (oz)” unit here for standard materials, and ensure your supplier specifies if using Troy units.<\/p>\n <\/div>\n <div>\n <h4 class=\"font-semibold text-slate-900 text-sm mb-1\">Shipping Container Load Limits (Weight vs. Volume)<\/h4>\n <p class=\"text-slate-600 text-sm\">A standard 20ft container typically has a max payload of approx. <strong>28 Metric Tons (28,000 kg)<\/strong>. Ensure your total Gross Weight does not exceed road legal limits at the destination port.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <h3 class=\"text-xl font-bold text-slate-800 mb-4\">Quick Conversion Reference<\/h3>\n <div class=\"overflow-x-auto mb-8 rounded-lg border border-slate-200\">\n <table class=\"w-full text-sm text-left text-slate-600\">\n <thead class=\"text-xs text-slate-700 uppercase bg-slate-100 border-b border-slate-200\">\n <tr>\n <th class=\"px-6 py-3\">From Unit<\/th>\n <th class=\"px-6 py-3\">To Unit<\/th>\n <th class=\"px-6 py-3\">Formula<\/th>\n <\/tr>\n <\/thead>\n <tbody class=\"bg-white divide-y divide-slate-200\">\n <tr>\n <td class=\"px-6 py-3 font-medium text-slate-900\">1 Kilogram (kg)<\/td>\n <td class=\"px-6 py-3\">Pounds (lbs)<\/td>\n <td class=\"px-6 py-3 font-mono text-blue-600\">x 2.20462<\/td>\n <\/tr>\n <tr>\n <td class=\"px-6 py-3 font-medium text-slate-900\">1 Pound (lb)<\/td>\n <td class=\"px-6 py-3\">Kilograms (kg)<\/td>\n <td class=\"px-6 py-3 font-mono text-blue-600\">\/ 2.20462<\/td>\n <\/tr>\n <tr>\n <td class=\"px-6 py-3 font-medium text-slate-900\">1 Metric Ton (t)<\/td>\n <td class=\"px-6 py-3\">Kilograms (kg)<\/td>\n <td class=\"px-6 py-3 font-mono text-blue-600\">x 1000<\/td>\n <\/tr>\n <tr>\n <td class=\"px-6 py-3 font-medium text-slate-900\">1 Ounce (oz)<\/td>\n <td class=\"px-6 py-3\">Grams (g)<\/td>\n <td class=\"px-6 py-3 font-mono text-blue-600\">x 28.3495<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n\n \n <div class=\"mb-4\">\n <h3 class=\"text-xl font-bold text-slate-800 mb-4\">Popular Searches<\/h3>\n <div class=\"flex flex-wrap gap-2\">\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">kg to lbs converter<\/span>\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">grams to ounces formula<\/span>\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">metric ton to short ton<\/span>\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">milligrams to micrograms<\/span>\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">stone to kg table<\/span>\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">carat to gram conversion<\/span>\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">lbs to kg calculator<\/span>\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">weight unit conversion chart<\/span>\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">ton conversion factors<\/span>\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">steel weight calculator<\/span>\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">mass vs weight units<\/span>\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">grain to gram reload data<\/span>\n <\/div>\n <\/div>\n\n <\/article>\n\n <\/div> \n\n <script>\n \/\/ Data Source (Parsed from prompt)\n \/\/ Base Logic: All factors represent the quantity of units equivalent to 10 kg.\n \/\/ Formula: Value_in_Base = Input_Value \/ Input_Factor\n \/\/ Output_Value = Value_in_Base * Output_Factor\n \/\/ Therefore: Output = Input * (Output_Factor \/ Input_Factor)\n \n const unitsData = [\n \/\/ Metric\n { name: \"Kilogram\", symbol: \"kg\", factor: 10, type: \"metric\" },\n { name: \"Gram\", symbol: \"g\", factor: 10000, type: \"metric\" },\n { name: \"Milligram\", symbol: \"mg\", factor: 10000000, type: \"metric\" },\n { name: \"Microgram\", symbol: \"\u03bcg\", factor: 1e10, type: \"metric\" }, \/\/ 1x10^10\n { name: \"Metric Ton\", symbol: \"t\", factor: 0.01, type: \"metric\" },\n { name: \"Quintal\", symbol: \"q\", factor: 0.1, type: \"metric\" },\n { name: \"Nanogram\", symbol: \"ng\", factor: 1e13, type: \"metric\" }, \/\/ 1x10^13\n { name: \"Picogram\", symbol: \"pg\", factor: 1e16, type: \"metric\" }, \/\/ 1x10^16\n { name: \"Femtogram\", symbol: \"fg\", factor: 1e19, type: \"metric\" }, \/\/ 1x10^19\n { name: \"Attogram\", symbol: \"ag\", factor: 1e22, type: \"metric\" }, \/\/ 1x10^22\n { name: \"Zeptogram\", symbol: \"zg\", factor: 1e25, type: \"metric\" }, \/\/ 1x10^25\n { name: \"Yoctogram\", symbol: \"yg\", factor: 1e28, type: \"metric\" }, \/\/ 1x10^28\n { name: \"Rontogram\", symbol: \"rg\", factor: 1e31, type: \"metric\" }, \/\/ 1x10^31 (Prompt: rg)\n { name: \"Quectogram\", symbol: \"qg\", factor: 1e34, type: \"metric\" }, \/\/ 1x10^34\n \n \/\/ Large Metric (Megagrams etc represented by factors < 1)\n { name: \"Quettagram\", symbol: \"Qg\", factor: 1e-26, type: \"metric\" }, \/\/ 1x10^-26\n { name: \"Ronnagram\", symbol: \"Rg\", factor: 1e-23, type: \"metric\" }, \/\/ 1x10^-23\n { name: \"Yottagram\", symbol: \"Yg\", factor: 1e-20, type: \"metric\" }, \/\/ 1x10^-20\n { name: \"Zettagram\", symbol: \"Zg\", factor: 1e-17, type: \"metric\" }, \/\/ 1x10^-17\n { name: \"Exagram\", symbol: \"Eg\", factor: 1e-14, type: \"metric\" }, \/\/ 1x10^-14\n { name: \"Petagram\", symbol: \"Pg\", factor: 1e-11, type: \"metric\" }, \/\/ 1x10^-11\n { name: \"Teragram\", symbol: \"Tg\", factor: 1e-8, type: \"metric\" }, \/\/ 1x10^-8\n { name: \"Gigagram\", symbol: \"Gg\", factor: 0.00001, type: \"metric\" }, \/\/ 1x10^-5\n { name: \"Megagram\", symbol: \"Mg\", factor: 0.01, type: \"metric\" }, \/\/ Same as Ton\n\n \/\/ Imperial\n { name: \"Pound\", symbol: \"lb\", factor: 22.05, type: \"imperial\" },\n { name: \"Ounce\", symbol: \"oz\", factor: 352.74, type: \"imperial\" },\n { name: \"Carat\", symbol: \"ct\", factor: 50000, type: \"imperial\" },\n { name: \"Grain\", symbol: \"gr\", factor: 154323.58, type: \"imperial\" },\n { name: \"Long Ton (UK)\", symbol: \"lt\", factor: 0.00984, type: \"imperial\" },\n { name: \"Short Ton (US)\", symbol: \"st\", factor: 0.011, type: \"imperial\" },\n { name: \"Hundredweight (UK)\", symbol: \"cwt\", factor: 0.197, type: \"imperial\" }, \/\/ \u82f1\u62c5\n { name: \"Hundredweight (US)\", symbol: \"cwt\", factor: 0.22, type: \"imperial\" }, \/\/ \u7f8e\u62c5 - Ambiguous symbol, maybe add US\/UK\n { name: \"Stone\", symbol: \"st.\", factor: 1.57, type: \"imperial\" }, \/\/ \u82f1\u77f3, symbol collision with short ton st. Used st.\n { name: \"Dram\", symbol: \"dr\", factor: 5643.83, type: \"imperial\" },\n\n \/\/ Market\/Other (Translated from Chinese Market Units)\n { name: \"Dan (Picul)\", symbol: \"dan\", factor: 0.2, type: \"other\" },\n { name: \"Jin (Catty)\", symbol: \"jin\", factor: 20, type: \"other\" },\n { name: \"Liang (Tael)\", symbol: \"liang\", factor: 200, type: \"other\" },\n { name: \"Qian (Mace)\", symbol: \"qian\", factor: 2000, type: \"other\" },\n { name: \"Fen (Candareen)\", symbol: \"fen\", factor: 20000, type: \"other\" }\n ];\n\n \/\/ Clean up duplicate symbols if necessary by appending type logic in display\n \/\/ Specifically CWT. \n const units = unitsData.map((u, index) => {\n if (u.name === \"Hundredweight (US)\") u.symbol = \"cwt (US)\";\n if (u.name === \"Hundredweight (UK)\") u.symbol = \"cwt (UK)\";\n if (u.name === \"Stone\") u.symbol = \"st\"; \/\/ Revert to st but display name handles it\n return { ...u, id: index };\n });\n\n \/\/ DOM Elements\n const inputValue = document.getElementById('inputValue');\n const inputUnit = document.getElementById('inputUnit');\n const outputValue = document.getElementById('outputValue'); \/\/ Changed from outputDisplay\n const outputUnit = document.getElementById('outputUnit');\n const swapBtn = document.getElementById('swapBtn');\n const highlightInput = document.getElementById('highlightInput');\n const highlightOutput = document.getElementById('highlightOutput');\n const metricList = document.getElementById('metricList');\n const imperialList = document.getElementById('imperialList');\n const otherList = document.getElementById('otherList');\n\n \/\/ Initialize Selects\n function initSelects() {\n \/\/ Updated to show only symbol or clean text as requested \"\u53ea\u663e\u793a\u5c0f\u5199\" -> interpreting as \"kg\"\n const createOption = (unit) => `<option value=\"${unit.id}\">${unit.symbol}<\/option>`;\n \n const allOptions = units.map(createOption).join('');\n inputUnit.innerHTML = allOptions;\n outputUnit.innerHTML = allOptions;\n\n \/\/ Defaults\n inputUnit.value = units.find(u => u.symbol === 'kg').id; \/\/ Default kg\n outputUnit.value = units.find(u => u.symbol === 'g').id; \/\/ Default g\n }\n\n \/\/ Formatting Function\n function formatNumber(num) {\n if (num === 0) return \"0\";\n \n const absNum = Math.abs(num);\n\n \/\/ Rule 1: Scientific notation logic update per user request\n \/\/ \"\u6240\u6709\u7ed3\u679c\u5c0f\u4e8e1\u65f6\uff0c\u5c0f\u6570\u70b9\u4f4d\u6570\u5c0f\u4e8e4\u6b63\u5e38\u663e\u793a\uff0c\u4f4d\u6570\u5927\u4e8e4\u7528\u79d1\u5b66\u8ba1\u6570\u6cd5\u663e\u793a\"\n \/\/ Interpreted as: If num < 1, check if it's smaller than 0.0001 (1e-4). \n \/\/ If num < 0.0001, use sci notation. If 0.0001 <= num < 1, show decimals (up to 4?).\n \/\/ Also keep large number rule (>= 1e6).\n \n if (absNum === 0) return \"0\";\n\n if (absNum < 1) {\n if (absNum < 0.0001) {\n \/\/ Less than 0.0001 -> Scientific\n return num.toExponential(4).replace(\/\\.?0+e\/, 'e');\n } else {\n \/\/ Between 0.0001 and 1 -> Show normal decimals\n \/\/ \"\u5c0f\u6570\u70b9\u4f4d\u6570\u5c0f\u4e8e4\u6b63\u5e38\u663e\u793a\" -> means show up to 4 decimals?\n \/\/ e.g. 0.0012 -> 0.0012\n \/\/ Let's use toLocaleString with max 4 decimals to avoid long tails like 0.300000004\n return num.toLocaleString('en-US', { maximumFractionDigits: 4, minimumFractionDigits: 0 });\n }\n }\n \n if (absNum >= 1e6) {\n return num.toExponential(4).replace(\/\\.?0+e\/, 'e'); \n }\n \n \/\/ Integers & Standard Numbers >= 1 and < 1e6\n if (Number.isInteger(num)) {\n return num.toLocaleString('en-US');\n } else {\n \/\/ For numbers >= 1 with decimals, keep standard 2 decimals or similar?\n \/\/ Previous rule was \"keep 2 decimal places\". User didn't explicitly change this for >1.\n \/\/ I'll stick to 2 decimals for consistency for >1 values.\n return parseFloat(num.toFixed(2)).toLocaleString('en-US');\n }\n }\n\n function updateOutput() {\n const val = parseFloat(inputValue.value);\n if (isNaN(val)) {\n outputValue.value = \"\";\n updateHighlight(NaN);\n return;\n }\n\n const inUnit = units[inputUnit.value];\n const outUnit = units[outputUnit.value];\n const result = val * (outUnit.factor \/ inUnit.factor);\n\n \/\/ Set output value (raw or formatted? Input usually takes raw\/clean numbers, but for UX maybe truncated?)\n \/\/ Standard behavior: Input shows exact value user typed, Output shows formatted. \n \/\/ If we make output an input, we must decide if we update it with formatted string or raw number.\n \/\/ Let's stick to a reasonable precision for the input box value (e.g. 6 decimals max to avoid overflow)\n \/\/ But formatNumber logic is complex. Let's use a simpler precision for the box value itself.\n \/\/ Actually, standard HTML input type=number handles floats. \n \/\/ To allow copy-paste and precision, we should probably set the raw-ish number but limited to avoid floating point artifacts.\n let displayResult = result;\n if (!Number.isInteger(result)) {\n displayResult = parseFloat(result.toFixed(6)); \/\/ Limit to 6 decimals for the input box to prevent 0.999999999\n }\n outputValue.value = displayResult;\n\n updateHighlight(val, result, inUnit, outUnit);\n updateLists(val, inUnit);\n }\n\n function updateInput() {\n const val = parseFloat(outputValue.value);\n if (isNaN(val)) {\n inputValue.value = \"\";\n updateHighlight(NaN);\n return;\n }\n\n const inUnit = units[inputUnit.value];\n const outUnit = units[outputUnit.value];\n \n \/\/ Reverse calculation: Input = Output \/ (Output_Factor \/ Input_Factor)\n \/\/ Or Input = Output * (Input_Factor \/ Output_Factor)\n const result = val * (inUnit.factor \/ outUnit.factor);\n\n let displayResult = result;\n if (!Number.isInteger(result)) {\n displayResult = parseFloat(result.toFixed(6));\n }\n inputValue.value = displayResult;\n\n updateHighlight(result, val, inUnit, outUnit);\n updateLists(result, inUnit);\n }\n\n function updateHighlight(inVal, outVal, inUnit, outUnit) {\n if (isNaN(inVal) || isNaN(outVal)) {\n highlightInput.textContent = \"---\";\n document.getElementById('highlightInputUnit').textContent = \"\";\n highlightOutput.textContent = \"---\";\n document.getElementById('highlightOutputUnit').textContent = \"\";\n return;\n }\n highlightInput.textContent = formatNumber(inVal);\n document.getElementById('highlightInputUnit').textContent = inUnit.symbol;\n highlightOutput.textContent = formatNumber(outVal);\n document.getElementById('highlightOutputUnit').textContent = outUnit.symbol;\n }\n\n function updateLists(baseVal, baseUnit) {\n \/\/ Calculate for every unit\n const getVal = (targetUnit) => {\n return baseVal * (targetUnit.factor \/ baseUnit.factor);\n };\n\n const createItem = (u) => {\n const val = getVal(u);\n \/\/ Compact Design: Reduced height, clean layout\n \/\/ Optimized Colors: Soft teal\/blue for badges, neutral slate for text\n \/\/ Font: Mono for numbers\n return `\n <div class=\"group relative p-3 rounded-lg bg-white border border-slate-200 hover:border-indigo-300 hover:shadow-md transition-all duration-200 flex flex-col justify-between min-h-[70px]\">\n <div class=\"flex justify-between items-start mb-1\">\n <span class=\"text-[10px] font-bold text-slate-400 uppercase tracking-widest truncate pr-2 mt-0.5\">${u.name}<\/span>\n <span class=\"text-[10px] font-bold text-indigo-600 bg-indigo-50 group-hover:bg-indigo-600 group-hover:text-white px-1.5 py-0.5 rounded-md transition-colors\">${u.symbol}<\/span>\n <\/div>\n <div class=\"font-bold text-slate-700 text-lg truncate tracking-tight\" title=\"${formatNumber(val)}\">${formatNumber(val)}<\/div>\n <\/div>\n `;\n };\n\n metricList.innerHTML = units.filter(u => u.type === 'metric').map(createItem).join('');\n imperialList.innerHTML = units.filter(u => u.type === 'imperial').map(createItem).join('');\n otherList.innerHTML = units.filter(u => u.type === 'other').map(createItem).join('');\n }\n\n \/\/ Event Listeners\n inputValue.addEventListener('input', updateOutput);\n outputValue.addEventListener('input', updateInput); \/\/ Bidirectional\n inputUnit.addEventListener('change', updateOutput);\n outputUnit.addEventListener('change', updateOutput);\n \n swapBtn.addEventListener('click', () => {\n const temp = inputUnit.value;\n inputUnit.value = outputUnit.value;\n outputUnit.value = temp;\n updateOutput();\n });\n\n \/\/ Init\n initSelects();\n updateOutput();\n\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Weight Unit Converter – Precision Engineering Tool Precision engineering calculator for converting weight and mass units. Instantly switch between Metric<\/p>","protected":false},"author":1,"featured_media":74283,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-74242","page","type-page","status-publish","has-post-thumbnail","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.harsle.com\/ar\/wp-json\/wp\/v2\/pages\/74242","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.harsle.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.harsle.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.harsle.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.harsle.com\/ar\/wp-json\/wp\/v2\/comments?post=74242"}],"version-history":[{"count":0,"href":"https:\/\/www.harsle.com\/ar\/wp-json\/wp\/v2\/pages\/74242\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.harsle.com\/ar\/wp-json\/wp\/v2\/media\/74283"}],"wp:attachment":[{"href":"https:\/\/www.harsle.com\/ar\/wp-json\/wp\/v2\/media?parent=74242"}],"curies":[{"name":"\u0648\u0648\u0631\u062f\u0628\u0631\u064a\u0633","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":74242,"date":"2025-12-07T06:18:51","date_gmt":"2025-12-07T06:18:51","guid":{"rendered":"https:\/\/www.harsle.com\/?page_id=74242"},"modified":"2025-12-08T01:44:33","modified_gmt":"2025-12-08T01:44:33","slug":"mass-and-weight-converter","status":"publish","type":"page","link":"https:\/\/www.harsle.com\/ar\/mass-and-weight-converter\/","title":{"rendered":"\u0645\u062d\u0648\u0644 \u0627\u0644\u0643\u062a\u0644\u0629 \u0648\u0627\u0644\u0648\u0632\u0646"},"content":{"rendered":"\n\n\n\n \n \n Weight Unit Converter – Precision Engineering Tool<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap');\n \n body {\n font-family: 'Inter', sans-serif;\n background-color: #ffffff;\n color: #1f2937;\n }\n\n \/* Custom scrollbar for unit list *\/\n .unit-list-container::-webkit-scrollbar {\n width: 6px;\n }\n .unit-list-container::-webkit-scrollbar-track {\n background: #f1f5f9; \n }\n .unit-list-container::-webkit-scrollbar-thumb {\n background: #cbd5e1; \n border-radius: 3px;\n }\n .unit-list-container::-webkit-scrollbar-thumb:hover {\n background: #94a3b8; \n }\n\n \/* 3D Effect for Calculator Box *\/\n .calc-box {\n background: white;\n border: 1px solid #e2e8f0;\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);\n border-radius: 1rem;\n }\n\n \/* Reset WordPress Theme Styles Scope *\/\n #converter-wrapper {\n box-sizing: border-box !important;\n width: 100% !important;\n }\n #converter-wrapper *, #converter-wrapper *::before, #converter-wrapper *::after {\n box-sizing: inherit !important;\n }\n\n \/* Custom Responsive Layout for Calculator Row *\/\n .calc-row {\n display: flex !important;\n flex-direction: column !important;\n gap: 1rem !important;\n align-items: center !important;\n width: 100% !important;\n }\n @media (min-width: 768px) {\n .calc-row {\n flex-direction: row !important;\n align-items: flex-end !important; \/* Bottom align for label clearance *\/\n }\n }\n\n \/* Input Group Styling *\/\n .custom-input-group {\n display: flex !important;\n width: 100% !important;\n background-color: #ffffff !important;\n border: 1px solid #cbd5e1 !important;\n border-radius: 0.5rem !important;\n overflow: hidden !important;\n min-height: 56px !important;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;\n }\n \n .custom-input-field {\n flex: 1 1 auto !important;\n width: 1% !important; \/* Flex hack *\/\n min-width: 0 !important;\n border: none !important;\n background-color: #ffffff !important;\n margin: 0 !important;\n padding: 0 1rem !important;\n font-size: 1.25rem !important;\n font-weight: 600 !important;\n color: #0f172a !important;\n height: auto !important;\n min-height: 56px !important;\n }\n\n .custom-select-field {\n flex: 0 0 auto !important;\n width: auto !important;\n min-width: 90px !important;\n max-width: 160px !important;\n border: none !important;\n border-left: 1px solid #cbd5e1 !important;\n background-color: #f1f5f9 !important;\n margin: 0 !important;\n \/* Padding for custom arrow *\/\n padding: 0 2.5rem 0 1rem !important;\n font-size: 0.875rem !important;\n font-weight: 500 !important;\n color: #334155 !important;\n cursor: pointer !important;\n height: 100% !important;\n min-height: 56px !important; \n border-radius: 0 !important;\n \/* Kill default arrows completely *\/\n -webkit-appearance: none !important;\n -moz-appearance: none !important;\n appearance: none !important;\n \/* Add Custom Arrow SVG *\/\n background-image: url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'\/%3e%3c\/svg%3e\") !important;\n background-position: right 0.5rem center !important;\n background-repeat: no-repeat !important;\n background-size: 1.5em 1.5em !important;\n }\n\n #converter-wrapper input[type=\"number\"] {\n \/* Explicit reset for inputs *\/\n -webkit-appearance: none !important;\n -moz-appearance: textfield !important;\n appearance: none !important;\n outline: none !important;\n box-shadow: none !important;\n }\n\n \/* Swap Button Force Styles *\/\n #converter-wrapper #swapBtn {\n width: 48px !important;\n height: 48px !important;\n border-radius: 50% !important;\n background-color: #f1f5f9 !important;\n border: 1px solid #cbd5e1 !important;\n color: #64748b !important; \/* Enforce Gray *\/\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n cursor: pointer !important;\n transition: all 0.2s !important;\n flex-shrink: 0 !important;\n padding: 0 !important;\n margin: 0 !important;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;\n }\n #converter-wrapper #swapBtn:hover {\n background-color: #e2e8f0 !important;\n \/* Removed color inheritance, handled by svg rule below *\/\n border-color: #93c5fd !important;\n }\n #converter-wrapper #swapBtn svg,\n #converter-wrapper #swapBtn svg path {\n stroke: #64748b !important; \/* Force explicit Gray color on PATH level *\/\n fill: none !important;\n width: 24px !important;\n height: 24px !important;\n display: block !important;\n transition: stroke 0.2s !important;\n }\n #converter-wrapper #swapBtn:hover svg,\n #converter-wrapper #swapBtn:hover svg path {\n stroke: #2563eb !important; \/* Force explicit Blue on hover on PATH level *\/\n }\n \n #converter-wrapper input[type=\"number\"]:focus,\n #converter-wrapper select:focus {\n outline: none !important;\n box-shadow: none !important;\n border: none !important;\n }\n\n \/* Remove spin buttons explicitly *\/\n #converter-wrapper input::-webkit-outer-spin-button,\n #converter-wrapper input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n #converter-wrapper input[type=number] {\n -moz-appearance: textfield;\n }\n <\/style>\n<\/head>\n<body class=\"p-4 md:p-8 bg-transparent font-sans text-slate-900\">\n\n \n <div id=\"converter-wrapper\" class=\"max-w-5xl mx-auto w-full\">\n\n \n <header class=\"mb-8 text-center\">\n \n <p class=\"text-slate-600 leading-relaxed max-w-3xl mx-auto\">\n Precision engineering calculator for converting weight and mass units. Instantly switch between Metric (g, kg, t), Imperial (lb, oz, ton), and other specialized standards with real-time accuracy. Designed for mechanical engineering professionals and industrial applications.\n <\/p>\n <\/header>\n\n \n <div class=\"calc-box p-6 md:p-10 mb-12\">\n \n \n <div class=\"calc-row mb-8\">\n \n \n <div style=\"display: flex; flex-direction: column; width: 100%; flex: 1;\">\n <label for=\"inputValue\" class=\"text-xs font-bold text-slate-400 uppercase tracking-wider mb-2 ml-1\">Value<\/label>\n <div class=\"custom-input-group\">\n <input type=\"number\" id=\"inputValue\" value=\"1\" class=\"custom-input-field\" placeholder=\"Enter value\">\n <select id=\"inputUnit\" class=\"custom-select-field\">\n \n <\/select>\n <\/div>\n <\/div>\n\n \n <div style=\"display: flex; flex-direction: column; justify-content: flex-end; align-items: center;\">\n \n <div class=\"hidden md:block mb-2\" style=\"height: 1.5rem;\"><\/div> \n <button id=\"swapBtn\" title=\"Swap Units\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"width: 24px !important; height: 24px !important; display: block !important;\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4\" \/>\n <\/svg>\n <\/button>\n <\/div>\n\n \n <div style=\"display: flex; flex-direction: column; width: 100%; flex: 1;\">\n <label for=\"outputValue\" class=\"text-xs font-bold text-slate-400 uppercase tracking-wider mb-2 ml-1\">Result<\/label>\n <div class=\"custom-input-group\" style=\"background-color: #f8fafc !important;\">\n <input type=\"number\" id=\"outputValue\" class=\"custom-input-field\" style=\"background-color: #f8fafc !important;\" placeholder=\"Result\">\n <select id=\"outputUnit\" class=\"custom-select-field\" style=\"background-color: #e2e8f0 !important; border-left-color: #cbd5e1 !important;\">\n \n <\/select>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"mt-6 p-4 rounded-xl shadow-sm\" style=\"display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; background-color: #eff6ff !important; border: 1px solid #dbeafe !important; gap: 1rem !important;\">\n <div style=\"display: flex !important; align-items: baseline !important; gap: 0.25rem !important;\">\n <span id=\"highlightInput\" class=\"text-lg md:text-xl font-bold text-slate-700\" style=\"line-height: 1 !important;\">1<\/span>\n <span id=\"highlightInputUnit\" class=\"text-sm font-semibold text-slate-500\" style=\"line-height: 1 !important;\">kg<\/span>\n <\/div>\n <span class=\"text-lg text-blue-400 font-medium\" style=\"line-height: 1 !important;\">=<\/span>\n <div style=\"display: flex !important; align-items: baseline !important; gap: 0.25rem !important;\">\n <span id=\"highlightOutput\" class=\"text-xl md:text-2xl font-bold text-blue-700\" style=\"line-height: 1 !important;\">1000<\/span>\n <span id=\"highlightOutputUnit\" class=\"text-base font-bold text-blue-600\" style=\"line-height: 1 !important;\">g<\/span>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"flex flex-col gap-8 mb-16\">\n \n \n <div class=\"bg-slate-50 p-6 rounded-2xl border border-slate-200\">\n <h3 class=\"text-sm font-bold text-slate-500 uppercase tracking-widest mb-4 flex items-center gap-2\">\n Metric Units (SI)\n <\/h3>\n <div id=\"metricList\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"bg-slate-50 p-6 rounded-2xl border border-slate-200\">\n <h3 class=\"text-sm font-bold text-slate-500 uppercase tracking-widest mb-4 flex items-center gap-2\">\n Imperial Units\n <\/h3>\n <div id=\"imperialList\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"bg-slate-50 p-6 rounded-2xl border border-slate-200\">\n <h3 class=\"text-sm font-bold text-slate-500 uppercase tracking-widest mb-4 flex items-center gap-2\">\n Market & Other Units\n <\/h3>\n <div id=\"otherList\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3\">\n \n <\/div>\n <\/div>\n\n <\/div>\n\n \n <article class=\"prose prose-slate max-w-none bg-slate-50 p-8 rounded-2xl mb-10 shadow-sm border border-slate-100\">\n \n \n \n <p class=\"mb-6 text-slate-600 hidden\">\n \n <\/p>\n\n \n <div class=\"mb-8\">\n <h3 class=\"text-xl font-bold text-slate-800 mb-3\">How to Use This Calculator<\/h3>\n <ol class=\"list-decimal pl-5 text-slate-600 space-y-2\">\n <li><strong>Enter Value:<\/strong> Input the weight or mass figure in the left box.<\/li>\n <li><strong>Select Units:<\/strong> Choose your starting unit (e.g., <em>kg<\/em>) and target unit (e.g., <em>lbs<\/em>).<\/li>\n <li><strong>Real-Time Results:<\/strong> View the conversion instantly in the main display and the comprehensive list below.<\/li>\n <li><strong>Scientific Notation:<\/strong> For extreme values (over 1 million or under 0.01), the tool automatically switches to scientific notation (e.g., <code>1.5e+6<\/code>) for readability.<\/li>\n <\/ol>\n <\/div>\n\n \n <div class=\"bg-white border border-slate-200 rounded-lg p-6 mb-8\">\n <h3 class=\"text-xl font-bold text-slate-800 mb-4 mt-0\">RFQ Essentials & Common Questions<\/h3>\n \n <div class=\"space-y-5\">\n <div>\n <h4 class=\"font-semibold text-slate-900 text-sm mb-1\">Why is unit specification critical in RFQs?<\/h4>\n <p class=\"text-slate-600 text-sm\">Ambiguous units (e.g., “Ton”) cause up to 10% variance in material quantity. Always specify <strong>Metric Ton (1,000kg)<\/strong>, <strong>Short Ton (907kg)<\/strong>, or <strong>Long Ton (1,016kg)<\/strong> in your Request for Quotation.<\/p>\n <\/div>\n <div>\n <h4 class=\"font-semibold text-slate-900 text-sm mb-1\">How do I convert steel\/metal prices from per lb to per kg?<\/h4>\n <p class=\"text-slate-600 text-sm\">To convert price\/lb to price\/kg, multiply by <strong>2.2046<\/strong>. To convert price\/kg to price\/lb, divide by <strong>2.2046<\/strong>. This is crucial for comparing domestic (US) and international quotes.<\/p>\n <\/div>\n <div>\n <h4 class=\"font-semibold text-slate-900 text-sm mb-1\">What is the difference between Net Weight and Gross Weight?<\/h4>\n <p class=\"text-slate-600 text-sm\"><strong>Net Weight (NW)<\/strong> is the weight of the product alone. <strong>Gross Weight (GW)<\/strong> includes packaging (pallets, crates). Shipping costs are often calculated on Gross Weight, while raw material costs are based on Net Weight.<\/p>\n <\/div>\n <div>\n <h4 class=\"font-semibold text-slate-900 text-sm mb-1\">Troy Ounce vs. Ounce for Precious Metals<\/h4>\n <p class=\"text-slate-600 text-sm\">Gold and silver are measured in <strong>Troy Ounces (31.1g)<\/strong>, not standard Avoirdupois Ounces (28.35g). Use the “Ounce (oz)” unit here for standard materials, and ensure your supplier specifies if using Troy units.<\/p>\n <\/div>\n <div>\n <h4 class=\"font-semibold text-slate-900 text-sm mb-1\">Shipping Container Load Limits (Weight vs. Volume)<\/h4>\n <p class=\"text-slate-600 text-sm\">A standard 20ft container typically has a max payload of approx. <strong>28 Metric Tons (28,000 kg)<\/strong>. Ensure your total Gross Weight does not exceed road legal limits at the destination port.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <h3 class=\"text-xl font-bold text-slate-800 mb-4\">Quick Conversion Reference<\/h3>\n <div class=\"overflow-x-auto mb-8 rounded-lg border border-slate-200\">\n <table class=\"w-full text-sm text-left text-slate-600\">\n <thead class=\"text-xs text-slate-700 uppercase bg-slate-100 border-b border-slate-200\">\n <tr>\n <th class=\"px-6 py-3\">From Unit<\/th>\n <th class=\"px-6 py-3\">To Unit<\/th>\n <th class=\"px-6 py-3\">Formula<\/th>\n <\/tr>\n <\/thead>\n <tbody class=\"bg-white divide-y divide-slate-200\">\n <tr>\n <td class=\"px-6 py-3 font-medium text-slate-900\">1 Kilogram (kg)<\/td>\n <td class=\"px-6 py-3\">Pounds (lbs)<\/td>\n <td class=\"px-6 py-3 font-mono text-blue-600\">x 2.20462<\/td>\n <\/tr>\n <tr>\n <td class=\"px-6 py-3 font-medium text-slate-900\">1 Pound (lb)<\/td>\n <td class=\"px-6 py-3\">Kilograms (kg)<\/td>\n <td class=\"px-6 py-3 font-mono text-blue-600\">\/ 2.20462<\/td>\n <\/tr>\n <tr>\n <td class=\"px-6 py-3 font-medium text-slate-900\">1 Metric Ton (t)<\/td>\n <td class=\"px-6 py-3\">Kilograms (kg)<\/td>\n <td class=\"px-6 py-3 font-mono text-blue-600\">x 1000<\/td>\n <\/tr>\n <tr>\n <td class=\"px-6 py-3 font-medium text-slate-900\">1 Ounce (oz)<\/td>\n <td class=\"px-6 py-3\">Grams (g)<\/td>\n <td class=\"px-6 py-3 font-mono text-blue-600\">x 28.3495<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n\n \n <div class=\"mb-4\">\n <h3 class=\"text-xl font-bold text-slate-800 mb-4\">Popular Searches<\/h3>\n <div class=\"flex flex-wrap gap-2\">\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">kg to lbs converter<\/span>\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">grams to ounces formula<\/span>\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">metric ton to short ton<\/span>\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">milligrams to micrograms<\/span>\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">stone to kg table<\/span>\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">carat to gram conversion<\/span>\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">lbs to kg calculator<\/span>\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">weight unit conversion chart<\/span>\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">ton conversion factors<\/span>\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">steel weight calculator<\/span>\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">mass vs weight units<\/span>\n <span class=\"px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium hover:bg-slate-200 cursor-default transition-colors\">grain to gram reload data<\/span>\n <\/div>\n <\/div>\n\n <\/article>\n\n <\/div> \n\n <script>\n \/\/ Data Source (Parsed from prompt)\n \/\/ Base Logic: All factors represent the quantity of units equivalent to 10 kg.\n \/\/ Formula: Value_in_Base = Input_Value \/ Input_Factor\n \/\/ Output_Value = Value_in_Base * Output_Factor\n \/\/ Therefore: Output = Input * (Output_Factor \/ Input_Factor)\n \n const unitsData = [\n \/\/ Metric\n { name: \"Kilogram\", symbol: \"kg\", factor: 10, type: \"metric\" },\n { name: \"Gram\", symbol: \"g\", factor: 10000, type: \"metric\" },\n { name: \"Milligram\", symbol: \"mg\", factor: 10000000, type: \"metric\" },\n { name: \"Microgram\", symbol: \"\u03bcg\", factor: 1e10, type: \"metric\" }, \/\/ 1x10^10\n { name: \"Metric Ton\", symbol: \"t\", factor: 0.01, type: \"metric\" },\n { name: \"Quintal\", symbol: \"q\", factor: 0.1, type: \"metric\" },\n { name: \"Nanogram\", symbol: \"ng\", factor: 1e13, type: \"metric\" }, \/\/ 1x10^13\n { name: \"Picogram\", symbol: \"pg\", factor: 1e16, type: \"metric\" }, \/\/ 1x10^16\n { name: \"Femtogram\", symbol: \"fg\", factor: 1e19, type: \"metric\" }, \/\/ 1x10^19\n { name: \"Attogram\", symbol: \"ag\", factor: 1e22, type: \"metric\" }, \/\/ 1x10^22\n { name: \"Zeptogram\", symbol: \"zg\", factor: 1e25, type: \"metric\" }, \/\/ 1x10^25\n { name: \"Yoctogram\", symbol: \"yg\", factor: 1e28, type: \"metric\" }, \/\/ 1x10^28\n { name: \"Rontogram\", symbol: \"rg\", factor: 1e31, type: \"metric\" }, \/\/ 1x10^31 (Prompt: rg)\n { name: \"Quectogram\", symbol: \"qg\", factor: 1e34, type: \"metric\" }, \/\/ 1x10^34\n \n \/\/ Large Metric (Megagrams etc represented by factors < 1)\n { name: \"Quettagram\", symbol: \"Qg\", factor: 1e-26, type: \"metric\" }, \/\/ 1x10^-26\n { name: \"Ronnagram\", symbol: \"Rg\", factor: 1e-23, type: \"metric\" }, \/\/ 1x10^-23\n { name: \"Yottagram\", symbol: \"Yg\", factor: 1e-20, type: \"metric\" }, \/\/ 1x10^-20\n { name: \"Zettagram\", symbol: \"Zg\", factor: 1e-17, type: \"metric\" }, \/\/ 1x10^-17\n { name: \"Exagram\", symbol: \"Eg\", factor: 1e-14, type: \"metric\" }, \/\/ 1x10^-14\n { name: \"Petagram\", symbol: \"Pg\", factor: 1e-11, type: \"metric\" }, \/\/ 1x10^-11\n { name: \"Teragram\", symbol: \"Tg\", factor: 1e-8, type: \"metric\" }, \/\/ 1x10^-8\n { name: \"Gigagram\", symbol: \"Gg\", factor: 0.00001, type: \"metric\" }, \/\/ 1x10^-5\n { name: \"Megagram\", symbol: \"Mg\", factor: 0.01, type: \"metric\" }, \/\/ Same as Ton\n\n \/\/ Imperial\n { name: \"Pound\", symbol: \"lb\", factor: 22.05, type: \"imperial\" },\n { name: \"Ounce\", symbol: \"oz\", factor: 352.74, type: \"imperial\" },\n { name: \"Carat\", symbol: \"ct\", factor: 50000, type: \"imperial\" },\n { name: \"Grain\", symbol: \"gr\", factor: 154323.58, type: \"imperial\" },\n { name: \"Long Ton (UK)\", symbol: \"lt\", factor: 0.00984, type: \"imperial\" },\n { name: \"Short Ton (US)\", symbol: \"st\", factor: 0.011, type: \"imperial\" },\n { name: \"Hundredweight (UK)\", symbol: \"cwt\", factor: 0.197, type: \"imperial\" }, \/\/ \u82f1\u62c5\n { name: \"Hundredweight (US)\", symbol: \"cwt\", factor: 0.22, type: \"imperial\" }, \/\/ \u7f8e\u62c5 - Ambiguous symbol, maybe add US\/UK\n { name: \"Stone\", symbol: \"st.\", factor: 1.57, type: \"imperial\" }, \/\/ \u82f1\u77f3, symbol collision with short ton st. Used st.\n { name: \"Dram\", symbol: \"dr\", factor: 5643.83, type: \"imperial\" },\n\n \/\/ Market\/Other (Translated from Chinese Market Units)\n { name: \"Dan (Picul)\", symbol: \"dan\", factor: 0.2, type: \"other\" },\n { name: \"Jin (Catty)\", symbol: \"jin\", factor: 20, type: \"other\" },\n { name: \"Liang (Tael)\", symbol: \"liang\", factor: 200, type: \"other\" },\n { name: \"Qian (Mace)\", symbol: \"qian\", factor: 2000, type: \"other\" },\n { name: \"Fen (Candareen)\", symbol: \"fen\", factor: 20000, type: \"other\" }\n ];\n\n \/\/ Clean up duplicate symbols if necessary by appending type logic in display\n \/\/ Specifically CWT. \n const units = unitsData.map((u, index) => {\n if (u.name === \"Hundredweight (US)\") u.symbol = \"cwt (US)\";\n if (u.name === \"Hundredweight (UK)\") u.symbol = \"cwt (UK)\";\n if (u.name === \"Stone\") u.symbol = \"st\"; \/\/ Revert to st but display name handles it\n return { ...u, id: index };\n });\n\n \/\/ DOM Elements\n const inputValue = document.getElementById('inputValue');\n const inputUnit = document.getElementById('inputUnit');\n const outputValue = document.getElementById('outputValue'); \/\/ Changed from outputDisplay\n const outputUnit = document.getElementById('outputUnit');\n const swapBtn = document.getElementById('swapBtn');\n const highlightInput = document.getElementById('highlightInput');\n const highlightOutput = document.getElementById('highlightOutput');\n const metricList = document.getElementById('metricList');\n const imperialList = document.getElementById('imperialList');\n const otherList = document.getElementById('otherList');\n\n \/\/ Initialize Selects\n function initSelects() {\n \/\/ Updated to show only symbol or clean text as requested \"\u53ea\u663e\u793a\u5c0f\u5199\" -> interpreting as \"kg\"\n const createOption = (unit) => `<option value=\"${unit.id}\">${unit.symbol}<\/option>`;\n \n const allOptions = units.map(createOption).join('');\n inputUnit.innerHTML = allOptions;\n outputUnit.innerHTML = allOptions;\n\n \/\/ Defaults\n inputUnit.value = units.find(u => u.symbol === 'kg').id; \/\/ Default kg\n outputUnit.value = units.find(u => u.symbol === 'g').id; \/\/ Default g\n }\n\n \/\/ Formatting Function\n function formatNumber(num) {\n if (num === 0) return \"0\";\n \n const absNum = Math.abs(num);\n\n \/\/ Rule 1: Scientific notation logic update per user request\n \/\/ \"\u6240\u6709\u7ed3\u679c\u5c0f\u4e8e1\u65f6\uff0c\u5c0f\u6570\u70b9\u4f4d\u6570\u5c0f\u4e8e4\u6b63\u5e38\u663e\u793a\uff0c\u4f4d\u6570\u5927\u4e8e4\u7528\u79d1\u5b66\u8ba1\u6570\u6cd5\u663e\u793a\"\n \/\/ Interpreted as: If num < 1, check if it's smaller than 0.0001 (1e-4). \n \/\/ If num < 0.0001, use sci notation. If 0.0001 <= num < 1, show decimals (up to 4?).\n \/\/ Also keep large number rule (>= 1e6).\n \n if (absNum === 0) return \"0\";\n\n if (absNum < 1) {\n if (absNum < 0.0001) {\n \/\/ Less than 0.0001 -> Scientific\n return num.toExponential(4).replace(\/\\.?0+e\/, 'e');\n } else {\n \/\/ Between 0.0001 and 1 -> Show normal decimals\n \/\/ \"\u5c0f\u6570\u70b9\u4f4d\u6570\u5c0f\u4e8e4\u6b63\u5e38\u663e\u793a\" -> means show up to 4 decimals?\n \/\/ e.g. 0.0012 -> 0.0012\n \/\/ Let's use toLocaleString with max 4 decimals to avoid long tails like 0.300000004\n return num.toLocaleString('en-US', { maximumFractionDigits: 4, minimumFractionDigits: 0 });\n }\n }\n \n if (absNum >= 1e6) {\n return num.toExponential(4).replace(\/\\.?0+e\/, 'e'); \n }\n \n \/\/ Integers & Standard Numbers >= 1 and < 1e6\n if (Number.isInteger(num)) {\n return num.toLocaleString('en-US');\n } else {\n \/\/ For numbers >= 1 with decimals, keep standard 2 decimals or similar?\n \/\/ Previous rule was \"keep 2 decimal places\". User didn't explicitly change this for >1.\n \/\/ I'll stick to 2 decimals for consistency for >1 values.\n return parseFloat(num.toFixed(2)).toLocaleString('en-US');\n }\n }\n\n function updateOutput() {\n const val = parseFloat(inputValue.value);\n if (isNaN(val)) {\n outputValue.value = \"\";\n updateHighlight(NaN);\n return;\n }\n\n const inUnit = units[inputUnit.value];\n const outUnit = units[outputUnit.value];\n const result = val * (outUnit.factor \/ inUnit.factor);\n\n \/\/ Set output value (raw or formatted? Input usually takes raw\/clean numbers, but for UX maybe truncated?)\n \/\/ Standard behavior: Input shows exact value user typed, Output shows formatted. \n \/\/ If we make output an input, we must decide if we update it with formatted string or raw number.\n \/\/ Let's stick to a reasonable precision for the input box value (e.g. 6 decimals max to avoid overflow)\n \/\/ But formatNumber logic is complex. Let's use a simpler precision for the box value itself.\n \/\/ Actually, standard HTML input type=number handles floats. \n \/\/ To allow copy-paste and precision, we should probably set the raw-ish number but limited to avoid floating point artifacts.\n let displayResult = result;\n if (!Number.isInteger(result)) {\n displayResult = parseFloat(result.toFixed(6)); \/\/ Limit to 6 decimals for the input box to prevent 0.999999999\n }\n outputValue.value = displayResult;\n\n updateHighlight(val, result, inUnit, outUnit);\n updateLists(val, inUnit);\n }\n\n function updateInput() {\n const val = parseFloat(outputValue.value);\n if (isNaN(val)) {\n inputValue.value = \"\";\n updateHighlight(NaN);\n return;\n }\n\n const inUnit = units[inputUnit.value];\n const outUnit = units[outputUnit.value];\n \n \/\/ Reverse calculation: Input = Output \/ (Output_Factor \/ Input_Factor)\n \/\/ Or Input = Output * (Input_Factor \/ Output_Factor)\n const result = val * (inUnit.factor \/ outUnit.factor);\n\n let displayResult = result;\n if (!Number.isInteger(result)) {\n displayResult = parseFloat(result.toFixed(6));\n }\n inputValue.value = displayResult;\n\n updateHighlight(result, val, inUnit, outUnit);\n updateLists(result, inUnit);\n }\n\n function updateHighlight(inVal, outVal, inUnit, outUnit) {\n if (isNaN(inVal) || isNaN(outVal)) {\n highlightInput.textContent = \"---\";\n document.getElementById('highlightInputUnit').textContent = \"\";\n highlightOutput.textContent = \"---\";\n document.getElementById('highlightOutputUnit').textContent = \"\";\n return;\n }\n highlightInput.textContent = formatNumber(inVal);\n document.getElementById('highlightInputUnit').textContent = inUnit.symbol;\n highlightOutput.textContent = formatNumber(outVal);\n document.getElementById('highlightOutputUnit').textContent = outUnit.symbol;\n }\n\n function updateLists(baseVal, baseUnit) {\n \/\/ Calculate for every unit\n const getVal = (targetUnit) => {\n return baseVal * (targetUnit.factor \/ baseUnit.factor);\n };\n\n const createItem = (u) => {\n const val = getVal(u);\n \/\/ Compact Design: Reduced height, clean layout\n \/\/ Optimized Colors: Soft teal\/blue for badges, neutral slate for text\n \/\/ Font: Mono for numbers\n return `\n <div class=\"group relative p-3 rounded-lg bg-white border border-slate-200 hover:border-indigo-300 hover:shadow-md transition-all duration-200 flex flex-col justify-between min-h-[70px]\">\n <div class=\"flex justify-between items-start mb-1\">\n <span class=\"text-[10px] font-bold text-slate-400 uppercase tracking-widest truncate pr-2 mt-0.5\">${u.name}<\/span>\n <span class=\"text-[10px] font-bold text-indigo-600 bg-indigo-50 group-hover:bg-indigo-600 group-hover:text-white px-1.5 py-0.5 rounded-md transition-colors\">${u.symbol}<\/span>\n <\/div>\n <div class=\"font-bold text-slate-700 text-lg truncate tracking-tight\" title=\"${formatNumber(val)}\">${formatNumber(val)}<\/div>\n <\/div>\n `;\n };\n\n metricList.innerHTML = units.filter(u => u.type === 'metric').map(createItem).join('');\n imperialList.innerHTML = units.filter(u => u.type === 'imperial').map(createItem).join('');\n otherList.innerHTML = units.filter(u => u.type === 'other').map(createItem).join('');\n }\n\n \/\/ Event Listeners\n inputValue.addEventListener('input', updateOutput);\n outputValue.addEventListener('input', updateInput); \/\/ Bidirectional\n inputUnit.addEventListener('change', updateOutput);\n outputUnit.addEventListener('change', updateOutput);\n \n swapBtn.addEventListener('click', () => {\n const temp = inputUnit.value;\n inputUnit.value = outputUnit.value;\n outputUnit.value = temp;\n updateOutput();\n });\n\n \/\/ Init\n initSelects();\n updateOutput();\n\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Weight Unit Converter – Precision Engineering Tool Precision engineering calculator for converting weight and mass units. Instantly switch between Metric<\/p>","protected":false},"author":1,"featured_media":74283,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-74242","page","type-page","status-publish","has-post-thumbnail","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.harsle.com\/ar\/wp-json\/wp\/v2\/pages\/74242","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.harsle.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.harsle.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.harsle.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.harsle.com\/ar\/wp-json\/wp\/v2\/comments?post=74242"}],"version-history":[{"count":0,"href":"https:\/\/www.harsle.com\/ar\/wp-json\/wp\/v2\/pages\/74242\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.harsle.com\/ar\/wp-json\/wp\/v2\/media\/74283"}],"wp:attachment":[{"href":"https:\/\/www.harsle.com\/ar\/wp-json\/wp\/v2\/media?parent=74242"}],"curies":[{"name":"\u0648\u0648\u0631\u062f\u0628\u0631\u064a\u0633","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}